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

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [2.31.0-beta.4](https://github.com/adobe/helix-rum-enhancer/compare/v2.31.0-beta.3...v2.31.0-beta.4) (2025-01-16)
+
+
+### Bug Fixes
+
+* plugin path resolution ([f464652](https://github.com/adobe/helix-rum-enhancer/commit/f464652df5bef5f42e0b32c1f10bebef013dd1b0))
+
+# [2.31.0-beta.3](https://github.com/adobe/helix-rum-enhancer/compare/v2.31.0-beta.2...v2.31.0-beta.3) (2025-01-16)
+
+
+### Bug Fixes
+
+* bugs and failing tests ([5c9adbc](https://github.com/adobe/helix-rum-enhancer/commit/5c9adbc2502203495a05d4fd2be6e05cc11102df))
+* cross-browser compatibility ([1c21afd](https://github.com/adobe/helix-rum-enhancer/commit/1c21afd8cd982d4c33feba863d2251311f36e153))
+* set proper url base for plugins ([9726dc8](https://github.com/adobe/helix-rum-enhancer/commit/9726dc8f98bd71936c8a8f430cae73b6a8f5d63f))
+* use proper fully qualified URLs for plugin path to avoid CORS ([c73eb31](https://github.com/adobe/helix-rum-enhancer/commit/c73eb31461115529922b82c3a8b678f21052b918))
+
+
+### Features
+
+* allow external extension via window.RUM_PLUGINS ([4613b00](https://github.com/adobe/helix-rum-enhancer/commit/4613b004c617f4d503355b5c43008149df9101ef))
+* inline web-vitals.js ([7d89e9f](https://github.com/adobe/helix-rum-enhancer/commit/7d89e9f664686d3a475ce829d7fb4f68f29ed71b))
+* introduce minimal plugin system to offset non-essenial logic ([8642557](https://github.com/adobe/helix-rum-enhancer/commit/8642557beaef5161d1d4d51d2b04ce06bf7dbeb7))
+* introduce minimal plugin system to offset non-essenial logic ([6066f0b](https://github.com/adobe/helix-rum-enhancer/commit/6066f0bd56393a10391e190b9a338f9a65b772b0))
+
 # [2.31.0-beta.2](https://github.com/adobe/helix-rum-enhancer/compare/v2.31.0-beta.1...v2.31.0-beta.2) (2025-01-16)
 
 

package/modules/index.js

@@ -14,26 +14,66 @@
 import { KNOWN_PROPERTIES, DEFAULT_TRACKING_EVENTS } from './defaults.js';
 import { urlSanitizers } from './utils.js';
 import { targetSelector, sourceSelector } from './dom.js';
-import {
-  addAdsParametersTracking,
-  addCookieConsentTracking,
-  addEmailParameterTracking,
-  addUTMParametersTracking,
-} from './martech.js';
 import { fflags } from './fflags.js';
 
 const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum
   /* c8 ignore next */ : {};
 
-// blocks mutation observer
-// eslint-disable-next-line no-use-before-define, max-len
-const blocksMO = window.MutationObserver ? new MutationObserver(blocksMCB)
-  /* c8 ignore next */ : {};
+const createMO = (cb) => (window.MutationObserver ? new MutationObserver(cb)
+/* c8 ignore next */ : {});
 
-// media mutation observer
-// eslint-disable-next-line no-use-before-define, max-len
-const mediaMO = window.MutationObserver ? new MutationObserver(mediaMCB)
-  /* c8 ignore next */ : {};
+// blocks & media mutation observer
+// eslint-disable-next-line no-use-before-define
+const [blocksMO, mediaMO] = [blocksMCB, mediaMCB].map(createMO);
+
+// Check for the presence of a given cookie
+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`,
+  // Interactive elements
+  form: { url: `${pluginBasePath}/form.js`, condition: () => document.querySelector('form'), isBlockDependent: true },
+  video: { url: `${pluginBasePath}/video.js`, condition: () => document.querySelector('video'), isBlockDependent: true },
+  // Martech
+  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 },
+};
+
+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 loadPlugins(filter = () => true, params = PLUGIN_PARAMETERS) {
+  Object.entries(PLUGINS)
+    .filter(([, plugin]) => filter(plugin))
+    .map(([key]) => loadPlugin(key, params));
+}
 
 function trackCheckpoint(checkpoint, data, t) {
   const { weight, id } = window.hlx.rum;
@@ -64,51 +104,6 @@ function processQueue() {
   }
 }
 
-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');
-      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);
-
-        // When loading `web-vitals` using a classic script, all the public
-        // methods can be found on the `webVitals` global namespace.
-        ['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);
-      /* c8 ignore next 3 */
-    } catch (error) {
-      // something went wrong
-    }
-  }, 2000); // wait for delayed
-}
-
 function addNavigationTracking() {
   // enter checkpoint when referrer is not the current page url
   const navigate = (source, type, redirectCount) => {
@@ -210,8 +205,6 @@ function getIntersectionObsever(checkpoint) {
   if (!window.IntersectionObserver) {
     return null;
   }
-  activateBlocksMO();
-  activateMediaMO();
   const observer = new IntersectionObserver((entries) => {
     try {
       entries
@@ -250,28 +243,6 @@ function addViewMediaTracking(parent) {
   }
 }
 
-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);
 }
@@ -283,7 +254,7 @@ function blocksMCB(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('form', (el) => loadPlugins((p) => p.isBlockDependent, { ...PLUGIN_PARAMETERS, context: el }), m.target);
       addObserver('viewblock', addViewBlockTracking, m.target);
     });
 }
@@ -298,6 +269,9 @@ function mediaMCB(mutations) {
 }
 
 function addTrackingFromConfig() {
+  activateBlocksMO();
+  activateMediaMO();
+
   let lastSource;
   let lastTarget;
   document.addEventListener('click', (event) => {
@@ -309,16 +283,16 @@ function addTrackingFromConfig() {
       lastTarget = target;
     }
   });
-  addCWVTracking();
-  addFormTracking(window.document.body);
+
+  // Core tracking
   addNavigationTracking();
   addLoadResourceTracking();
-  addUTMParametersTracking(sampleRUM);
-  addViewBlockTracking(window.document.body);
-  addViewMediaTracking(window.document.body);
-  addCookieConsentTracking(sampleRUM);
-  addAdsParametersTracking(sampleRUM);
-  addEmailParameterTracking(sampleRUM);
+  addViewBlockTracking(document.body);
+  addViewMediaTracking(document.body);
+
+  // Tracking extensions
+  loadPlugins();
+
   fflags.enabled('language', () => {
     const target = navigator.language;
     const source = document.documentElement.lang;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "2.31.0-beta.2",
+  "version": "2.31.0-beta.4",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -36,6 +36,7 @@
     "@adobe/eslint-config-helix": "2.0.8",
     "@adobe/helix-rum-js": "2.10.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
+    "@rollup/plugin-babel": "6.0.4",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "12.0.1",
@@ -57,7 +58,6 @@
     "mocha-multi-reporters": "1.5.1",
     "rollup": "4.30.1",
     "rollup-plugin-checksum": "1.0.1",
-    "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-eslint-bundle": "9.0.0",
     "semantic-release": "24.2.1",
     "semantic-release-slack-bot": "^4.0.2",

package/plugins/cwv.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * 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-next-line max-len
+// eslint-disable-next-line import/no-extraneous-dependencies, import/no-relative-packages, no-unused-vars
+import * as webVitals from '../node_modules/web-vitals/dist/web-vitals.iife.js';
+
+export default function addCWVTracking({
+  sampleRUM, sourceSelector, targetSelector, fflags,
+}) {
+  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');
+      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);
+
+        // When loading `web-vitals` using a classic script, all the public
+        // methods can be found on the `webVitals` global namespace.
+        ['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);
+      /* c8 ignore next 3 */
+    } catch (error) {
+      // something went wrong
+    }
+  }, 2000); // wait for delayed
+}

package/plugins/form.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * 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.
+ */
+export default function addFormTracking({
+  sampleRUM, sourceSelector, targetSelector, context,
+}) {
+  context.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) });
+      }
+    });
+  });
+}

package/plugins/martech.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * 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.
+ */
+function addAdsParametersTracking(usp, { 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(usp.keys());
+  Object.entries(networks).forEach(([network, regex]) => {
+    params.filter((param) => regex.test(param)).forEach((param) => sampleRUM('paid', { source: network, target: param }));
+  });
+}
+
+function addEmailParameterTracking(usp, { sampleRUM }) {
+  const networks = {
+    mailchimp: /mc_(c|e)id/,
+    marketo: /mkt_tok/,
+  };
+  const params = Array.from(usp.keys());
+  Object.entries(networks).forEach(([network, regex]) => {
+    params.filter((param) => regex.test(param)).forEach((param) => sampleRUM('email', { source: network, target: param }));
+  });
+}
+
+function addUTMParametersTracking(usp, { sampleRUM }) {
+  Array.from(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 }));
+}
+
+export default function addMartechTraking({ sampleRUM }) {
+  const usp = new URLSearchParams(window.location.search);
+  addAdsParametersTracking(usp, { sampleRUM });
+  addEmailParameterTracking(usp, { sampleRUM });
+  addUTMParametersTracking(usp, { sampleRUM });
+}

package/{modules/martech.js → plugins/onetrust.js}

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-export function addCookieConsentTracking(sampleRUM) {
+export default function addCookieConsentTracking({ sampleRUM }) {
   const cmpCookie = document.cookie.split(';')
     .map((c) => c.trim())
     .find((cookie) => cookie.startsWith('OptanonAlertBoxClosed='));
@@ -50,39 +50,3 @@ export function addCookieConsentTracking(sampleRUM) {
     }
   }
 }
-
-export 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 }));
-}
-export 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 }));
-  });
-}
-export 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 }));
-  });
-}

package/plugins/video.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * 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.
+ */
+
+export default function addVideoTracking({ context }) {
+  context.querySelectorAll('video').forEach(() => {
+    // TODO: Add video tracking
+  });
+}

package/rollup.config.js

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import cleanup from 'rollup-plugin-cleanup';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { babel } from '@rollup/plugin-babel';
 import pkg from 'rollup-plugin-checksum';
 
 const checksum = pkg.default;
@@ -28,10 +29,16 @@ const banner = `/*
  */`;
 
 const bundles = [
+  // Core library
   {
     source: 'modules/index.js',
     outputFile: 'src/index',
   },
+  // Library plugins
+  ...['cwv', 'form', 'martech', 'onetrust', 'video'].map((plugin) => ({
+    source: `plugins/${plugin}.js`,
+    outputFile: `src/plugins/${plugin}`,
+  })),
 ];
 
 export default [...bundles.map(({ outputFile, source }) => ({
@@ -53,9 +60,9 @@ export default [...bundles.map(({ outputFile, source }) => ({
     },
   ],
   plugins: [
-    cleanup({
-      comments: [],
-      maxEmptyLines: 0,
+    babel({
+      babelHelpers: 'bundled',
+      comments: false,
     }),
     checksum({
       filename: `${outputFile.split('/').pop()}.md5`,