@adobe/helix-rum-enhancer 2.31.0-beta.2 → 2.31.0-beta.4

package/src/index.js

@@ -14,33 +14,34 @@
 
   const h = (s, a) => [...s].reduce((p, c) => p + c.charCodeAt(0), a) % 1371;
   const fflags = {
-    has: (f) => fflags[f].includes(h(window.origin, 1)) || /localhost/.test(window.origin),
+    has: f => fflags[f].includes(h(window.origin, 1)) || /localhost/.test(window.origin),
     enabled: (f, c) => fflags.has(f) && c(),
     disabled: (f, c) => !fflags.has(f) && c(),
     eagercwv: [683],
     redirect: [620, 1139],
     example: [543, 770, 1136],
     language: [543, 959, 1139, 620],
-    allresources: [1139],
+    allresources: [1139]
   };
 
   const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB'];
   const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
   fflags.enabled('example', () => DEFAULT_TRACKING_EVENTS.push('example'));
 
-  const { href } = window.location;
+  const {
+    href
+  } = window.location;
   const urlSanitizers = {
     full: (url = href) => new URL(url).toString(),
     origin: (url = href) => new URL(url).origin,
     path: (url = href) => {
       const u = new URL(url);
       return `${u.origin}${u.pathname}`;
-    },
+    }
   };
 
