-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
294 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import ListFacet from './list-facet.js'; | ||
|
|
||
| /** | ||
| * A custom HTML element to display a list of facets. | ||
| * <list-facet facet="userAgent" drilldown="share.html" mode="all"> | ||
| * <legend>User Agent</legend> | ||
| * <dl> | ||
| * <dt>desktop</dt> | ||
| * <dd>Chrome 90.0.4430.93 (Windows 10)</dd> | ||
| * </dl> | ||
| * </list-facet> | ||
| */ | ||
| export default class AudienceListFacet extends ListFacet { | ||
| constructor() { | ||
| super(); | ||
| this.placeholders = undefined; | ||
| } | ||
|
|
||
| // eslint-disable-next-line class-methods-use-this | ||
| computeCount(entry) { | ||
| const pv = entry.metrics.pageViews.sum; | ||
| const audiencesCount = []; | ||
| let samples = 0; | ||
| entry.entries.forEach(({ weight, events }) => { | ||
| events | ||
| .filter((event) => event.checkpoint === 'audience' && event.source === entry.value) | ||
| .forEach((event) => { | ||
| audiencesCount.push(event.target.split(':').length); | ||
| samples += weight; | ||
| }); | ||
| }); | ||
| const averageAudiencesCount = audiencesCount.reduce((sum, v) => sum + v, 0) | ||
| / audiencesCount.length; | ||
| const proportionalDistribution = pv / averageAudiencesCount; | ||
| const audienceRatio = samples / proportionalDistribution; | ||
| // eslint-disable-next-line no-console | ||
| console.debug({ | ||
| audience: entry.value, | ||
| page_views: pv, | ||
| proportional_distribution: proportionalDistribution, | ||
| samples, | ||
| audienceRatio, | ||
| estimated_views: audienceRatio * pv, | ||
| }); | ||
| return audienceRatio * pv; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| <html> | ||
|
|
||
| <head> | ||
| <title>Real Use Monitoring (RUM) Explorer | AEM Live</title> | ||
| <script type="importmap">{"imports": { | ||
| "chartjs": "https://esm.sh/[email protected]", | ||
| "chartjs-chart-sankey": "https://esm.sh/[email protected][email protected]" | ||
| }}</script> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <script src="/scripts/lib-franklin.js" type="module"></script> | ||
| <script src="/scripts/scripts.js" type="module"></script> | ||
| <link rel="stylesheet" href="/styles/styles.css" /> | ||
| <script type="module" defer="false"> | ||
| import SankeyChart from './charts/experimentsankey.js'; | ||
| import ConversionTracker from './elements/conversion-tracker.js'; | ||
| import IncognitoCheckbox from './elements/incognito-checkbox.js'; | ||
| import FacetSidebar from './elements/facetsidebar.js'; | ||
| import ListFacet from './elements/list-facet.js'; | ||
| import VariantListFacet from './elements/variant-list-facet.js'; | ||
| import ThumbnailFacet from './elements/thumbnail-facet.js'; | ||
| import LinkFacet from './elements/link-facet.js'; | ||
| import LiteralFacet from './elements/literal-facet.js'; | ||
| import VitalsFacet from './elements/vitals-facet.js'; | ||
| import URLSelector from './elements/url-selector.js'; | ||
| import NumberFormat from './elements/number-format.js'; | ||
| window.slicer = { | ||
| Chart: SankeyChart, | ||
| }; | ||
|
|
||
| customElements.define('incognito-checkbox', IncognitoCheckbox); | ||
| customElements.define('facet-sidebar', FacetSidebar); | ||
| customElements.define('list-facet', ListFacet); | ||
| customElements.define('variant-list-facet', VariantListFacet); | ||
| customElements.define('thumbnail-facet', ThumbnailFacet); | ||
| customElements.define('link-facet', LinkFacet); | ||
| customElements.define('literal-facet', LiteralFacet); | ||
| customElements.define('vitals-facet', VitalsFacet); | ||
| customElements.define('url-selector', URLSelector); | ||
| customElements.define('conversion-tracker', ConversionTracker); | ||
| customElements.define('number-format', NumberFormat); | ||
| </script> | ||
| <script src="./slicer.js" type="module"></script> | ||
| <link rel="stylesheet" href="./rum-slicer.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header></header> | ||
| <main> | ||
| <div> | ||
| <div id="deepmain"> | ||
| <div class="output"> | ||
| <div class="title"> | ||
| <url-selector>www.aem.live</url-selector> | ||
| <div> | ||
| <select id="view"> | ||
| <option value="week">Week</option> | ||
| <option value="month">Month</option> | ||
| <option value="year">Year</option> | ||
| </select> | ||
| <incognito-checkbox></incognito-checkbox> | ||
| </div> | ||
| </div> | ||
| <div class="key-metrics"> | ||
| <ul> | ||
| <li id="pageviews" title="Estimate of page views based on RUM data collected and sampling rate"> | ||
| <h2>Page views</h2> | ||
| <p><number-format>0</number-format></p> | ||
| </li> | ||
| <li id="visits" title="Page views which were not linked from another page on this site"> | ||
| <h2>Visits</h2> | ||
| <p><number-format>0</number-format></p> | ||
| </li> | ||
| <conversion-tracker id="conversions" title="Page views with a user click"> | ||
| <h2>Conversions</h2> | ||
| <p><number-format>0</number-format></p> | ||
| </conversion-tracker> | ||
| <li id="lcp" title="Largest Contentful Paint"> | ||
| <h2>LCP</h2> | ||
| <p><number-format precision="2" fuzzy="false">0</number-format></p> | ||
| </li> | ||
| <li id="cls" title="Cumulative Layout Shift"> | ||
| <h2>CLS</h2> | ||
| <p><number-format precision="2" fuzzy="false">0</number-format></p> | ||
| </li> | ||
| <li id="inp" title="Interaction to Next Paint"> | ||
| <h2>INP</h2> | ||
| <p><number-format precision="2" fuzzy="false">0</number-format></p> | ||
| </li> | ||
| </ul> | ||
| <div class="key-metrics-more" aria-hidden="true"> | ||
| <ul> | ||
| <li id="cls" title="Time to First Byte"> | ||
| <h2>TTFB</h2> | ||
| <p><number-format>0</number-format></p> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <figure> | ||
| <div class="chart-container solitary"> | ||
| <canvas id="time-series"></canvas> | ||
| </div> | ||
| <div class="filter-tags"></div> | ||
| <figcaption> | ||
| <span aria-hidden="true" id="low-data-warning"><span class="danger-icon"></span> small sample size, accuracy | ||
| reduced.</span> | ||
| <span id="timezone"></span> | ||
| </figcaption> | ||
| </figure> | ||
| </div> | ||
|
|
||
| <facet-sidebar> | ||
| <list-facet facet="userAgent" drilldown="share.html"> | ||
| <legend>Device Type and Operating System</legend> | ||
| <dl> | ||
| <dt>desktop</dt> | ||
| <dd>All Desktop</dd> | ||
| <dt>desktop:windows</dt> | ||
| <dd>Windows Desktop</dd> | ||
| <dt>desktop:mac</dt> | ||
| <dd>Mac Desktop</dd> | ||
| <dt>desktop:linux</dt> | ||
| <dd>Linux Desktop</dd> | ||
| <dt>desktop:chromeos</dt> | ||
| <dd>Chrome OS Desktop</dd> | ||
| <dt>mobile</dt> | ||
| <dd>All Mobile</dd> | ||
| <dt>mobile:android</dt> | ||
| <dd>Android Mobile</dd> | ||
| <dt>mobile:ios</dt> | ||
| <dd>iOS Mobile</dd> | ||
| <dt>mobile:ipados</dt> | ||
| <dd>iPad Mobile</dd> | ||
| <dt>bot</dt> | ||
| <dd>All Bots</dd> | ||
| <dt>bot:seo</dt> | ||
| <dd>SEO Bot</dd> | ||
| <dt>bot:search</dt> | ||
| <dd>Search Engine Crawler</dd> | ||
| <dt>bot:ads</dt> | ||
| <dd>Ad Bot</dd> | ||
| <dt>bot:social</dt> | ||
| <dd>Social Media Bot</dd> | ||
| </dl> | ||
| </list-facet> | ||
| <link-facet facet="url" drilldown="list.html" thumbnail="true" highlight="filter"> | ||
| <legend>URL</legend> | ||
| </link-facet> | ||
| <list-facet facet="checkpoint" drilldown="flow.html" highlight="filter"> | ||
| <legend>Checkpoints</legend> | ||
| <dl> | ||
| <dt>enter</dt> | ||
| <dd>Visit Entry</dd> | ||
| <dt>loadresource</dt> | ||
| <dd>Fragment Loaded</dd> | ||
| <dt>404</dt> | ||
| <dd>Not Found</dd> | ||
| <dt>viewblock</dt> | ||
| <dd>Block Viewed</dd> | ||
| <dt>viewmedia</dt> | ||
| <dd>Media Viewed</dd> | ||
| <dt>click</dt> | ||
| <dd>Clicked</dd> | ||
| <dt>error</dt> | ||
| <dd>JavaScript Error</dd> | ||
| <dt>paid</dt> | ||
| <dd>Marketing Campaigns</dd> | ||
| <dt>consent</dt> | ||
| <dd>Consent</dd> | ||
| <dt>navigate</dt> | ||
| <dd>Internal Navigation</dd> | ||
| <dt>experiment</dt> | ||
| <dd>Experiment</dd> | ||
| </dl> | ||
| </list-facet> | ||
| <link-facet facet="trafficsource"> | ||
| <legend>Traffic Source</legend> | ||
| </link-facet> | ||
| <list-facet facet="traffictype"> | ||
| <legend>Traffic Type</legend> | ||
| </list-facet> | ||
| <link-facet facet="entryevent"> | ||
| <legend>Entry Event</legend> | ||
| </link-facet> | ||
| <list-facet facet="loadtype"> | ||
| <legend>Load Type</legend> | ||
| </list-facet> | ||
| <list-facet facet="pagetype"> | ||
| <legend>Page Type</legend> | ||
| </list-facet> | ||
| <list-facet facet="contenttype"> | ||
| <legend>Experiment</legend> | ||
| </list-facet> | ||
| <variant-list-facet facet="variant"> | ||
| <legend>Variant</legend> | ||
| </variant-list-facet> | ||
| <list-facet facet="interaction"> | ||
| <legend>Interaction</legend> | ||
| </list-facet> | ||
| <list-facet facet="clicktarget"> | ||
| <legend>Click Target Type</legend> | ||
| </list-facet> | ||
| <list-facet facet="exit"> | ||
| <legend>Exit Link</legend> | ||
| </list-facet> | ||
| <vitals-facet facet="vitals"> | ||
| <legend>Experience Quality</legend> | ||
| </vitals-facet> | ||
| <thumbnail-facet facet="lcp.target"> | ||
| <legend>LCP Image</legend> | ||
| </thunbnail-facet> | ||
| <literal-facet facet="lcp.source"> | ||
| <legend>LCP Element</legend> | ||
| </literal-facet> | ||
| </facet-sidebar> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <footer></footer> | ||
| <div id="copied-toast" class="toast" aria-hidden="true"> | ||
| Rows copied to clipboard, ready to paste into spreadsheet | ||
| </div> | ||
| <div id="shared-toast" class="toast" aria-hidden="true"> | ||
| Link copied to clipboard, ready to share | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters