@adobe/helix-rum-enhancer 2.47.3 → 2.49.0

package/src/index.js

@@ -23,7 +23,7 @@
     a11y: [557, 781, 897, 955, 959]
   };
 
-  const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB'];
+  const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB', 'ua'];
   const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
   fflags.enabled('example', () => DEFAULT_TRACKING_EVENTS.push('example'));
 
@@ -57,11 +57,20 @@
       return null;
     }
   };
-  function walk(el, checkFn) {
+  const untrustedClickPayload = event => {
+    if (event && event.isTrusted === false) {
+      const ua = navigator.userAgent;
+      return {
+        ua: ua.includes('+http') ? ua : `${ua} +http://event.untrusted`
+      };
+    }
+    return {};
+  };
+  function walk(el, check) {
     if (!el || el === document.body || el === document.documentElement) {
       return undefined;
     }
-    return checkFn(el) || walk(el.parentElement || el.parentNode && el.parentNode.host, checkFn);
+    return check(el) || walk(el.parentElement || el.parentNode && el.parentNode.host, check);
   }
   function isDialog(el) {
     const cs = window.getComputedStyle(el);
@@ -72,30 +81,30 @@
       return true;
     }
     if (el.tagName === 'A') {
-      return Array.from(el.classList).some(className => className.match(/button|cta/));
+      return Array.from(el.classList).some(cls => cls.match(/button|cta/));
     }
     return el.getAttribute('role') === 'button';
   }
