Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(audience): add audiences reporting in RUM Explorer #616

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(audience): add audiences reporting in RUM Explorer #616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions tools/oversight/elements/audience-list-facet.js
View file
Open in desktop
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;
}
}
7 changes: 6 additions & 1 deletion tools/oversight/elements/list-facet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export default class ListFacet extends HTMLElement {
label.setAttribute('for', `${facetName}-${entry.value}`);
const countspan = document.createElement('number-format');
countspan.className = 'count';
countspan.textContent = metrics.pageViews.sum;
countspan.textContent = this.computeCount(entry);
countspan.setAttribute('sample-size', metrics.pageViews.count);
countspan.setAttribute('total', this.dataChunks.totals.pageViews.sum);
countspan.setAttribute('fuzzy', 'false');
Expand Down Expand Up @@ -371,6 +371,11 @@ export default class ListFacet extends HTMLElement {
return valuespan;
}

// eslint-disable-next-line class-methods-use-this
computeCount(entry) {
return entry.metrics.pageViews.sum;
}

createCWVChiclet(entry, metricName = 'lcp') {
const CWVDISPLAYTHRESHOLD = 10;
let cwv = '-';
Expand Down
228 changes: 228 additions & 0 deletions tools/oversight/experiments.html
View file
Open in desktop
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>
7 changes: 7 additions & 0 deletions tools/oversight/explorer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
import LinkFacet from './elements/link-facet.js';
import LiteralFacet from './elements/literal-facet.js';
import VitalsFacet from './elements/vitals-facet.js';
import AudienceListFacet from './elements/audience-list-facet.js';
import URLSelector from './elements/url-selector.js';
import NumberFormat from './elements/number-format.js';
window.slicer = {
Expand All @@ -35,6 +36,7 @@
customElements.define('url-selector', URLSelector);
customElements.define('conversion-tracker', ConversionTracker);
customElements.define('number-format', NumberFormat);
customElements.define('audience-literal-facet', AudienceListFacet);
</script>
<script src="./slicer.js" type="module"></script>
<link rel="stylesheet" href="./rum-slicer.css">
Expand Down Expand Up @@ -168,6 +170,8 @@ <h2>TTFB</h2>
<dd>Internal Navigation</dd>
<dt>cwv-lcp</dt>
<dd>Largest Contentful Paint</dd>
<dt>audiences</dt>
<dd>User Segments</dd>
</dl>
</list-facet>
<literal-facet facet="click.source" drilldown="list.html">
Expand Down Expand Up @@ -307,6 +311,9 @@ <h2>TTFB</h2>
<thumbnail-facet facet="cwv-lcp.target">
<legend>LCP Element (Preview)</legend>
</thumbnail-facet>
<audience-literal-facet facet="audience.source" drilldown="list.html">
<legend>Audiences</legend>
</audience-literal-facet>
</facet-sidebar>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions tools/oversight/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,8 @@ <h2>TTFB</h2>
<dd>Consent</dd>
<dt>navigate</dt>
<dd>Internal Navigation</dd>
<dt>audiences</dt>
<dd>User Segments</dd>
</dl>
</list-facet>
<literal-facet facet="click.source" drilldown="list.html">
Expand Down Expand Up @@ -232,6 +234,9 @@ <h2>TTFB</h2>
<vitals-facet facet="vitals">
<legend>Experience Quality</legend>
</vitals-facet>
<audience-literal-facet facet="audience.source" drilldown="list.html">
<legend>Audiences</legend>
</audience-literal-facet>
</facet-sidebar>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions tools/oversight/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export function isKnownFacet(key) {
|| key === 'pagetype'
|| key === 'loadtype'
|| key === 'contenttype'
|| key === 'audience'
|| key === 'interaction'
|| key === 'clicktarget'
|| key === 'exit'
Expand Down
Loading