-  const getTargetValue = (el) => el.getAttribute('data-rum-target') || el.getAttribute('href')
-      || el.currentSrc || el.getAttribute('src') || el.dataset.action || el.action;
-  const targetSelector = (el) => {
+  const getTargetValue = el => el.getAttribute('data-rum-target') || el.getAttribute('href') || el.currentSrc || el.getAttribute('src') || el.dataset.action || el.action;
+  const targetSelector = el => {
     try {
       if (!el) return undefined;
       let v = getTargetValue(el);
@@ -67,14 +68,14 @@
     if (el.getAttribute('role') === 'alertdialog') return true;
     if (el.getAttribute('aria-modal') === 'true') return true;
     const cs = window.getComputedStyle(el);
-    return (cs && cs.position === 'fixed' && cs.zIndex > 100);
+    return cs && cs.position === 'fixed' && cs.zIndex > 100;
   }
   function isButton(el) {
     if (el.tagName === 'BUTTON') return true;
     if (el.tagName === 'INPUT' && el.getAttribute('type') === 'button') return true;
     if (el.tagName === 'A') {
       const classes = Array.from(el.classList);
-      return classes.some((className) => className.match(/button|cta/));
+      return classes.some(className => className.match(/button|cta/));
     }
     return el.getAttribute('role') === 'button';
   }
@@ -90,15 +91,12 @@
     if (el.closest('header')) return 'header';
     if (el.closest('footer')) return 'footer';
     if (el.closest('aside')) return 'aside';
-    return (walk(el, (e) => e.id && `#${e.id}`));
+    return walk(el, e => e.id && `#${e.id}`);
   }
   function getSourceElement(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 el.tagName.toLowerCase() + (['INPUT', 'BUTTON'].includes(el.tagName) ? `[type='${el.getAttribute('type') || ''}']` : '');
     }
     if (walk(el, isButton)) return 'button';
     return el.tagName.toLowerCase().match(/^(a|img|video)$/) && el.tagName.toLowerCase();
@@ -106,9 +104,9 @@
   function getSourceIdentifier(el) {
     if (el.id) return `#${el.id}`;
     if (el.getAttribute('data-block-name')) return `.${el.getAttribute('data-block-name')}`;
-    return (el.classList.length > 0 && `.${el.classList[0]}`);
+    return el.classList.length > 0 && `.${el.classList[0]}`;
   }
-  const sourceSelector = (el) => {
+  const sourceSelector = el => {
     try {
       if (!el || el === document.body || el === document.documentElement) {
         return undefined;
@@ -125,92 +123,92 @@
     }
   };
 
-  function addCookieConsentTracking(sampleRUM) {
-    const cmpCookie = document.cookie.split(';')
-      .map((c) => c.trim())
-      .find((cookie) => cookie.startsWith('OptanonAlertBoxClosed='));
-    if (cmpCookie) {
-      sampleRUM('consent', { source: 'onetrust', target: 'hidden' });
-      return;
+  const {
+    sampleRUM,
+    queue,
+    isSelected
+  } = 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 PLUGINS = {
+    cwv: `${pluginBasePath}/cwv.js`,
+    form: {
+      url: `${pluginBasePath}/form.js`,
+      condition: () => document.querySelector('form'),
+      isBlockDependent: true
+    },
+    video: {
+      url: `${pluginBasePath}/video.js`,
+      condition: () => document.querySelector('video'),
+      isBlockDependent: true
+    },
+    martech: {
+      url: `${pluginBasePath}/martech.js`,
+      condition: ({
+        urlParameters
+      }) => urlParameters.size > 0
+    },
+    onetrust: {
+      url: `${pluginBasePath}/onetrust.js`,
+      condition: () => document.querySelector('#onetrust-consent-sdk') || hasCookieKey('OptanonAlertBoxClosed'),
+      isBlockDependent: true
     }
-    let consentMO;
-    const trackShowConsent = () => {
-      const otsdk = document.querySelector('body > div#onetrust-consent-sdk');
-      if (otsdk) {
-        if (otsdk.checkVisibility && !otsdk.checkVisibility()) {
-          sampleRUM('consent', { source: 'onetrust', target: 'suppressed' });
-        } else {
-          sampleRUM('consent', { source: 'onetrust', target: 'show' });
-        }
-        if (consentMO) {
-          consentMO.disconnect();
-        }
-        return true;
-      }
-      return false;
-    };
-    if (!trackShowConsent()) {
-      consentMO = window.MutationObserver
-        ? new MutationObserver(trackShowConsent)
-        :  null;
-      if (consentMO) {
-        consentMO.observe(
-          document.body,
-          { attributes: false, childList: true, subtree: false },
-        );
+  };
+  const PLUGIN_PARAMETERS = {
+    context: document.body,
+    fflags,
+    sampleRUM,
+    sourceSelector,
+    targetSelector
+  };
+  const pluginCache = new Map();
+  function loadPlugin(key, params) {
+    const plugin = PLUGINS[key];
+    const usp = new URLSearchParams(window.location.search);
+    if (!pluginCache.has(key) && plugin.condition && !plugin.condition({
+      urlParameters: usp
+    })) {
+      return null;
+    }
+    if (!pluginCache.has(key)) {
+      try {
+        pluginCache.set(key, import(`${plugin.url || plugin}`));
+      } catch (e) {
+        return null;
       }
     }
+    const pluginLoadPromise = pluginCache.get(key);
+    return pluginLoadPromise.then(p => p.default && p.default(params) || typeof p === 'function' && p(params));
   }
-  function addUTMParametersTracking(sampleRUM) {
-    const usp = new URLSearchParams(window.location.search);
-    [...usp.entries()]
-      .filter(([key]) => key.startsWith('utm_'))
-      .filter(([key]) => key !== 'utm_id')
-      .filter(([key]) => key !== 'utm_term')
-      .forEach(([source, target]) => sampleRUM('utm', { source, target }));
-  }
-  function addAdsParametersTracking(sampleRUM) {
-    const networks = {
-      google: /gclid|gclsrc|wbraid|gbraid/,
-      doubleclick: /dclid/,
-      microsoft: /msclkid/,
-      facebook: /fb(cl|ad_|pxl_)id/,
-      twitter: /tw(clid|src|term)/,
-      linkedin: /li_fat_id/,
-      pinterest: /epik/,
-      tiktok: /ttclid/,
-    };
-    const params = Array.from(new URLSearchParams(window.location.search).keys());
-    Object.entries(networks).forEach(([network, regex]) => {
-      params.filter((param) => regex.test(param)).forEach((param) => sampleRUM('paid', { source: network, target: param }));
-    });
-  }
-  function addEmailParameterTracking(sampleRUM) {
-    const networks = {
-      mailchimp: /mc_(c|e)id/,
-      marketo: /mkt_tok/,
-    };
-    const params = Array.from(new URLSearchParams(window.location.search).keys());
-    Object.entries(networks).forEach(([network, regex]) => {
-      params.filter((param) => regex.test(param)).forEach((param) => sampleRUM('email', { source: network, target: param }));
-    });
+  function loadPlugins(filter = () => true, params = PLUGIN_PARAMETERS) {
+    Object.entries(PLUGINS).filter(([, plugin]) => filter(plugin)).map(([key]) => loadPlugin(key, params));
   }
-
-  const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum
-     : {};
-  const blocksMO = window.MutationObserver ? new MutationObserver(blocksMCB)
-     : {};
-  const mediaMO = window.MutationObserver ? new MutationObserver(mediaMCB)
-     : {};
   function trackCheckpoint(checkpoint, data, t) {
-    const { weight, id } = window.hlx.rum;
+    const {
+      weight,
+      id
+    } = window.hlx.rum;
     if (isSelected) {
       const sendPing = (pdata = data) => {
-        const body = JSON.stringify({ weight, id, referer: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'](), checkpoint, t, ...data }, KNOWN_PROPERTIES);
+        const body = JSON.stringify({
+          weight,
+          id,
+          referer: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'](),
+          checkpoint,
+          t,
+          ...data
+        }, KNOWN_PROPERTIES);
         const urlParams = window.RUM_PARAMS ? `?${new URLSearchParams(window.RUM_PARAMS).toString()}` : '';
-        const { href: url, origin } = new URL(`.rum/${weight}${urlParams}`, sampleRUM.collectBaseURL);
+        const {
+          href: url,
+          origin
+        } = new URL(`.rum/${weight}${urlParams}`, sampleRUM.collectBaseURL);
         if (window.location.origin === origin) {
-          const headers = { type: 'application/json' };
+          const headers = {
+            type: 'application/json'
+          };
           navigator.sendBeacon(url, new Blob([body], headers));
         } else {
           navigator.sendBeacon(url, body);
@@ -226,52 +224,18 @@
       trackCheckpoint(...ck);
     }
   }
-  function addCWVTracking() {
-    setTimeout(() => {
-      try {
-        const cwvScript = new URL('.rum/web-vitals/dist/web-vitals.iife.js', sampleRUM.baseURL).href;
-        if (document.querySelector(`script[src="${cwvScript}"]`)) {
-          return;
-        }
-        const script = document.createElement('script');
-        script.src = cwvScript;
-        script.onload = () => {
-          const storeCWV = (measurement) => {
-            const data = { cwv: {} };
-            data.cwv[measurement.name] = measurement.value;
-            if (measurement.name === 'LCP' && measurement.entries.length > 0) {
-              const { element } = measurement.entries.pop();
-              data.target = targetSelector(element);
-              data.source = sourceSelector(element) || (element && element.outerHTML.slice(0, 30));
-            }
-            sampleRUM('cwv', data);
-          };
-          const isEager = (metric) => ['CLS', 'LCP'].includes(metric);
-          ['INP', 'TTFB', 'CLS', 'LCP'].forEach((metric) => {
-            const metricFn = window.webVitals[`on${metric}`];
-            if (typeof metricFn === 'function') {
-              let opts = {};
-              fflags.enabled('eagercwv', () => {
-                opts = { reportAllChanges: isEager(metric) };
-              });
-              metricFn(storeCWV, opts);
-            }
-          });
-        };
-        document.head.appendChild(script);
-      } catch (error) {
-      }
-    }, 2000);
-  }
   function addNavigationTracking() {
     const navigate = (source, type, redirectCount) => {
-      const payload = { source, target: document.visibilityState };
+      const payload = {
+        source,
+        target: document.visibilityState
+      };
       if (document.prerendering) {
         document.addEventListener('prerenderingchange', () => {
           payload.target = 'prerendered';
           sampleRUM('navigate', payload);
         }, {
-          once: true,
+          once: true
         });
         if (type === 'navigate') {
           sampleRUM('prerender', payload);
@@ -288,79 +252,81 @@
       fflags.enabled('redirect', () => {
         const from = new URLSearchParams(window.location.search).get('redirect_from');
         if (redirectCount || from) {
-          sampleRUM('redirect', { source: from, target: redirectCount || 1 });
+          sampleRUM('redirect', {
+            source: from,
+            target: redirectCount || 1
+          });
         }
       });
     };
     const processed = new Set();
-    new PerformanceObserver((list) => list
-      .getEntries()
-      .filter(({ type }) => !processed.has(type))
-      .map((e) => [e, processed.add(e.type)])
-      .map(([e]) => navigate(
-        window.hlx.referrer || document.referrer,
-        e.type,
-        e.redirectCount,
-      ))).observe({ type: 'navigation', buffered: true });
+    new PerformanceObserver(list => list.getEntries().filter(({
+      type
+    }) => !processed.has(type)).map(e => [e, processed.add(e.type)]).map(([e]) => navigate(window.hlx.referrer || document.referrer, e.type, e.redirectCount))).observe({
+      type: 'navigation',
+      buffered: true
+    });
   }
   function addLoadResourceTracking() {
-    const observer = new PerformanceObserver((list) => {
+    const observer = new PerformanceObserver(list => {
       try {
-        list.getEntries()
-          .filter((e) => !e.responseStatus || e.responseStatus < 400)
-          .filter((e) => window.location.hostname === new URL(e.name).hostname || fflags.has('allresources'))
-          .filter((e) => new URL(e.name).pathname.match('.*(\\.plain\\.html$|\\.json|graphql|api)'))
-          .forEach((e) => {
-            sampleRUM('loadresource', { source: e.name, target: Math.round(e.duration) });
+        list.getEntries().filter(e => !e.responseStatus || e.responseStatus < 400).filter(e => window.location.hostname === new URL(e.name).hostname || fflags.has('allresources')).filter(e => new URL(e.name).pathname.match('.*(\\.plain\\.html$|\\.json|graphql|api)')).forEach(e => {
+          sampleRUM('loadresource', {
+            source: e.name,
+            target: Math.round(e.duration)
           });
-        list.getEntries()
-          .filter((e) => e.responseStatus >= 400)
-          .forEach((e) => {
-            sampleRUM('missingresource', { source: e.name, target: e.responseStatus });
+        });
+        list.getEntries().filter(e => e.responseStatus >= 400).forEach(e => {
+          sampleRUM('missingresource', {
+            source: e.name,
+            target: e.responseStatus
           });
-      } catch (error) {
-      }
+        });
+      } catch (error) {}
+    });
+    observer.observe({
+      type: 'resource',
+      buffered: true
     });
-    observer.observe({ type: 'resource', buffered: true });
   }
   function activateBlocksMO() {
     if (!blocksMO || blocksMO.active) {
       return;
     }
     blocksMO.active = true;
-    blocksMO.observe(
-      document.body,
-      { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
-    );
+    blocksMO.observe(document.body, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['data-block-status']
+    });
   }
   function activateMediaMO() {
     if (!mediaMO || mediaMO.active) {
       return;
     }
     mediaMO.active = true;
-    mediaMO.observe(
-      document.body,
-      { subtree: true, attributes: false, childList: true },
-    );
+    mediaMO.observe(document.body, {
+      subtree: true,
+      attributes: false,
+      childList: true
+    });
   }
   function getIntersectionObsever(checkpoint) {
     if (!window.IntersectionObserver) {
       return null;
     }
-    activateBlocksMO();
-    activateMediaMO();
-    const observer = new IntersectionObserver((entries) => {
+    const observer = new IntersectionObserver(entries => {
       try {
-        entries
-          .filter((e) => e.isIntersecting)
-          .forEach((e) => {
-            observer.unobserve(e.target);
-            const target = targetSelector(e.target);
-            const source = sourceSelector(e.target);
-            sampleRUM(checkpoint, { target, source });
+        entries.filter(e => e.isIntersecting).forEach(e => {
+          observer.unobserve(e.target);
+          const target = targetSelector(e.target);
+          const source = sourceSelector(e.target);
+          sampleRUM(checkpoint, {
+            target,
+            source
           });
-      } catch (error) {
-      }
+        });
+      } catch (error) {}
     });
     return observer;
   }
@@ -368,14 +334,14 @@
     const blockobserver = getIntersectionObsever('viewblock');
     if (blockobserver) {
       const blocks = element.getAttribute('data-block-status') ? [element] : element.querySelectorAll('div[data-block-status="loaded"]');
-      blocks.forEach((b) => blockobserver.observe(b));
+      blocks.forEach(b => blockobserver.observe(b));
     }
   }
   const observedMedia = new Set();
   function addViewMediaTracking(parent) {
     const mediaobserver = getIntersectionObsever('viewmedia');
     if (mediaobserver) {
-      parent.querySelectorAll('img, video, audio, iframe').forEach((m) => {
+      parent.querySelectorAll('img, video, audio, iframe').forEach(m => {
         if (!observedMedia.has(m)) {
           observedMedia.add(m);
           mediaobserver.observe(m);
@@ -383,71 +349,52 @@
       });
     }
   }
-  function addFormTracking(parent) {
-    activateBlocksMO();
-    activateMediaMO();
-    parent.querySelectorAll('form').forEach((form) => {
-      form.addEventListener('submit', (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) }), { once: true });
-      let lastSource;
-      form.addEventListener('change', (e) => {
-        const source = sourceSelector(e.target);
-        if (source !== lastSource) {
-          sampleRUM('fill', { source });
-          lastSource = source;
-        }
-      });
-      form.addEventListener('focusin', (e) => {
-        if (['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'].includes(e.target.tagName)
-          || e.target.getAttribute('contenteditable') === 'true') {
-          sampleRUM('click', { source: sourceSelector(e.target) });
-        }
-      });
-    });
-  }
   function addObserver(ck, fn, block) {
     return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
   }
   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', addFormTracking, m.target);
-        addObserver('viewblock', addViewBlockTracking, m.target);
-      });
+    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,
+        context: el
+      }), m.target);
+      addObserver('viewblock', addViewBlockTracking, m.target);
+    });
   }
   function mediaMCB(mutations) {
-    mutations
-      .forEach((m) => {
-        addObserver('viewmedia', addViewMediaTracking, m.target);
-      });
+    mutations.forEach(m => {
+      addObserver('viewmedia', addViewMediaTracking, m.target);
+    });
   }
   function addTrackingFromConfig() {
+    activateBlocksMO();
+    activateMediaMO();
     let lastSource;
     let lastTarget;
-    document.addEventListener('click', (event) => {
+    document.addEventListener('click', event => {
       const source = sourceSelector(event.target);
       const target = targetSelector(event.target);
       if (source !== lastSource || target !== lastTarget) {
-        sampleRUM('click', { target, source });
+        sampleRUM('click', {
+          target,
+          source
+        });
         lastSource = source;
         lastTarget = target;
       }
     });
-    addCWVTracking();
-    addFormTracking(window.document.body);
     addNavigationTracking();
     addLoadResourceTracking();
-    addUTMParametersTracking(sampleRUM);
-    addViewBlockTracking(window.document.body);
-    addViewMediaTracking(window.document.body);
-    addCookieConsentTracking(sampleRUM);
-    addAdsParametersTracking(sampleRUM);
-    addEmailParameterTracking(sampleRUM);
+    addViewBlockTracking(document.body);
+    addViewMediaTracking(document.body);
+    loadPlugins();
     fflags.enabled('language', () => {
       const target = navigator.language;
       const source = document.documentElement.lang;
-      sampleRUM('language', { source, target });
+      sampleRUM('language', {
+        source,
+        target
+      });
     });
   }
   function initEnhancer() {
@@ -457,8 +404,7 @@
         window.hlx.rum.collector = trackCheckpoint;
         processQueue();
       }
-    } catch (error) {
-    }
+    } catch (error) {}
   }
   initEnhancer();
 

package/src/index.md5

@@ -1 +1 @@
-5424a86261f2304969b6951549ac3941
+4496e739d9016b3ea998093c5552cd22