-  function getSourceContext(el) {
-    const formEl = el.closest('form');
-    if (formEl) {
-      const id = formEl.getAttribute('id');
+  function srcContext(el) {
+    const form = el.closest('form');
+    if (form) {
+      const id = form.getAttribute('id');
       if (id) {
         return `form#${CSS.escape(id)}`;
       }
-      return `form${formEl.classList.length > 0 ? `.${CSS.escape(formEl.classList[0])}` : ''}`;
+      return `form${form.classList.length > 0 ? `.${CSS.escape(form.classList[0])}` : ''}`;
     }
     const block = el.closest('.block[data-block-name]');
     return block && `.${block.getAttribute('data-block-name')}` || walk(el, isDialog) && 'dialog' || walk(el, e => e.tagName && e.tagName.includes('-') && e.tagName.toLowerCase()) || ['nav', 'header', 'footer', 'aside'].find(t => el.closest(t)) || walk(el, e => e.id && `#${CSS.escape(e.id)}`);
   }
-  function getSourceElement(el) {
+  function srcElement(el) {
     const f = el.closest('form');
     if (f && Array.from(f.elements).includes(el)) {
       return el.tagName.toLowerCase() + (['INPUT', 'BUTTON'].includes(el.tagName) ? `[type='${el.getAttribute('type') || ''}']` : '');
     }
     return walk(el, isButton) && 'button' || el.tagName.toLowerCase().match(/^(a|img|video|form)$/) && el.tagName.toLowerCase();
   }
-  function getSourceIdentifier(el) {
+  function srcId(el) {
     return el.id && `#${CSS.escape(el.id)}` || el.getAttribute('data-block-name') && `.${el.getAttribute('data-block-name')}` || el.classList.length > 0 && `.${CSS.escape(el.classList[0])}`;
   }
   const sourceSelector = el => {
@@ -106,9 +115,9 @@
       if (el.getAttribute('data-rum-source')) {
         return el.getAttribute('data-rum-source');
       }
-      const ctx = getSourceContext(el.parentElement) || '';
-      const name = getSourceElement(el) || '';
-      const id = getSourceIdentifier(el) || '';
+      const ctx = srcContext(el.parentElement) || '';
+      const name = srcElement(el) || '';
+      const id = srcId(el) || '';
       return `${ctx} ${name}${id}`.trim() || `"${el.textContent.substring(0, 10)}"`;
     } catch (error) {
       return null;
@@ -122,19 +131,19 @@
   } = window.hlx && window.hlx.rum ? window.hlx.rum : {};
   const createMO = cb => window.MutationObserver ? new MutationObserver(cb) : {};
   const [blocksMO, mediaMO] = [blocksMCB, mediaMCB].map(createMO);
-  const hasCookieKey = key => document.cookie.split(';').some(c => c.trim().startsWith(`${key}=`));
-  const pluginBasePath = new URL(document.currentScript.src).href.replace(/index(\.map)?\.js/, 'plugins');
+  const hasCookie = key => document.cookie.split(';').some(c => c.trim().startsWith(`${key}=`));
+  const pluginBase = new URL(document.currentScript.src).href.replace(/index(\.map)?\.js/, 'plugins');
   const CONSENT_PROVIDERS = [{
     name: 'onetrust',
-    detect: () => hasCookieKey('OptanonAlertBoxClosed') || document.querySelector('#onetrust-banner-sdk, #onetrust-pc-sdk')
+    detect: () => hasCookie('OptanonAlertBoxClosed') || document.querySelector('#onetrust-banner-sdk, #onetrust-pc-sdk')
   }, {
     name: 'trustarc',
-    detect: () => ['notice_gdpr_prefs', 'notice_preferences'].some(hasCookieKey) || document.querySelector('#truste-consent-track')
+    detect: () => ['notice_gdpr_prefs', 'notice_preferences'].some(hasCookie) || document.querySelector('#truste-consent-track')
   }, {
     name: 'usercentrics',
     detect: () => window.localStorage.getItem('uc_gcm') || document.querySelector('#usercentrics-root')
   }];
-  const getConsentProvider = () => CONSENT_PROVIDERS.find(({
+  const getConsent = () => CONSENT_PROVIDERS.find(({
     detect
   }) => detect());
   const bodyChildMO = {
@@ -146,41 +155,41 @@
     }
   };
   const PLUGINS = {
-    cwv: `${pluginBasePath}/cwv.js`,
-    a11y: `${pluginBasePath}/a11y.js`,
+    cwv: `${pluginBase}/cwv.js`,
+    a11y: `${pluginBase}/a11y.js`,
     form: {
-      url: `${pluginBasePath}/form.js`,
+      url: `${pluginBase}/form.js`,
       when: () => document.querySelector('form'),
       isBlockDependent: true,
-      mutationObserverParams: bodyChildMO
+      moParams: bodyChildMO
     },
     redirect: {
-      url: `${pluginBasePath}/redirect.js`,
+      url: `${pluginBase}/redirect.js`,
       when: ({
         perfEntry: pe,
         urlParameters: usp
       }) => pe && (usp.get('redirect_from') || pe.redirectCount > 0 || pe.fetchStart > 50)
     },
     video: {
-      url: `${pluginBasePath}/video.js`,
+      url: `${pluginBase}/video.js`,
       when: () => document.querySelector('video'),
       isBlockDependent: true
     },
     webcomponent: {
-      url: `${pluginBasePath}/webcomponent.js`,
+      url: `${pluginBase}/webcomponent.js`,
       when: () => [...document.querySelectorAll('*')].some(el => el.tagName && el.tagName.includes('-')),
       isBlockDependent: true
     },
     martech: {
-      url: `${pluginBasePath}/martech.js`,
+      url: `${pluginBase}/martech.js`,
       when: ({
         urlParameters
       }) => urlParameters.size > 0
     },
     consent: {
-      when: () => getConsentProvider(),
+      when: () => getConsent(),
       isBlockDependent: true,
-      mutationObserverParams: bodyChildMO
+      moParams: bodyChildMO
     }
   };
   const MAX_EV = 1023;
@@ -189,10 +198,10 @@
     if (!window.IntersectionObserver) {
       return null;
     }
-    const observer = new IntersectionObserver(entries => {
+    const obs = new IntersectionObserver(entries => {
       try {
         entries.filter(e => e.isIntersecting).forEach(e => {
-          observer.unobserve(e.target);
+          obs.unobserve(e.target);
           const target = targetSelector(e.target);
           const source = sourceSelector(e.target);
           if (checkpoint === 'viewmedia') {
@@ -211,14 +220,15 @@
         });
       } catch (error) {}
     });
-    return observer;
+    return obs;
   }
-  const PLUGIN_PARAMETERS = {
+  const PLUGIN_PARAMS = {
     context: document.body,
     fflags,
     sampleRUM,
     sourceSelector,
     targetSelector,
+    untrustedClickPayload,
     getIntersectionObserver,
     createMO
   };
@@ -230,36 +240,36 @@
       ...params,
       urlParameters: usp
     })) {
-      if (plugin.mutationObserverParams && !plugin.isBeingObserved) {
+      if (plugin.moParams && !plugin.isBeingObserved) {
         createPluginMO(key, params, usp);
       }
       return null;
     }
     if (key === 'consent') {
-      plugin.url = `${pluginBasePath}/${getConsentProvider().name}.js`;
+      plugin.url = `${pluginBase}/${getConsent().name}.js`;
     }
     if (!pluginCache.has(key)) {
       pluginCache.set(key, import(`${plugin.url || plugin}`));
     }
     return pluginCache.get(key).then(p => p.default && p.default(params) || typeof p === 'function' && p(params)).catch(() => {});
   }
-  function loadPlugins(filter = () => true, params = PLUGIN_PARAMETERS) {
+  function loadPlugins(filter = () => true, params = PLUGIN_PARAMS) {
     Object.entries(PLUGINS).filter(([, plugin]) => filter(plugin)).map(([key]) => loadPlugin(key, params));
   }
   function createPluginMO(key, params, usp) {
     const plugin = PLUGINS[key];
-    const observer = createMO(() => {
+    const obs = createMO(() => {
       if (plugin.when({
         urlParameters: usp
       })) {
         plugin.isBeingObserved = false;
-        observer.disconnect();
+        obs.disconnect();
         loadPlugin(key, params);
       }
     });
-    if (observer instanceof MutationObserver) {
+    if (obs instanceof MutationObserver) {
       plugin.isBeingObserved = true;
-      observer.observe(plugin.mutationObserverParams.target, plugin.mutationObserverParams.options);
+      obs.observe(plugin.moParams.target, plugin.moParams.options);
     }
   }
   let maxEvents = MAX_EV;
@@ -326,7 +336,7 @@
         sampleRUM('enter', payload);
       }
       loadPlugin('redirect', {
-        ...PLUGIN_PARAMETERS,
+        ...PLUGIN_PARAMS,
         perfEntry
       });
     };
@@ -339,7 +349,7 @@
     });
   }
   function addLoadResourceTracking() {
-    const observer = new PerformanceObserver(list => {
+    const obs = new PerformanceObserver(list => {
       try {
         const entries = list.getEntries();
         entries.filter(e => !e.responseStatus || e.responseStatus < 400).filter(e => window.location.hostname === new URL(e.name).hostname || fflags.has('allresources')).filter(e => {
@@ -347,10 +357,10 @@
             pathname,
             hostname
           } = new URL(e.name);
-          const extensionMatch = pathname.match(hostname !== window.location.hostname ? '.*(\\.html$|\\.json|\\.js|graphql|api)' : '.*(\\.plain\\.html$|\\.json|graphql|api)');
+          const extMatch = pathname.match(hostname !== window.location.hostname ? '.*(\\.html$|\\.json|\\.js|graphql|api)' : '.*(\\.plain\\.html$|\\.json|graphql|api)');
           const isDropIn = fflags.has('allresources') && (pathname.includes('__dropins__/storefront-') || pathname.includes('scripts/dropins/storefront-'));
           const isImage = fflags.has('allresources') && pathname.match(/\.(png|jpe?g|svg)$/i);
-          return extensionMatch || isDropIn || isImage;
+          return extMatch || isDropIn || isImage;
         }).forEach(e => {
           sampleRUM('loadresource', {
             source: e.name,
@@ -365,7 +375,7 @@
         });
       } catch (error) {}
     });
-    observer.observe({
+    obs.observe({
       type: 'resource',
       buffered: true
     });
@@ -392,21 +402,21 @@
       childList: true
     });
   }
-  function addViewBlockTracking(element) {
-    const blockobserver = getIntersectionObserver('viewblock');
-    if (blockobserver) {
-      const blocks = element.getAttribute('data-block-status') ? [element] : element.querySelectorAll('div[data-block-status="loaded"]');
-      blocks.forEach(b => blockobserver.observe(b));
+  function addViewBlockTracking(el) {
+    const blockObs = getIntersectionObserver('viewblock');
+    if (blockObs) {
+      const blocks = el.getAttribute('data-block-status') ? [el] : el.querySelectorAll('div[data-block-status="loaded"]');
+      blocks.forEach(b => blockObs.observe(b));
     }
   }
   const observedMedia = new Set();
   function addViewMediaTracking(parent) {
-    const mediaobserver = getIntersectionObserver('viewmedia');
-    if (mediaobserver) {
+    const mediaObs = getIntersectionObserver('viewmedia');
+    if (mediaObs) {
       parent.querySelectorAll('img, video, audio, iframe').forEach(m => {
         if (!observedMedia.has(m)) {
           observedMedia.add(m);
-          mediaobserver.observe(m);
+          mediaObs.observe(m);
         }
       });
     }
@@ -417,7 +427,7 @@
   function blocksMCB(mutations) {
     mutations.filter(m => m.type === 'attributes' && m.attributeName === 'data-block-status').filter(m => m.target.dataset.blockStatus === 'loaded').forEach(m => {
       addObserver('form', el => loadPlugins(p => p.isBlockDependent, {
-        ...PLUGIN_PARAMETERS,
+        ...PLUGIN_PARAMS,
         context: el
       }), m.target);
       addObserver('viewblock', addViewBlockTracking, m.target);
@@ -437,7 +447,8 @@
       }
       sampleRUM('click', {
         target: targetSelector(event.target),
-        source: sourceSelector(event.target)
+        source: sourceSelector(event.target),
+        ...untrustedClickPayload(event)
       });
     });
     addNavigationTracking();

package/src/index.md5

@@ -1 +1 @@
-fa307b6aa9f67e9f3e13a064b9d0d9d1
+7b41a36b2c1fe6f67ae750a38cc144db

package/src/index.sri

@@ -1 +1 @@
-sha384-LDEOuwnv1QygFu3bCEAHTg6z4MeF1qxPVmZFOdVyUNmMbptaV4/+WwXyADbV1Uom
+sha384-Bj6YB2m5ENO7H/0f3agpgLqday7DeSX2gyCAHRh0eRjrkzsEKXSIWq6eadByRqut

package/src/plugins/cwv.js

@@ -47,7 +47,8 @@
     },
     a = new WeakMap();
   function d(e, t) {
-    return a.get(e) || a.set(e, new t()), a.get(e);
+    let n = a.get(t);
+    return n || (n = new WeakMap(), a.set(t, n)), n.get(e) || n.set(e, new t()), n.get(e);
   }
   class h {
     t;
@@ -85,17 +86,17 @@
   let u = -1;
   const m = new Set(),
     g = () => "hidden" !== document.visibilityState || document.prerendering ? 1 / 0 : 0,
-    v = e => {
+    p = e => {
       if ("hidden" === document.visibilityState) {
         if ("visibilitychange" === e.type) for (const e of m) e();
-        isFinite(u) || (u = "visibilitychange" === e.type ? e.timeStamp : 0, removeEventListener("prerenderingchange", v, true));
+        isFinite(u) || (u = "visibilitychange" === e.type ? e.timeStamp : 0, removeEventListener("prerenderingchange", p, true));
       }
     },
-    p = () => {
+    v = () => {
       if (u < 0) {
         const e = r(),
           t = document.prerendering ? void 0 : globalThis.performance.getEntriesByType("visibility-state").find(t => "hidden" === t.name && t.startTime >= e)?.startTime;
-        u = t ?? g(), addEventListener("visibilitychange", v, true), addEventListener("prerenderingchange", v, true), n(() => {
+        u = t ?? g(), addEventListener("visibilitychange", p, true), addEventListener("prerenderingchange", p, true), n(() => {
           setTimeout(() => {
             u = g();
           });
@@ -116,7 +117,7 @@
     T = [1800, 3e3],
     b = (e, t = {}) => {
       y(() => {
-        const o = p();
+        const o = v();
         let a,
           d = c("FCP");
         const h = f("paint", e => {
@@ -148,8 +149,8 @@
     l = [];
     u = new Map();
     m;
-    v;
-    p() {
+    p;
+    v() {
       F = C(), this.l.length = 0, this.u.clear();
     }
     T() {
@@ -169,7 +170,7 @@
           const e = this.l.splice(10);
           for (const t of e) this.u.delete(t.id);
         }
-        this.v?.(n);
+        this.p?.(n);
       }
     }
   }
@@ -205,7 +206,7 @@
       document.prerendering ? y(() => H(e)) : "complete" !== document.readyState ? addEventListener("load", () => H(e), true) : setTimeout(e);
     };
   return e.CLSThresholds = E, e.FCPThresholds = T, e.INPThresholds = B, e.LCPThresholds = q, e.TTFBThresholds = N, e.onCLS = (e, t = {}) => {
-    const o = p();
+    const o = v();
     b(l(() => {
       let r,
         a = c("CLS", 0);
@@ -223,7 +224,7 @@
     }));
   }, e.onFCP = b, e.onINP = (e, t = {}) => {
     if (!globalThis.PerformanceEventTiming || !("interactionId" in PerformanceEventTiming.prototype)) return;
-    const s = p();
+    const s = v();
     y(() => {
       I();
       let o,
@@ -245,12 +246,12 @@
       }), s.onHidden(() => {
         h(l.takeRecords()), o(true);
       }), n(() => {
-        a.p(), r = c("INP"), o = i(e, r, B, t.reportAllChanges);
+        a.v(), r = c("INP"), o = i(e, r, B, t.reportAllChanges);
       }));
     });
   }, e.onLCP = (e, t = {}) => {
     y(() => {
-      const o = p();
+      const o = v();
       let a,
         h = c("LCP");
       const u = d(t, S),
@@ -318,6 +319,13 @@ function addCWVTracking({
             data.target = targetSelector(element);
             data.source = sourceSelector(element) || element && element.outerHTML.slice(0, 30);
           }
+          if (measurement.name === 'CLS' && measurement.entries.length > 0) {
+            const largest = measurement.entries.reduce((a, b) => b.value > (a ? a.value : 0) ? b : a, undefined);
+            const node = largest && largest.sources && largest.sources.map(s => s.node).find(n => n && n.nodeType === 1);
+            if (node) {
+              data.source = sourceSelector(node) || node.outerHTML.slice(0, 30);
+            }
+          }
           sampleRUM('cwv', data);
         };
         const isEager = metric => ['CLS', 'LCP'].includes(metric);