@adobe/helix-rum-enhancer 2.19.2 → 2.21.0

package/.husky/pre-commit

@@ -1,2 +1 @@
 npx lint-staged
-npm test

package/.releaserc.cjs

@@ -10,7 +10,18 @@ module.exports = {
       "assets": ["package.json", "CHANGELOG.md"],
       "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
     }],
-    ["@semantic-release/github", {}]
+    ["@semantic-release/github", {
+      "assets": [
+        {
+          "path": "src/index.js",
+          "label": "RUM Enhancer JS"
+        },
+        {
+          "path": "src/index.md5",
+          "label": "RUM Enhancer Hash"
+        }
+      ]
+    }]
   ],
   branches: ['main'],
 };

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [2.21.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.20.0...v2.21.0) (2024-09-18)
+
+
+### Bug Fixes
+
+* **dom:** apply change ([67803e6](https://github.com/adobe/helix-rum-enhancer/commit/67803e60f57ef29b9ea1c51eea26d99c778b5f97))
+* **dom:** better handling of empty type form inputs ([d53deb5](https://github.com/adobe/helix-rum-enhancer/commit/d53deb5c6e94ff18df2a01996c39b5cff7636fe4))
+* **dom:** better handling of fake blocks ([66a9049](https://github.com/adobe/helix-rum-enhancer/commit/66a90497a45d754ed0fa4e8f8bc0917be64b3245))
+
+
+### Features
+
+* **checkpoints:** add support for the `language` checkpoint ([f99755a](https://github.com/adobe/helix-rum-enhancer/commit/f99755a5cc8eef83b655a6beff5e7e371196c90d))
+* **dom:** more fine-grained sourceselector implementation ([ada279d](https://github.com/adobe/helix-rum-enhancer/commit/ada279d423590fb3feeb304b3a57d6da4ee3c9bf))
+
+# [2.20.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.2...v2.20.0) (2024-08-19)
+
+
+### Features
+
+* observe all mutations to capture late added medias ([#261](https://github.com/adobe/helix-rum-enhancer/issues/261)) ([56844b2](https://github.com/adobe/helix-rum-enhancer/commit/56844b2aa61fe5cc837cd5a887f0c8669a335e0f))
+
 ## [2.19.2](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.1...v2.19.2) (2024-08-15)
 
 

package/README.md

@@ -23,6 +23,49 @@ It will add following new checkpoints:
 - `reload`, `navigate`, `enter`: depending on how the current page was accessed
 - `formsubmit`: when a form is submitted
 
+### The `source` parameter and the `sourceSelector`
+
+The `source` parameter is a string that can be used to identify the source of the event. It can be used to identify the source of the event, e.g. a button, a link, a form, etc.
+It represents an idealized CSS selector that is both human-readable and specific enough to identify the source of the event in the document, even when not having access to the
+orginal document. It is idealized because it pretends the DOM would use modern HTML with concise semantics, even if the actual document uses `class` values for things that would
+be better represented by semantic HTML elements.
+
+The `sourceSelector` function is a function that takes a DOM element and returns a descriptive `source` parameter. If the element has a `data-rum-source` attribute, its value is used as the `source` parameter. Otherwise, the function tries to generate a `source` parameter based on the element's tag name, class names, and text content.
+
+The structure of the `source` parameter is as follows:
+
+```
+<context> <element>#<identifier>
+```
+All three parts are optional
+
+`context` is
+- `form` for form elements
+- `dialog` for dialog elements, or parent containers that are fixed positioned and have a positive high z-index
+- `.block-name` for Helix blocks
+- `header`, `footer`, `nav`, `aside`  for main site structure
+- `#id` as a fallback, if a container ID is available
+
+`element` is
+- `button` for buttons, or links that look like buttons (e.g. with a class `button` or `btn` or `cta`)
+- `img` for images
+- `video` for videos
+- `a` for links that are not buttons
+- `input[type="text"]` for input elements (all types are supported)
+- `select`, `textarea`, etc. for other form elements
+
+`identifier` is
+- the `id` attribute of the element, if provided
+- the first `.class` if there are any
+- else omitted
+
+Even if an `identifier` is provided, having a `context` and `element` is recommended, as it makes the `source` parameter more readable and easier to understand.
+
+
+#### Examples
+
+- ``
+
 ## Development
 
 ### Build

package/modules/dom.js

@@ -30,6 +30,59 @@ export const targetSelector = (element) => {
   }
 };
 
+function walk(element, checkFn) {
+  if (!element || element === document.body || element === document.documentElement) {
+    return undefined;
+  }
+  const checkValue = checkFn(element);
+  return checkValue || walk(element.parentElement, checkFn);
+}
+
+function isDialog(element) {
+  // doing it well
+  if (element.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;
+  // doing it wrong
+  const computedStyle = window.getComputedStyle(element);
+  return (computedStyle && computedStyle.position === 'fixed' && computedStyle.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);
+    return classes.some((className) => className.match(/button|cta/));
+  }
+  return element.getAttribute('role') === 'button';
+}
+
+function getSourceContext(element) {
+  if (element.closest('form')) return 'form';
+  const block = element.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}`));
+}
+
+function getSourceElement(element) {
+  if (element.closest('form') && Array.from(element.closest('form').elements).includes(element)) return element.tagName.toLowerCase() + (element.tagName === 'INPUT' ? `[type='${element.getAttribute('type') || ''}']` : '');
+  if (walk(element, isButton)) return 'button';
+  return element.tagName.toLowerCase().match(/^(a|img|video)$/) && element.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]}`);
+}
 export const sourceSelector = (element) => {
   try {
     if (!element || element === document.body || element === document.documentElement) {
@@ -38,41 +91,10 @@ export const sourceSelector = (element) => {
     if (element.getAttribute('data-rum-source')) {
       return element.getAttribute('data-rum-source');
     }
-    const form = element.closest('form');
-    let formElementSelector = '';
-    if (form && Array.from(form.elements).includes(element)) {
-      formElementSelector = element.tagName === 'INPUT' ? `form input[type='${element.getAttribute('type')}']` : `form ${element.tagName.toLowerCase()}`;
-    }
-
-    const blockName = element.closest('.block') ? element.closest('.block').getAttribute('data-block-name') : '';
-    if (element.id || formElementSelector) {
-      const id = element.id ? `#${element.id}` : '';
-      return blockName ? `.${blockName} ${formElementSelector}${id}` : `${formElementSelector}${id}`;
-    }
-
-    if (element.getAttribute('data-block-name')) {
-      return `.${element.getAttribute('data-block-name')}`;
-    }
-
-    const classes = Array.from(element.classList);
-    const label = element.tagName.toLowerCase();
-    const firstClass = classes.length > 0 ? `.${classes[0]}` : '';
-    const labelWithClass = `${element.tagName.toLowerCase()}${firstClass}`;
-    if (element.tagName.toLowerCase() === 'button'
-      || element.type === 'button'
-      || classes.some((className) => className.match(/button|cta/))) {
-      let parent = element.parentElement;
-      if (!parent) return labelWithClass;
-      if (parent.id) return `#${parent.id} ${label}`;
-      while (parent.tagName !== 'BODY' && !parent.id) parent = parent.parentElement;
-      if (parent.id) return `#${parent.id} ${labelWithClass}`;
-      return blockName ? `.${blockName} ${labelWithClass}` : labelWithClass;
-    }
-
-    const parent = sourceSelector(element.parentElement);
-    if (parent) return parent;
-
-    return labelWithClass;
+    const context = getSourceContext(element.parentElement) || '';
+    const elementName = getSourceElement(element) || '';
+    const identifier = getSourceIdentifier(element) || '';
+    return `${context} ${elementName}${identifier}`.trim() || `"${element.textContent.substring(0, 10)}"`;
     /* c8 ignore next 3 */
   } catch (error) {
     return null;

package/modules/fflags.js

@@ -19,4 +19,5 @@ export const fflags = {
   disabled: (flag, callback) => !fflags.has(flag) && callback(),
   eagercwv: [683],
   example: [543, 770, 1136],
+  language: [543, 959, 1139, 620],
 };

package/modules/index.js

@@ -26,9 +26,14 @@ const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window
   /* c8 ignore next */ : {};
 
 const formSubmitListener = (e) => sampleRUM('formsubmit', { target: targetSelector(e.target), source: sourceSelector(e.target) });
-// eslint-disable-next-line no-use-before-define
-const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
-/* c8 ignore next */ : null;
+
+// eslint-disable-next-line no-use-before-define, max-len
+const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+  /* c8 ignore next */ : {};
+
+// eslint-disable-next-line no-use-before-define, max-len
+const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+  /* c8 ignore next */ : {};
 
 function trackCheckpoint(checkpoint, data, t) {
   const { weight, id } = window.hlx.rum;
@@ -52,7 +57,7 @@ function trackCheckpoint(checkpoint, data, t) {
 }
 
 function processQueue() {
-  while (queue.length) {
+  while (queue && queue.length) {
     const ck = queue.shift();
     trackCheckpoint(...ck);
   }
@@ -148,21 +153,36 @@ function addLoadResourceTracking() {
 }
 
 function activateBlocksMutationObserver() {
-  if (!mutationObserver || mutationObserver.active) {
+  if (!blocksMutationObserver || blocksMutationObserver.active) {
     return;
   }
-  mutationObserver.active = true;
-  mutationObserver.observe(
+  blocksMutationObserver.active = true;
+  blocksMutationObserver.observe(
     document.body,
     // eslint-disable-next-line object-curly-newline
     { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
   );
 }
 
+function activateMediaMutationObserver() {
+  if (!mediaMutationObserver || mediaMutationObserver.active) {
+    return;
+  }
+  mediaMutationObserver.active = true;
+  mediaMutationObserver.observe(
+    document.body,
+    // eslint-disable-next-line object-curly-newline
+    { subtree: true, attributes: false, childList: true },
+  );
+}
+
 function getIntersectionObsever(checkpoint) {
-  /* c8 ignore next */
-  if (!window.IntersectionObserver) return null;
+  /* c8 ignore next 3 */
+  if (!window.IntersectionObserver) {
+    return null;
+  }
   activateBlocksMutationObserver();
+  activateMediaMutationObserver();
   const observer = new IntersectionObserver((entries) => {
     try {
       entries
@@ -188,11 +208,13 @@ function addViewBlockTracking(element) {
   }
 }
 
+const observedMedia = new Set();
 function addViewMediaTracking(parent) {
   const mediaobserver = getIntersectionObsever('viewmedia');
   if (mediaobserver) {
     parent.querySelectorAll('img, video, audio, iframe').forEach((m) => {
-      if (!m.closest('div .block') || m.closest('div[data-block-status="loaded"]')) {
+      if (!observedMedia.has(m)) {
+        observedMedia.add(m);
         mediaobserver.observe(m);
       }
     });
@@ -201,19 +223,32 @@ function addViewMediaTracking(parent) {
 
 function addFormTracking(parent) {
   activateBlocksMutationObserver();
+  activateMediaMutationObserver();
   parent.querySelectorAll('form').forEach((form) => {
     form.removeEventListener('submit', formSubmitListener); // listen only once
     form.addEventListener('submit', formSubmitListener);
   });
 }
 
-const addObserver = (ck, fn, block) => DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
-function mutationsCallback(mutations) {
-  mutations.filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
+function addObserver(ck, fn, block) {
+  return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
+}
+
+function blocksMutationsCallback(mutations) {
+  // block specific 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);
+    });
+}
+
+function mediaMutationsCallback(mutations) {
+  // media mutations
+  mutations
+    .forEach((m) => {
       addObserver('viewmedia', addViewMediaTracking, m.target);
     });
 }
@@ -232,6 +267,11 @@ function addTrackingFromConfig() {
   addCookieConsentTracking(sampleRUM);
   addAdsParametersTracking(sampleRUM);
   addEmailParameterTracking(sampleRUM);
+  fflags.enabled('language', () => {
+    const target = navigator.language;
+    const source = document.documentElement.lang;
+    sampleRUM('language', { source, target });
+  });
 }
 
 function initEnhancer() {
@@ -241,6 +281,7 @@ function initEnhancer() {
       window.hlx.rum.collector = trackCheckpoint;
       processQueue();
     }
+  /* c8 ignore next 3 */
   } catch (error) {
     // something went wrong
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "2.19.2",
+  "version": "2.21.0",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -33,8 +33,8 @@
     "reporter-options": "configFile=.mocha-multi.json"
   },
   "devDependencies": {
-    "@adobe/eslint-config-helix": "2.0.6",
-    "@adobe/helix-rum-js": "2.2.0",
+    "@adobe/eslint-config-helix": "2.0.7",
+    "@adobe/helix-rum-js": "2.4.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
@@ -47,17 +47,18 @@
     "codecov": "3.8.3",
     "eslint": "8.57.0",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.29.1",
-    "husky": "9.1.4",
-    "jsdoc-to-markdown": "8.0.3",
+    "eslint-plugin-import": "2.30.0",
+    "husky": "9.1.5",
+    "jsdoc-to-markdown": "9.0.0",
     "junit-report-builder": "5.0.0",
-    "lint-staged": "15.2.8",
+    "lint-staged": "15.2.10",
     "mocha": "10.7.3",
     "mocha-multi-reporters": "1.5.1",
-    "rollup": "4.20.0",
+    "rollup": "4.21.2",
     "rollup-plugin-cleanup": "3.2.1",
+    "rollup-plugin-checksum": "1.0.1",
     "rollup-plugin-eslint-bundle": "9.0.0",
-    "semantic-release": "24.0.0",
+    "semantic-release": "24.1.0",
     "web-vitals": "4.2.3"
   },
   "lint-staged": {

package/rollup.config.js

@@ -11,7 +11,9 @@
  */
 
 import cleanup from 'rollup-plugin-cleanup';
-import eslint from 'rollup-plugin-eslint-bundle';
+import pkg from 'rollup-plugin-checksum';
+
+const checksum = pkg.default;
 
 const banner = `/*
  * Copyright 2024 Adobe. All rights reserved.
@@ -23,10 +25,7 @@ const banner = `/*
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */
-
-/* eslint-disable max-classes-per-file, wrap-iife */
-// eslint-disable-next-line func-names`;
+ */`;
 
 const bundles = [
   {
@@ -55,13 +54,12 @@ export default [...bundles.map(({ outputFile, source }) => ({
   ],
   plugins: [
     cleanup({
-      comments: ['eslint', 'jsdoc', /^\//, /^\*(?!\sc8\s)(?!\n \* Copyright)/],
-      maxEmptyLines: -1,
+      comments: [],
+      maxEmptyLines: 0,
     }),
-    eslint({
-      eslintOptions: {
-        fix: true,
-      },
+    checksum({
+      filename: `${outputFile.split('/').pop()}.md5`,
+      includeAssets: false,
     }),
   ],
 }))];

package/src/index.js

@@ -9,9 +9,6 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
-/* eslint-disable max-classes-per-file, wrap-iife */
-// eslint-disable-next-line func-names
 (function () {
   'use strict';
 
@@ -21,10 +18,10 @@
       .reduce((a, b) => a + b, 1) % 1371) !== -1
       || !!window.origin.match(/localhost/),
     enabled: (flag, callback) => fflags.has(flag) && callback(),
-
     disabled: (flag, callback) => !fflags.has(flag) && callback(),
     eagercwv: [683],
     example: [543, 770, 1136],
+    language: [543, 959, 1139, 620],
   };
 
   const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB'];
@@ -32,26 +29,8 @@
   fflags.enabled('example', () => DEFAULT_TRACKING_EVENTS.push('example'));
 
   const urlSanitizers = {
-    /**
-     * Returns the full 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
-     */
     full: (url = window.location.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,
-    /**
-     * 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) => {
       const u = new URL(url);
       return `${u.origin}${u.pathname}`;
@@ -60,7 +39,6 @@
 
   const getTargetValue = (element) => element.getAttribute('data-rum-target') || element.getAttribute('href')
       || element.currentSrc || element.getAttribute('src') || element.dataset.action || element.action;
-
   const targetSelector = (element) => {
     try {
       if (!element) return undefined;
@@ -69,7 +47,6 @@
         value = getTargetValue(element.closest('a'));
       }
       if (value && !value.startsWith('https://')) {
-      // resolve relative links
         value = new URL(value, window.location).href;
       }
       return value;
@@ -77,7 +54,51 @@
       return null;
     }
   };
-
+  function walk(element, checkFn) {
+    if (!element || element === document.body || element === document.documentElement) {
+      return undefined;
+    }
+    const checkValue = checkFn(element);
+    return checkValue || walk(element.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 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);
+      return classes.some((className) => className.match(/button|cta/));
+    }
+    return element.getAttribute('role') === 'button';
+  }
+  function getSourceContext(element) {
+    if (element.closest('form')) return 'form';
+    const block = element.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}`));
+  }
+  function getSourceElement(element) {
+    if (element.closest('form') && Array.from(element.closest('form').elements).includes(element)) return element.tagName.toLowerCase() + (element.tagName === 'INPUT' ? `[type='${element.getAttribute('type') || ''}']` : '');
+    if (walk(element, isButton)) return 'button';
+    return element.tagName.toLowerCase().match(/^(a|img|video)$/) && element.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]}`);
+  }
   const sourceSelector = (element) => {
     try {
       if (!element || element === document.body || element === document.documentElement) {
@@ -86,41 +107,10 @@
       if (element.getAttribute('data-rum-source')) {
         return element.getAttribute('data-rum-source');
       }
-      const form = element.closest('form');
-      let formElementSelector = '';
-      if (form && Array.from(form.elements).includes(element)) {
-        formElementSelector = element.tagName === 'INPUT' ? `form input[type='${element.getAttribute('type')}']` : `form ${element.tagName.toLowerCase()}`;
-      }
-
-      const blockName = element.closest('.block') ? element.closest('.block').getAttribute('data-block-name') : '';
-      if (element.id || formElementSelector) {
-        const id = element.id ? `#${element.id}` : '';
-        return blockName ? `.${blockName} ${formElementSelector}${id}` : `${formElementSelector}${id}`;
-      }
-
-      if (element.getAttribute('data-block-name')) {
-        return `.${element.getAttribute('data-block-name')}`;
-      }
-
-      const classes = Array.from(element.classList);
-      const label = element.tagName.toLowerCase();
-      const firstClass = classes.length > 0 ? `.${classes[0]}` : '';
-      const labelWithClass = `${element.tagName.toLowerCase()}${firstClass}`;
-      if (element.tagName.toLowerCase() === 'button'
-        || element.type === 'button'
-        || classes.some((className) => className.match(/button|cta/))) {
-        let parent = element.parentElement;
-        if (!parent) return labelWithClass;
-        if (parent.id) return `#${parent.id} ${label}`;
-        while (parent.tagName !== 'BODY' && !parent.id) parent = parent.parentElement;
-        if (parent.id) return `#${parent.id} ${labelWithClass}`;
-        return blockName ? `.${blockName} ${labelWithClass}` : labelWithClass;
-      }
-
-      const parent = sourceSelector(element.parentElement);
-      if (parent) return parent;
-
-      return labelWithClass;
+      const context = getSourceContext(element.parentElement) || '';
+      const elementName = getSourceElement(element) || '';
+      const identifier = getSourceIdentifier(element) || '';
+      return `${context} ${elementName}${identifier}`.trim() || `"${element.textContent.substring(0, 10)}"`;
     } catch (error) {
       return null;
     }
@@ -130,12 +120,10 @@
     const cmpCookie = document.cookie.split(';')
       .map((c) => c.trim())
       .find((cookie) => cookie.startsWith('OptanonAlertBoxClosed='));
-
     if (cmpCookie) {
       sampleRUM('consent', { source: 'onetrust', target: 'hidden' });
       return;
     }
-
     let consentMutationObserver;
     const trackShowConsent = () => {
       if (document.querySelector('body > div#onetrust-consent-sdk')) {
@@ -147,27 +135,22 @@
       }
       return false;
     };
-
     if (!trackShowConsent()) {
-      // eslint-disable-next-line max-len
       consentMutationObserver = window.MutationObserver
         ? new MutationObserver(trackShowConsent)
-        : null;
+        :  null;
       if (consentMutationObserver) {
         consentMutationObserver.observe(
           document.body,
-          // eslint-disable-next-line object-curly-newline
           { attributes: false, childList: true, subtree: false },
         );
       }
     }
   }
-
   function addUTMParametersTracking(sampleRUM) {
     const usp = new URLSearchParams(window.location.search);
     [...usp.entries()]
       .filter(([key]) => key.startsWith('utm_'))
-      // exclude keys that may leak PII
       .filter(([key]) => key !== 'utm_id')
       .filter(([key]) => key !== 'utm_term')
       .forEach(([source, target]) => sampleRUM('utm', { source, target }));
@@ -200,18 +183,16 @@
   }
 
   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) });
-  // eslint-disable-next-line no-use-before-define
-  const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
-    : null;
-
+  const blocksMutationObserver = window.MutationObserver ? new MutationObserver(blocksMutationsCallback)
+     : {};
+  const mediaMutationObserver = window.MutationObserver ? new MutationObserver(mediaMutationsCallback)
+     : {};
   function trackCheckpoint(checkpoint, data, t) {
     const { weight, id } = window.hlx.rum;
     if (isSelected) {
       const sendPing = (pdata = data) => {
-        // eslint-disable-next-line object-curly-newline, max-len
         const body = JSON.stringify({ weight, id, referer: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'](), checkpoint, t, ...data }, KNOWN_PROPERTIES);
         const { href: url, origin } = new URL(`.rum/${weight}`, sampleRUM.collectBaseURL || sampleRUM.baseURL);
         if (window.location.origin === origin) {
@@ -220,26 +201,22 @@
         } else {
           navigator.sendBeacon(url, body);
         }
-        // eslint-disable-next-line no-console
         console.debug(`ping:${checkpoint}`, pdata);
       };
       sendPing(data);
     }
   }
-
   function processQueue() {
-    while (queue.length) {
+    while (queue && queue.length) {
       const ck = queue.shift();
       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}"]`)) {
-          // web vitals script has been loaded already
           return;
         }
         const script = document.createElement('script');
@@ -255,11 +232,7 @@
             }
             sampleRUM('cwv', data);
           };
-
           const isEager = (metric) => ['CLS', 'LCP'].includes(metric);
-
-          // When loading `web-vitals` using a classic script, all the public
-          // methods can be found on the `webVitals` global namespace.
           ['FID', 'INP', 'TTFB', 'CLS', 'LCP'].forEach((metric) => {
             const metricFn = window.webVitals[`on${metric}`];
             if (typeof metricFn === 'function') {
@@ -273,32 +246,26 @@
         };
         document.head.appendChild(script);
       } catch (error) {
-        // something went wrong
       }
-    }, 2000); // wait for delayed
+    }, 2000);
   }
-
   function addNavigationTracking() {
-    // enter checkpoint when referrer is not the current page url
     const navigate = (source, type) => {
       const payload = { source, target: document.visibilityState };
-      // reload: same page, navigate: same origin, enter: everything else
       if (type === 'reload' || source === window.location.href) {
         sampleRUM('reload', payload);
       } else if (type && type !== 'navigate') {
-        sampleRUM(type, payload); // back, forward, prerender, etc.
+        sampleRUM(type, payload);
       } else if (source && window.location.origin === new URL(source).origin) {
-        sampleRUM('navigate', payload); // internal navigation
+        sampleRUM('navigate', payload);
       } else {
-        sampleRUM('enter', payload); // enter site
+        sampleRUM('enter', payload);
       }
     };
-
     new PerformanceObserver((list) => list
       .getEntries().map((entry) => navigate(window.hlx.referrer || document.referrer, entry.type)))
       .observe({ type: 'navigation', buffered: true });
   }
-
   function addLoadResourceTracking() {
     const observer = new PerformanceObserver((list) => {
       try {
@@ -315,39 +282,47 @@
             sampleRUM('missingresource', { source: entry.name, target: entry.hostname });
           });
       } catch (error) {
-        // something went wrong
       }
     });
     observer.observe({ type: 'resource', buffered: true });
   }
-
   function activateBlocksMutationObserver() {
-    if (!mutationObserver || mutationObserver.active) {
+    if (!blocksMutationObserver || blocksMutationObserver.active) {
       return;
     }
-    mutationObserver.active = true;
-    mutationObserver.observe(
+    blocksMutationObserver.active = true;
+    blocksMutationObserver.observe(
       document.body,
-      // eslint-disable-next-line object-curly-newline
       { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
     );
   }
-
+  function activateMediaMutationObserver() {
+    if (!mediaMutationObserver || mediaMutationObserver.active) {
+      return;
+    }
+    mediaMutationObserver.active = true;
+    mediaMutationObserver.observe(
+      document.body,
+      { subtree: true, attributes: false, childList: true },
+    );
+  }
   function getIntersectionObsever(checkpoint) {
-    if (!window.IntersectionObserver) return null;
+    if (!window.IntersectionObserver) {
+      return null;
+    }
     activateBlocksMutationObserver();
+    activateMediaMutationObserver();
     const observer = new IntersectionObserver((entries) => {
       try {
         entries
           .filter((entry) => entry.isIntersecting)
           .forEach((entry) => {
-            observer.unobserve(entry.target); // observe only once
+            observer.unobserve(entry.target);
             const target = targetSelector(entry.target);
             const source = sourceSelector(entry.target);
             sampleRUM(checkpoint, { target, source });
           });
       } catch (error) {
-        // something went wrong
       }
     });
     return observer;
@@ -359,37 +334,44 @@
       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) => {
-        if (!m.closest('div .block') || m.closest('div[data-block-status="loaded"]')) {
+        if (!observedMedia.has(m)) {
+          observedMedia.add(m);
           mediaobserver.observe(m);
         }
       });
     }
   }
-
   function addFormTracking(parent) {
     activateBlocksMutationObserver();
+    activateMediaMutationObserver();
     parent.querySelectorAll('form').forEach((form) => {
-      form.removeEventListener('submit', formSubmitListener); // listen only once
+      form.removeEventListener('submit', formSubmitListener);
       form.addEventListener('submit', formSubmitListener);
     });
   }
-
-  const addObserver = (ck, fn, block) => DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
-  function mutationsCallback(mutations) {
-    mutations.filter((m) => m.type === 'attributes' && m.attributeName === 'data-block-status')
+  function addObserver(ck, fn, block) {
+    return DEFAULT_TRACKING_EVENTS.includes(ck) && fn(block);
+  }
+  function blocksMutationsCallback(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);
+      });
+  }
+  function mediaMutationsCallback(mutations) {
+    mutations
+      .forEach((m) => {
         addObserver('viewmedia', addViewMediaTracking, m.target);
       });
   }
-
   function addTrackingFromConfig() {
     document.addEventListener('click', (event) => {
       sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
@@ -404,8 +386,12 @@
     addCookieConsentTracking(sampleRUM);
     addAdsParametersTracking(sampleRUM);
     addEmailParameterTracking(sampleRUM);
+    fflags.enabled('language', () => {
+      const target = navigator.language;
+      const source = document.documentElement.lang;
+      sampleRUM('language', { source, target });
+    });
   }
-
   function initEnhancer() {
     try {
       if (sampleRUM) {
@@ -414,9 +400,8 @@
         processQueue();
       }
     } catch (error) {
-      // something went wrong
     }
   }
-
   initEnhancer();
+
 })();

package/src/index.md5

@@ -0,0 +1 @@
+65cf540e7fe93b6d3d67567cbf215544

package/web-test-runner.config.js

@@ -43,7 +43,7 @@ export default {
           context.url = '/node_modules/@adobe/helix-rum-js/dist/rum-standalone.js';
           await next();
           context.body = context.body
-            .replace(/const weight.*/, 'const weight = 1;')
+            .replace(/const weight.*/, 'const weight = 1')
             .replace(/navigator\.sendBeacon/g, 'fakeSendBeacon')
             .replace('.rum/@adobe/helix-rum-enhancer@^2/src/index.js', 'src/index.map.js');
           return true;