@adobe/helix-rum-enhancer 2.25.0 → 2.26.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.26.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.25.0...v2.26.0) (2024-10-16)
+
+
+### Features
+
+* handle pre-speculation rules and rendering ([#301](https://github.com/adobe/helix-rum-enhancer/issues/301)) ([196d404](https://github.com/adobe/helix-rum-enhancer/commit/196d404f3f90a247a223e8ddc7c667592a87319f))
+
 # [2.25.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.24.0...v2.25.0) (2024-10-03)
 
 

package/modules/dom.js

@@ -9,99 +9,99 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-export const getTargetValue = (element) => element.getAttribute('data-rum-target') || element.getAttribute('href')
-    || element.currentSrc || element.getAttribute('src') || element.dataset.action || element.action;
+export const getTargetValue = (el) => el.getAttribute('data-rum-target') || el.getAttribute('href')
+    || el.currentSrc || el.getAttribute('src') || el.dataset.action || el.action;
 
-export const targetSelector = (element) => {
+export const targetSelector = (el) => {
   try {
-    if (!element) return undefined;
-    let value = getTargetValue(element);
-    if (!value && element.tagName !== 'A' && element.closest('a')) {
-      value = getTargetValue(element.closest('a'));
+    if (!el) return undefined;
+    let v = getTargetValue(el);
+    if (!v && el.tagName !== 'A' && el.closest('a')) {
+      v = getTargetValue(el.closest('a'));
     }
-    if (value && !value.startsWith('https://')) {
+    if (v && !v.startsWith('https://')) {
     // resolve relative links
-      value = new URL(value, window.location).href;
+      v = new URL(v, window.location).href;
     }
-    return value;
+    return v;
     /* c8 ignore next 3 */
   } catch (error) {
     return null;
   }
 };
 
-function walk(element, checkFn) {
-  if (!element || element === document.body || element === document.documentElement) {
+function walk(el, checkFn) {
+  if (!el || el === document.body || el === document.documentElement) {
     return undefined;
   }
-  const checkValue = checkFn(element);
-  return checkValue || walk(element.parentElement, checkFn);
+  return checkFn(el) || walk(el.parentElement, checkFn);
 }
 
-function isDialog(element) {
+function isDialog(el) {
   // doing it well
-  if (element.tagName === 'DIALOG') return true;
+  if (el.tagName === 'DIALOG') return true;
   // making the best of it
-  if (element.getAttribute('role') === 'dialog') return true;
-  if (element.getAttribute('role') === 'alertdialog') return true;
-  if (element.getAttribute('aria-modal') === 'true') return true;
+  if (el.getAttribute('role') === 'dialog') return true;
+  if (el.getAttribute('role') === 'alertdialog') return true;
+  if (el.getAttribute('aria-modal') === 'true') return true;
   // doing it wrong
-  const computedStyle = window.getComputedStyle(element);
-  return (computedStyle && computedStyle.position === 'fixed' && computedStyle.zIndex > 100);
+  const cs = window.getComputedStyle(el);
+  return (cs && cs.position === 'fixed' && cs.zIndex > 100);
 }
 
-function isButton(element) {
-  if (element.tagName === 'BUTTON') return true;
-  if (element.tagName === 'INPUT' && element.getAttribute('type') === 'button') return true;
-  if (element.tagName === 'A') {
-    const classes = Array.from(element.classList);
+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 element.getAttribute('role') === 'button';
+  return el.getAttribute('role') === 'button';
 }
 
-function getSourceContext(element) {
-  if (element.closest('form')) {
-    return `form${element.id ? `#${element.id}` : ''}`;
+function getSourceContext(el) {
+  if (el.closest('form')) {
+    return `form${el.id ? `#${el.id}` : ''}`;
   }
-  const block = element.closest('.block[data-block-name]');
+  const block = el.closest('.block[data-block-name]');
   if (block) return `.${block.getAttribute('data-block-name')}`;
-  if (walk(element, isDialog)) return 'dialog';
-  if (element.closest('nav')) return 'nav';
-  if (element.closest('header')) return 'header';
-  if (element.closest('footer')) return 'footer';
-  if (element.closest('aside')) return 'aside';
-  return (walk(element, (e) => e.id && `#${e.id}`));
+  if (walk(el, isDialog)) return 'dialog';
+  if (el.closest('nav')) return 'nav';
+  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}`));
 }
 
-function getSourceElement(element) {
-  if (element.closest('form') && Array.from(element.closest('form').elements).includes(element)) {
-    return (element.tagName.toLowerCase()
-        + (['INPUT', 'BUTTON'].includes(element.tagName)
-          ? `[type='${element.getAttribute('type') || ''}']`
+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') || ''}']`
           : ''));
   }
-  if (walk(element, isButton)) return 'button';
-  return element.tagName.toLowerCase().match(/^(a|img|video)$/) && element.tagName.toLowerCase();
+  if (walk(el, isButton)) return 'button';
+  return el.tagName.toLowerCase().match(/^(a|img|video)$/) && el.tagName.toLowerCase();
 }
 
-function getSourceIdentifier(element) {
-  if (element.id) return `#${element.id}`;
-  if (element.getAttribute('data-block-name')) return `.${element.getAttribute('data-block-name')}`;
-  return (element.classList.length > 0 && `.${element.classList[0]}`);
+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]}`);
 }
-export const sourceSelector = (element) => {
+export const sourceSelector = (el) => {
   try {
-    if (!element || element === document.body || element === document.documentElement) {
+    if (!el || el === document.body || el === document.documentElement) {
       return undefined;
     }
-    if (element.getAttribute('data-rum-source')) {
-      return element.getAttribute('data-rum-source');
+    if (el.getAttribute('data-rum-source')) {
+      return el.getAttribute('data-rum-source');
     }
-    const context = getSourceContext(element.parentElement) || '';
-    const elementName = getSourceElement(element) || '';
-    const identifier = getSourceIdentifier(element) || '';
-    return `${context} ${elementName}${identifier}`.trim() || `"${element.textContent.substring(0, 10)}"`;
+    const ctx = getSourceContext(el.parentElement) || '';
+    const name = getSourceElement(el) || '';
+    const id = getSourceIdentifier(el) || '';
+    return `${ctx} ${name}${id}`.trim() || `"${el.textContent.substring(0, 10)}"`;
     /* c8 ignore next 3 */
   } catch (error) {
     return null;

package/modules/index.js

@@ -25,14 +25,14 @@ import { fflags } from './fflags.js';
 const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum
   /* c8 ignore next */ : {};
 
-const formSubmitListener = (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) });
-
+// blocks mutation observer
 // eslint-disable-next-line no-use-before-define, max-len
-const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+const blocksMO = window.MutationObserver ? new MutationObserver(blocksMCB)
   /* c8 ignore next */ : {};
 
+// media mutation observer
 // eslint-disable-next-line no-use-before-define, max-len
-const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+const mediaMO = window.MutationObserver ? new MutationObserver(mediaMCB)
   /* c8 ignore next */ : {};
 
 function trackCheckpoint(checkpoint, data, t) {
@@ -112,9 +112,23 @@ function addCWVTracking() {
 function addNavigationTracking() {
   // enter checkpoint when referrer is not the current page url
   const navigate = (source, type, redirectCount) => {
+    // target can be 'visible', 'hidden' (background tab) or 'prerendered' (speculation rules)
     const payload = { source, target: document.visibilityState };
-    // reload: same page, navigate: same origin, enter: everything else
-    if (type === 'reload' || source === window.location.href) {
+    /* c8 ignore next 13 */
+    // prerendering cannot be tested yet with headless browsers
+    if (document.prerendering) {
+      // listen for "activation" of the current pre-rendered page
+      document.addEventListener('prerenderingchange', () => {
+        // pre-rendered page is now "activated"
+        payload.target = 'prerendered';
+        sampleRUM('navigate', payload); // prerendered navigation
+      }, {
+        once: true,
+      });
+      if (type === 'navigate') {
+        sampleRUM('prerender', payload); // prerendering page
+      }
+    } else if (type === 'reload' || source === window.location.href) {
       sampleRUM('reload', payload);
     } else if (type && type !== 'navigate') {
       sampleRUM(type, payload); // back, forward, prerender, etc.
@@ -132,10 +146,10 @@ function addNavigationTracking() {
   };
 
   new PerformanceObserver((list) => list
-    .getEntries().map((entry) => navigate(
+    .getEntries().map((e) => navigate(
       window.hlx.referrer || document.referrer,
-      entry.type,
-      entry.redirectCount,
+      e.type,
+      e.redirectCount,
     )))
     .observe({ type: 'navigation', buffered: true });
 }
@@ -144,16 +158,16 @@ function addLoadResourceTracking() {
   const observer = new PerformanceObserver((list) => {
     try {
       list.getEntries()
-        .filter((entry) => !entry.responseStatus || entry.responseStatus < 400)
-        .filter((entry) => window.location.hostname === new URL(entry.name).hostname)
-        .filter((entry) => new URL(entry.name).pathname.match('.*(\\.plain\\.html$|\\.json|graphql|api)'))
-        .forEach((entry) => {
-          sampleRUM('loadresource', { source: entry.name, target: Math.round(entry.duration) });
+        .filter((e) => !e.responseStatus || e.responseStatus < 400)
+        .filter((e) => window.location.hostname === new URL(e.name).hostname)
+        .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((entry) => entry.responseStatus === 404)
-        .forEach((entry) => {
-          sampleRUM('missingresource', { source: entry.name, target: entry.hostname });
+        .filter((e) => e.responseStatus === 404)
+        .forEach((e) => {
+          sampleRUM('missingresource', { source: e.name, target: e.hostname });
         });
       /* c8 ignore next 3 */
     } catch (error) {
@@ -163,24 +177,26 @@ function addLoadResourceTracking() {
   observer.observe({ type: 'resource', buffered: true });
 }
 
-function activateBlocksMutationObserver() {
-  if (!blocksMutationObserver || blocksMutationObserver.active) {
+// activate blocks mutation observer
+function activateBlocksMO() {
+  if (!blocksMO || blocksMO.active) {
     return;
   }
-  blocksMutationObserver.active = true;
-  blocksMutationObserver.observe(
+  blocksMO.active = true;
+  blocksMO.observe(
     document.body,
     // eslint-disable-next-line object-curly-newline
     { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
   );
 }
 
-function activateMediaMutationObserver() {
-  if (!mediaMutationObserver || mediaMutationObserver.active) {
+// activate media mutation observer
+function activateMediaMO() {
+  if (!mediaMO || mediaMO.active) {
     return;
   }
-  mediaMutationObserver.active = true;
-  mediaMutationObserver.observe(
+  mediaMO.active = true;
+  mediaMO.observe(
     document.body,
     // eslint-disable-next-line object-curly-newline
     { subtree: true, attributes: false, childList: true },
@@ -192,16 +208,16 @@ function getIntersectionObsever(checkpoint) {
   if (!window.IntersectionObserver) {
     return null;
   }
-  activateBlocksMutationObserver();
-  activateMediaMutationObserver();
+  activateBlocksMO();
+  activateMediaMO();
   const observer = new IntersectionObserver((entries) => {
     try {
       entries
-        .filter((entry) => entry.isIntersecting)
-        .forEach((entry) => {
-          observer.unobserve(entry.target); // observe only once
-          const target = targetSelector(entry.target);
-          const source = sourceSelector(entry.target);
+        .filter((e) => e.isIntersecting)
+        .forEach((e) => {
+          observer.unobserve(e.target); // observe only once
+          const target = targetSelector(e.target);
+          const source = sourceSelector(e.target);
           sampleRUM(checkpoint, { target, source });
         });
       /* c8 ignore next 3 */
@@ -233,11 +249,10 @@ function addViewMediaTracking(parent) {
 }
 
 function addFormTracking(parent) {
-  activateBlocksMutationObserver();
-  activateMediaMutationObserver();
+  activateBlocksMO();
+  activateMediaMO();
   parent.querySelectorAll('form').forEach((form) => {
-    form.removeEventListener('submit', formSubmitListener); // listen only once
-    form.addEventListener('submit', formSubmitListener);
+    form.addEventListener('submit', (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) }), { once: true });
   });
 }
 
@@ -245,7 +260,8 @@ function addObserver(ck, fn, block) {
   return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
 }
 
-function blocksMutationsCallback(mutations) {
+// blocks mutation observer callback
+function blocksMCB(mutations) {
   // block specific mutations
   mutations
     .filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
@@ -256,7 +272,8 @@ function blocksMutationsCallback(mutations) {
     });
 }
 
-function mediaMutationsCallback(mutations) {
+// media mutation observer callback
+function mediaMCB(mutations) {
   // media mutations
   mutations
     .forEach((m) => {

package/modules/martech.js

@@ -19,7 +19,7 @@ export function addCookieConsentTracking(sampleRUM) {
     return;
   }
 
-  let consentMutationObserver;
+  let consentMO; // consent mutation observer
   const trackShowConsent = () => {
     const otsdk = document.querySelector('body > div#onetrust-consent-sdk');
     if (otsdk) {
@@ -28,8 +28,8 @@ export function addCookieConsentTracking(sampleRUM) {
       } else {
         sampleRUM('consent', { source: 'onetrust', target: 'show' });
       }
-      if (consentMutationObserver) {
-        consentMutationObserver.disconnect();
+      if (consentMO) {
+        consentMO.disconnect();
       }
       return true;
     }
@@ -38,11 +38,11 @@ export function addCookieConsentTracking(sampleRUM) {
 
   if (!trackShowConsent()) {
     // eslint-disable-next-line max-len
-    consentMutationObserver = window.MutationObserver
+    consentMO = window.MutationObserver
       ? new MutationObserver(trackShowConsent)
       : /* c8 ignore next */ null;
-    if (consentMutationObserver) {
-      consentMutationObserver.observe(
+    if (consentMO) {
+      consentMO.observe(
         document.body,
         // eslint-disable-next-line object-curly-newline
         { attributes: false, childList: true, subtree: false },

package/modules/utils.js

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+const { href } = window.location;
+
 export const urlSanitizers = {
   /**
    * Returns the full url.
@@ -17,21 +19,21 @@ export const urlSanitizers = {
    * @param {string} url (default: window.location.href) The url to sanitize
    * @returns {string} The sanitized url
    */
-  full: (url = window.location.href) => new URL(url).toString(),
+  full: (url = href) => new URL(url).toString(),
   /**
    * Returns the origin of the provided url.
    * If no url is provided, it defaults to window.location.href.
    * @param {string} url (default: window.location.href) The url to sanitize
    * @returns {string} The sanitized url
    */
-  origin: (url = window.location.href) => new URL(url).origin,
+  origin: (url = href) => new URL(url).origin,
   /**
    * Returns the sanitized url: the origin and the path (no query params or hash)
    * If no url is provided, it defaults to window.location.href.
    * @param {string} url (default: window.location.href) The url to sanitize
    * @returns {string} The sanitized url
    */
-  path: (url = window.location.href) => {
+  path: (url = href) => {
     const u = new URL(url);
     return `${u.origin}${u.pathname}`;
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -33,7 +33,7 @@
     "reporter-options": "configFile=.mocha-multi.json"
   },
   "devDependencies": {
-    "@adobe/eslint-config-helix": "2.0.7",
+    "@adobe/eslint-config-helix": "2.0.8",
     "@adobe/helix-rum-js": "2.6.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@semantic-release/changelog": "6.0.3",
@@ -47,7 +47,7 @@
     "codecov": "3.8.3",
     "eslint": "8.57.1",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-import": "2.31.0",
     "husky": "9.1.6",
     "jsdoc-to-markdown": "9.0.2",
     "junit-report-builder": "5.1.1",

package/src/index.js

@@ -29,96 +29,97 @@
   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 urlSanitizers = {
-    full: (url = window.location.href) => new URL(url).toString(),
-    origin: (url = window.location.href) => new URL(url).origin,
-    path: (url = window.location.href) => {
+    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 = (element) => element.getAttribute('data-rum-target') || element.getAttribute('href')
-      || element.currentSrc || element.getAttribute('src') || element.dataset.action || element.action;
-  const targetSelector = (element) => {
+  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 (!element) return undefined;
-      let value = getTargetValue(element);
-      if (!value && element.tagName !== 'A' && element.closest('a')) {
-        value = getTargetValue(element.closest('a'));
+      if (!el) return undefined;
+      let v = getTargetValue(el);
+      if (!v && el.tagName !== 'A' && el.closest('a')) {
+        v = getTargetValue(el.closest('a'));
       }
-      if (value && !value.startsWith('https://')) {
-        value = new URL(value, window.location).href;
+      if (v && !v.startsWith('https://')) {
+        v = new URL(v, window.location).href;
       }
-      return value;
+      return v;
     } catch (error) {
       return null;
     }
   };
-  function walk(element, checkFn) {
-    if (!element || element === document.body || element === document.documentElement) {
+  function walk(el, checkFn) {
+    if (!el || el === document.body || el === document.documentElement) {
       return undefined;
     }
-    const checkValue = checkFn(element);
-    return checkValue || walk(element.parentElement, checkFn);
+    return checkFn(el) || walk(el.parentElement, checkFn);
   }
-  function isDialog(element) {
-    if (element.tagName === 'DIALOG') return true;
-    if (element.getAttribute('role') === 'dialog') return true;
-    if (element.getAttribute('role') === 'alertdialog') return true;
-    if (element.getAttribute('aria-modal') === 'true') return true;
-    const computedStyle = window.getComputedStyle(element);
-    return (computedStyle && computedStyle.position === 'fixed' && computedStyle.zIndex > 100);
+  function isDialog(el) {
+    if (el.tagName === 'DIALOG') return true;
+    if (el.getAttribute('role') === 'dialog') return true;
+    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);
   }
-  function isButton(element) {
-    if (element.tagName === 'BUTTON') return true;
-    if (element.tagName === 'INPUT' && element.getAttribute('type') === 'button') return true;
-    if (element.tagName === 'A') {
-      const classes = Array.from(element.classList);
+  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 element.getAttribute('role') === 'button';
+    return el.getAttribute('role') === 'button';
   }
-  function getSourceContext(element) {
-    if (element.closest('form')) {
-      return `form${element.id ? `#${element.id}` : ''}`;
+  function getSourceContext(el) {
+    if (el.closest('form')) {
+      return `form${el.id ? `#${el.id}` : ''}`;
     }
-    const block = element.closest('.block[data-block-name]');
+    const block = el.closest('.block[data-block-name]');
     if (block) return `.${block.getAttribute('data-block-name')}`;
-    if (walk(element, isDialog)) return 'dialog';
-    if (element.closest('nav')) return 'nav';
-    if (element.closest('header')) return 'header';
-    if (element.closest('footer')) return 'footer';
-    if (element.closest('aside')) return 'aside';
-    return (walk(element, (e) => e.id && `#${e.id}`));
+    if (walk(el, isDialog)) return 'dialog';
+    if (el.closest('nav')) return 'nav';
+    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}`));
   }
-  function getSourceElement(element) {
-    if (element.closest('form') && Array.from(element.closest('form').elements).includes(element)) {
-      return (element.tagName.toLowerCase()
-          + (['INPUT', 'BUTTON'].includes(element.tagName)
-            ? `[type='${element.getAttribute('type') || ''}']`
+  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') || ''}']`
             : ''));
     }
-    if (walk(element, isButton)) return 'button';
-    return element.tagName.toLowerCase().match(/^(a|img|video)$/) && element.tagName.toLowerCase();
+    if (walk(el, isButton)) return 'button';
+    return el.tagName.toLowerCase().match(/^(a|img|video)$/) && el.tagName.toLowerCase();
   }
-  function getSourceIdentifier(element) {
-    if (element.id) return `#${element.id}`;
-    if (element.getAttribute('data-block-name')) return `.${element.getAttribute('data-block-name')}`;
-    return (element.classList.length > 0 && `.${element.classList[0]}`);
+  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]}`);
   }
-  const sourceSelector = (element) => {
+  const sourceSelector = (el) => {
     try {
-      if (!element || element === document.body || element === document.documentElement) {
+      if (!el || el === document.body || el === document.documentElement) {
         return undefined;
       }
-      if (element.getAttribute('data-rum-source')) {
-        return element.getAttribute('data-rum-source');
+      if (el.getAttribute('data-rum-source')) {
+        return el.getAttribute('data-rum-source');
       }
-      const context = getSourceContext(element.parentElement) || '';
-      const elementName = getSourceElement(element) || '';
-      const identifier = getSourceIdentifier(element) || '';
-      return `${context} ${elementName}${identifier}`.trim() || `"${element.textContent.substring(0, 10)}"`;
+      const ctx = getSourceContext(el.parentElement) || '';
+      const name = getSourceElement(el) || '';
+      const id = getSourceIdentifier(el) || '';
+      return `${ctx} ${name}${id}`.trim() || `"${el.textContent.substring(0, 10)}"`;
     } catch (error) {
       return null;
     }
@@ -132,7 +133,7 @@
       sampleRUM('consent', { source: 'onetrust', target: 'hidden' });
       return;
     }
-    let consentMutationObserver;
+    let consentMO;
     const trackShowConsent = () => {
       const otsdk = document.querySelector('body > div#onetrust-consent-sdk');
       if (otsdk) {
@@ -141,19 +142,19 @@
         } else {
           sampleRUM('consent', { source: 'onetrust', target: 'show' });
         }
-        if (consentMutationObserver) {
-          consentMutationObserver.disconnect();
+        if (consentMO) {
+          consentMO.disconnect();
         }
         return true;
       }
       return false;
     };
     if (!trackShowConsent()) {
-      consentMutationObserver = window.MutationObserver
+      consentMO = window.MutationObserver
         ? new MutationObserver(trackShowConsent)
         :  null;
-      if (consentMutationObserver) {
-        consentMutationObserver.observe(
+      if (consentMO) {
+        consentMO.observe(
           document.body,
           { attributes: false, childList: true, subtree: false },
         );
@@ -197,10 +198,9 @@
 
   const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum
      : {};
-  const formSubmitListener = (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) });
-  const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+  const blocksMO = window.MutationObserver ? new MutationObserver(blocksMCB)
      : {};
-  const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+  const mediaMO = window.MutationObserver ? new MutationObserver(mediaMCB)
      : {};
   function trackCheckpoint(checkpoint, data, t) {
     const { weight, id } = window.hlx.rum;
@@ -266,7 +266,17 @@
   function addNavigationTracking() {
     const navigate = (source, type, redirectCount) => {
       const payload = { source, target: document.visibilityState };
-      if (type === 'reload' || source === window.location.href) {
+      if (document.prerendering) {
+        document.addEventListener('prerenderingchange', () => {
+          payload.target = 'prerendered';
+          sampleRUM('navigate', payload);
+        }, {
+          once: true,
+        });
+        if (type === 'navigate') {
+          sampleRUM('prerender', payload);
+        }
+      } else if (type === 'reload' || source === window.location.href) {
         sampleRUM('reload', payload);
       } else if (type && type !== 'navigate') {
         sampleRUM(type, payload);
@@ -283,10 +293,10 @@
       });
     };
     new PerformanceObserver((list) => list
-      .getEntries().map((entry) => navigate(
+      .getEntries().map((e) => navigate(
         window.hlx.referrer || document.referrer,
-        entry.type,
-        entry.redirectCount,
+        e.type,
+        e.redirectCount,
       )))
       .observe({ type: 'navigation', buffered: true });
   }
@@ -294,38 +304,38 @@
     const observer = new PerformanceObserver((list) => {
       try {
         list.getEntries()
-          .filter((entry) => !entry.responseStatus || entry.responseStatus < 400)
-          .filter((entry) => window.location.hostname === new URL(entry.name).hostname)
-          .filter((entry) => new URL(entry.name).pathname.match('.*(\\.plain\\.html$|\\.json|graphql|api)'))
-          .forEach((entry) => {
-            sampleRUM('loadresource', { source: entry.name, target: Math.round(entry.duration) });
+          .filter((e) => !e.responseStatus || e.responseStatus < 400)
+          .filter((e) => window.location.hostname === new URL(e.name).hostname)
+          .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((entry) => entry.responseStatus === 404)
-          .forEach((entry) => {
-            sampleRUM('missingresource', { source: entry.name, target: entry.hostname });
+          .filter((e) => e.responseStatus === 404)
+          .forEach((e) => {
+            sampleRUM('missingresource', { source: e.name, target: e.hostname });
           });
       } catch (error) {
       }
     });
     observer.observe({ type: 'resource', buffered: true });
   }
-  function activateBlocksMutationObserver() {
-    if (!blocksMutationObserver || blocksMutationObserver.active) {
+  function activateBlocksMO() {
+    if (!blocksMO || blocksMO.active) {
       return;
     }
-    blocksMutationObserver.active = true;
-    blocksMutationObserver.observe(
+    blocksMO.active = true;
+    blocksMO.observe(
       document.body,
       { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
     );
   }
-  function activateMediaMutationObserver() {
-    if (!mediaMutationObserver || mediaMutationObserver.active) {
+  function activateMediaMO() {
+    if (!mediaMO || mediaMO.active) {
       return;
     }
-    mediaMutationObserver.active = true;
-    mediaMutationObserver.observe(
+    mediaMO.active = true;
+    mediaMO.observe(
       document.body,
       { subtree: true, attributes: false, childList: true },
     );
@@ -334,16 +344,16 @@
     if (!window.IntersectionObserver) {
       return null;
     }
-    activateBlocksMutationObserver();
-    activateMediaMutationObserver();
+    activateBlocksMO();
+    activateMediaMO();
     const observer = new IntersectionObserver((entries) => {
       try {
         entries
-          .filter((entry) => entry.isIntersecting)
-          .forEach((entry) => {
-            observer.unobserve(entry.target);
-            const target = targetSelector(entry.target);
-            const source = sourceSelector(entry.target);
+          .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) {
@@ -371,17 +381,16 @@
     }
   }
   function addFormTracking(parent) {
-    activateBlocksMutationObserver();
-    activateMediaMutationObserver();
+    activateBlocksMO();
+    activateMediaMO();
     parent.querySelectorAll('form').forEach((form) => {
-      form.removeEventListener('submit', formSubmitListener);
-      form.addEventListener('submit', formSubmitListener);
+      form.addEventListener('submit', (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) }), { once: true });
     });
   }
   function addObserver(ck, fn, block) {
     return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
   }
-  function blocksMutationsCallback(mutations) {
+  function blocksMCB(mutations) {
     mutations
       .filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
       .filter((m) => m.target.dataset.blockStatus === 'loaded')
@@ -390,7 +399,7 @@
         addObserver('viewblock', addViewBlockTracking, m.target);
       });
   }
-  function mediaMutationsCallback(mutations) {
+  function mediaMCB(mutations) {
     mutations
       .forEach((m) => {
         addObserver('viewmedia', addViewMediaTracking, m.target);

package/src/index.md5

@@ -1 +1 @@
-f87fdcb7d5c1e4526225b185d4f392fb
+8094422990fd7a9219bffb7309cb92a2