From 4bf456ef72752618919cd78b89caed271e8a7452 Mon Sep 17 00:00:00 2001 From: Julien Ramboz Date: Mon, 29 Jul 2024 10:18:42 -0700 Subject: [PATCH] feat: add audiences reporting --- .../oversight/elements/audience-list-facet.js | 47 ++++ tools/oversight/elements/list-facet.js | 7 +- tools/oversight/experiments.html | 228 ++++++++++++++++++ tools/oversight/explorer.html | 7 + tools/oversight/list.html | 5 + tools/oversight/utils.js | 1 + 6 files changed, 294 insertions(+), 1 deletion(-) create mode 100644 tools/oversight/elements/audience-list-facet.js create mode 100644 tools/oversight/experiments.html diff --git a/tools/oversight/elements/audience-list-facet.js b/tools/oversight/elements/audience-list-facet.js new file mode 100644 index 00000000..8e816d0b --- /dev/null +++ b/tools/oversight/elements/audience-list-facet.js @@ -0,0 +1,47 @@ +import ListFacet from './list-facet.js'; + +/** + * A custom HTML element to display a list of facets. + * + * User Agent + *
+ *
desktop
+ *
Chrome 90.0.4430.93 (Windows 10)
+ *
+ * + */ +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; + } +} diff --git a/tools/oversight/elements/list-facet.js b/tools/oversight/elements/list-facet.js index 58117c8f..41f8fd4c 100644 --- a/tools/oversight/elements/list-facet.js +++ b/tools/oversight/elements/list-facet.js @@ -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'); @@ -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 = '-'; diff --git a/tools/oversight/experiments.html b/tools/oversight/experiments.html new file mode 100644 index 00000000..6ec44e9d --- /dev/null +++ b/tools/oversight/experiments.html @@ -0,0 +1,228 @@ + + + + Real Use Monitoring (RUM) Explorer | AEM Live + + + + + + + + + + + +
+
+
+
+
+
+ www.aem.live +
+ + +
+
+
+
    +
  • +

    Page views

    +

    0

    +
    • +
  • +

    Visits

    +

    0

    +
    • + +

    Conversions

    +

    0

    +     +
  • +

    LCP

    +

    0

    +
    • +
  • +

    CLS

    +

    0

    +
    • +
  • +

    INP

    +

    0

    +
    • +
+ +
+
+
+ +
+
+
+ + +
+
+
+ + + + Device Type and Operating System +
+
desktop
+
All Desktop
+
desktop:windows
+
Windows Desktop
+
desktop:mac
+
Mac Desktop
+
desktop:linux
+
Linux Desktop
+
desktop:chromeos
+
Chrome OS Desktop
+
mobile
+
All Mobile
+
mobile:android
+
Android Mobile
+
mobile:ios
+
iOS Mobile
+
mobile:ipados
+
iPad Mobile
+
bot
+
All Bots
+
bot:seo
+
SEO Bot
+
bot:search
+
Search Engine Crawler
+
bot:ads
+
Ad Bot
+
bot:social
+
Social Media Bot
+
+ + + URL + + + Checkpoints +
+
enter
+
Visit Entry
+
loadresource
+
Fragment Loaded
+
404
+
Not Found
+
viewblock
+
Block Viewed
+
viewmedia
+
Media Viewed
+
click
+
Clicked
+
error
+
JavaScript Error
+
paid
+
Marketing Campaigns
+
consent
+
Consent
+
navigate
+
Internal Navigation
+
experiment
+
Experiment
+
+ + + Traffic Source + + + Traffic Type + + + Entry Event + + + Load Type + + + Page Type + + + Experiment + + + Variant + + + Interaction + + + Click Target Type + + + Exit Link + + + Experience Quality + + + LCP Image + + + LCP Element + + +
+
+
+ + + + + + \ No newline at end of file diff --git a/tools/oversight/explorer.html b/tools/oversight/explorer.html index 3b53fd77..e7f4e7fd 100644 --- a/tools/oversight/explorer.html +++ b/tools/oversight/explorer.html @@ -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 = { @@ -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); @@ -168,6 +170,8 @@

TTFB

Internal Navigation
cwv-lcp
Largest Contentful Paint
+
audiences
+
User Segments
@@ -307,6 +311,9 @@

TTFB

LCP Element (Preview) + + Audiences + diff --git a/tools/oversight/list.html b/tools/oversight/list.html index 0f72b51c..8cb76f44 100644 --- a/tools/oversight/list.html +++ b/tools/oversight/list.html @@ -162,6 +162,8 @@

TTFB

Consent
navigate
Internal Navigation
+
audiences
+
User Segments
@@ -232,6 +234,9 @@

TTFB

Experience Quality + + Audiences + diff --git a/tools/oversight/utils.js b/tools/oversight/utils.js index 0d1f178f..d909099c 100644 --- a/tools/oversight/utils.js +++ b/tools/oversight/utils.js @@ -20,6 +20,7 @@ export function isKnownFacet(key) { || key === 'pagetype' || key === 'loadtype' || key === 'contenttype' + || key === 'audience' || key === 'interaction' || key === 'clicktarget' || key === 'exit'