@adobe/helix-rum-enhancer 2.19.0 → 2.19.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.19.2](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.1...v2.19.2) (2024-08-15)
+
+
+### Bug Fixes
+
+* remove intersection threshold ([#258](https://github.com/adobe/helix-rum-enhancer/issues/258)) ([8805b49](https://github.com/adobe/helix-rum-enhancer/commit/8805b49a052bbc9a659ee2485ada8a9db5a13e40))
+
+## [2.19.1](https://github.com/adobe/helix-rum-enhancer/compare/v2.19.0...v2.19.1) (2024-08-15)
+
+
+### Bug Fixes
+
+* **navigation:** remove `leave` checkpoint ([95503de](https://github.com/adobe/helix-rum-enhancer/commit/95503de3dfd83534a8692d6fa3a1af96734e65aa)), closes [/github.com/adobe/helix-rum-enhancer/pull/257#discussion_r1718152824](https://github.com//github.com/adobe/helix-rum-enhancer/pull/257/issues/discussion_r1718152824)
+
 # [2.19.0](https://github.com/adobe/helix-rum-enhancer/compare/v2.18.0...v2.19.0) (2024-08-13)
 
 

package/README.md

@@ -22,7 +22,6 @@ It will add following new checkpoints:
 - `viewmedia`: An image or video hosted by Helix Media Bus has been scrolled into the viewport
 - `reload`, `navigate`, `enter`: depending on how the current page was accessed
 - `formsubmit`: when a form is submitted
-- `leave`: when the user leaves the page
 
 ## Development
 

package/modules/defaults.js

@@ -12,5 +12,5 @@
 import { fflags } from './fflags.js';
 
 export const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB'];
-export const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'enterleave', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
+export const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
 fflags.enabled('example', () => DEFAULT_TRACKING_EVENTS.push('example'));

package/modules/fflags.js

@@ -10,11 +10,13 @@
  * governing permissions and limitations under the License.
  */
 export const fflags = {
-  has: (flag) => !!window.origin.match(/localhost/)
-    || fflags[flag].indexOf(Array.from(window.origin)
-      .map((a) => a.charCodeAt(0))
-      .reduce((a, b) => a + b, 1) % 1371) !== -1,
+  has: (flag) => fflags[flag].indexOf(Array.from(window.origin)
+    .map((a) => a.charCodeAt(0))
+    .reduce((a, b) => a + b, 1) % 1371) !== -1
+    || !!window.origin.match(/localhost/),
   enabled: (flag, callback) => fflags.has(flag) && callback(),
+  /* c8 ignore next */
   disabled: (flag, callback) => !fflags.has(flag) && callback(),
+  eagercwv: [683],
   example: [543, 770, 1136],
 };

package/modules/index.js

@@ -20,12 +20,15 @@ import {
   addEmailParameterTracking,
   addUTMParametersTracking,
 } from './martech.js';
+import { fflags } from './fflags.js';
 
-const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum : {};
+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) });
 // eslint-disable-next-line no-use-before-define
-const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback) : null;
+const mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
+/* c8 ignore next */ : null;
 
 function trackCheckpoint(checkpoint, data, t) {
   const { weight, id } = window.hlx.rum;
@@ -77,7 +80,6 @@ function addCWVTracking() {
           sampleRUM('cwv', data);
         };
 
-        const featureToggle = () => window.location.hostname === 'blog.adobe.com';
         const isEager = (metric) => ['CLS', 'LCP'].includes(metric);
 
         // When loading `web-vitals` using a classic script, all the public
@@ -85,7 +87,10 @@ function addCWVTracking() {
         ['FID', 'INP', 'TTFB', 'CLS', 'LCP'].forEach((metric) => {
           const metricFn = window.webVitals[`on${metric}`];
           if (typeof metricFn === 'function') {
-            const opts = isEager(metric) ? { reportAllChanges: featureToggle() } : undefined;
+            let opts = {};
+            fflags.enabled('eagercwv', () => {
+              opts = { reportAllChanges: isEager(metric) };
+            });
             metricFn(storeCWV, opts);
           }
         });
@@ -98,7 +103,7 @@ function addCWVTracking() {
   }, 2000); // wait for delayed
 }
 
-function addEnterLeaveTracking() {
+function addNavigationTracking() {
   // enter checkpoint when referrer is not the current page url
   const navigate = (source, type) => {
     const payload = { source, target: document.visibilityState };
@@ -115,22 +120,8 @@ function addEnterLeaveTracking() {
   };
 
   new PerformanceObserver((list) => list
-    .getEntries().map((entry) => navigate(document.referrer, entry.type)))
+    .getEntries().map((entry) => navigate(window.hlx.referrer || document.referrer, entry.type)))
     .observe({ type: 'navigation', buffered: true });
-
-  const leave = ((event) => {
-    try {
-      if (leave.left || (event.type === 'visibilitychange' && document.visibilityState !== 'hidden')) {
-        return;
-      }
-      leave.left = true;
-      sampleRUM('leave');
-    } catch (error) {
-      // something went wrong
-    }
-  });
-  window.addEventListener('visibilitychange', ((event) => leave(event)));
-  window.addEventListener('pagehide', ((event) => leave(event)));
 }
 
 function addLoadResourceTracking() {
@@ -169,9 +160,8 @@ function activateBlocksMutationObserver() {
 }
 
 function getIntersectionObsever(checkpoint) {
-  if (!window.IntersectionObserver) {
-    return null;
-  }
+  /* c8 ignore next */
+  if (!window.IntersectionObserver) return null;
   activateBlocksMutationObserver();
   const observer = new IntersectionObserver((entries) => {
     try {
@@ -187,7 +177,7 @@ function getIntersectionObsever(checkpoint) {
     } catch (error) {
       // something went wrong
     }
-  }, { threshold: 0.25 });
+  });
   return observer;
 }
 function addViewBlockTracking(element) {
@@ -229,26 +219,19 @@ function mutationsCallback(mutations) {
 }
 
 function addTrackingFromConfig() {
-  const trackingFunctions = {
-    click: () => {
-      document.addEventListener('click', (event) => {
-        sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
-      });
-    },
-    cwv: () => addCWVTracking(),
-    form: () => addFormTracking(window.document.body),
-    enterleave: () => addEnterLeaveTracking(),
-    loadresource: () => addLoadResourceTracking(),
-    utm: () => addUTMParametersTracking(sampleRUM),
-    viewblock: () => addViewBlockTracking(window.document.body),
-    viewmedia: () => addViewMediaTracking(window.document.body),
-    consent: () => addCookieConsentTracking(sampleRUM),
-    paid: () => addAdsParametersTracking(sampleRUM),
-    email: () => addEmailParameterTracking(sampleRUM),
-  };
-
-  DEFAULT_TRACKING_EVENTS.filter((ck) => trackingFunctions[ck])
-    .forEach((ck) => trackingFunctions[ck]());
+  document.addEventListener('click', (event) => {
+    sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
+  });
+  addCWVTracking();
+  addFormTracking(window.document.body);
+  addNavigationTracking();
+  addLoadResourceTracking();
+  addUTMParametersTracking(sampleRUM);
+  addViewBlockTracking(window.document.body);
+  addViewMediaTracking(window.document.body);
+  addCookieConsentTracking(sampleRUM);
+  addAdsParametersTracking(sampleRUM);
+  addEmailParameterTracking(sampleRUM);
 }
 
 function initEnhancer() {

package/modules/martech.js

@@ -33,7 +33,9 @@ export function addCookieConsentTracking(sampleRUM) {
 
   if (!trackShowConsent()) {
     // eslint-disable-next-line max-len
-    consentMutationObserver = window.MutationObserver ? new MutationObserver(trackShowConsent) : null;
+    consentMutationObserver = window.MutationObserver
+      ? new MutationObserver(trackShowConsent)
+      : /* c8 ignore next */ null;
     if (consentMutationObserver) {
       consentMutationObserver.observe(
         document.body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -8,7 +8,7 @@
     "setup-playwright": "npx playwright install --with-deps chromium firefox webkit",
     "test": "npm run build-bundle && npm run setup-playwright && web-test-runner --node-resolve --coverage --playwright --browsers chromium firefox webkit",
     "test:ci": "npm run build-bundle && npm run setup-playwright && web-test-runner --node-resolve --coverage --playwright --browsers chromium firefox webkit",
-    "test:watch": "web-test-runner --node-resolve --playwright --coverage --watch",
+    "test:watch": "npm run build-bundle && npm run setup-playwright && web-test-runner --node-resolve --playwright --coverage --watch",
     "lint": "eslint .",
     "docs": "npx jsdoc2md -c .jsdoc.json --files 'src/*.js'  > docs/API.md",
     "build-bundle": "rollup --config",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@adobe/eslint-config-helix": "2.0.6",
-    "@adobe/helix-rum-js": "2.1.4",
+    "@adobe/helix-rum-js": "2.2.0",
     "@esm-bundle/chai": "4.3.4-fix.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",

package/src/index.js

@@ -16,17 +16,19 @@
   'use strict';
 
   const fflags = {
-    has: (flag) => !!window.origin.match(/localhost/)
-      || fflags[flag].indexOf(Array.from(window.origin)
-        .map((a) => a.charCodeAt(0))
-        .reduce((a, b) => a + b, 1) % 1371) !== -1,
+    has: (flag) => fflags[flag].indexOf(Array.from(window.origin)
+      .map((a) => a.charCodeAt(0))
+      .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],
   };
 
   const KNOWN_PROPERTIES = ['weight', 'id', 'referer', 'checkpoint', 't', 'source', 'target', 'cwv', 'CLS', 'FID', 'LCP', 'INP', 'TTFB'];
-  const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'enterleave', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
+  const DEFAULT_TRACKING_EVENTS = ['click', 'cwv', 'form', 'viewblock', 'viewmedia', 'loadresource', 'utm', 'paid', 'email', 'consent'];
   fflags.enabled('example', () => DEFAULT_TRACKING_EVENTS.push('example'));
 
   const urlSanitizers = {
@@ -148,7 +150,9 @@
 
     if (!trackShowConsent()) {
       // eslint-disable-next-line max-len
-      consentMutationObserver = window.MutationObserver ? new MutationObserver(trackShowConsent) : null;
+      consentMutationObserver = window.MutationObserver
+        ? new MutationObserver(trackShowConsent)
+        : null;
       if (consentMutationObserver) {
         consentMutationObserver.observe(
           document.body,
@@ -195,11 +199,13 @@
     });
   }
 
-  const { sampleRUM, queue, isSelected } = (window.hlx && window.hlx.rum) ? window.hlx.rum : {};
+  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 mutationObserver = window.MutationObserver ? new MutationObserver(mutationsCallback)
+    : null;
 
   function trackCheckpoint(checkpoint, data, t) {
     const { weight, id } = window.hlx.rum;
@@ -250,7 +256,6 @@
             sampleRUM('cwv', data);
           };
 
-          const featureToggle = () => window.location.hostname === 'blog.adobe.com';
           const isEager = (metric) => ['CLS', 'LCP'].includes(metric);
 
           // When loading `web-vitals` using a classic script, all the public
@@ -258,7 +263,10 @@
           ['FID', 'INP', 'TTFB', 'CLS', 'LCP'].forEach((metric) => {
             const metricFn = window.webVitals[`on${metric}`];
             if (typeof metricFn === 'function') {
-              const opts = isEager(metric) ? { reportAllChanges: featureToggle() } : undefined;
+              let opts = {};
+              fflags.enabled('eagercwv', () => {
+                opts = { reportAllChanges: isEager(metric) };
+              });
               metricFn(storeCWV, opts);
             }
           });
@@ -270,7 +278,7 @@
     }, 2000); // wait for delayed
   }
 
-  function addEnterLeaveTracking() {
+  function addNavigationTracking() {
     // enter checkpoint when referrer is not the current page url
     const navigate = (source, type) => {
       const payload = { source, target: document.visibilityState };
@@ -287,22 +295,8 @@
     };
 
     new PerformanceObserver((list) => list
-      .getEntries().map((entry) => navigate(document.referrer, entry.type)))
+      .getEntries().map((entry) => navigate(window.hlx.referrer || document.referrer, entry.type)))
       .observe({ type: 'navigation', buffered: true });
-
-    const leave = ((event) => {
-      try {
-        if (leave.left || (event.type === 'visibilitychange' && document.visibilityState !== 'hidden')) {
-          return;
-        }
-        leave.left = true;
-        sampleRUM('leave');
-      } catch (error) {
-        // something went wrong
-      }
-    });
-    window.addEventListener('visibilitychange', ((event) => leave(event)));
-    window.addEventListener('pagehide', ((event) => leave(event)));
   }
 
   function addLoadResourceTracking() {
@@ -340,9 +334,7 @@
   }
 
   function getIntersectionObsever(checkpoint) {
-    if (!window.IntersectionObserver) {
-      return null;
-    }
+    if (!window.IntersectionObserver) return null;
     activateBlocksMutationObserver();
     const observer = new IntersectionObserver((entries) => {
       try {
@@ -357,7 +349,7 @@
       } catch (error) {
         // something went wrong
       }
-    }, { threshold: 0.25 });
+    });
     return observer;
   }
   function addViewBlockTracking(element) {
@@ -399,26 +391,19 @@
   }
 
   function addTrackingFromConfig() {
-    const trackingFunctions = {
-      click: () => {
-        document.addEventListener('click', (event) => {
-          sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
-        });
-      },
-      cwv: () => addCWVTracking(),
-      form: () => addFormTracking(window.document.body),
-      enterleave: () => addEnterLeaveTracking(),
-      loadresource: () => addLoadResourceTracking(),
-      utm: () => addUTMParametersTracking(sampleRUM),
-      viewblock: () => addViewBlockTracking(window.document.body),
-      viewmedia: () => addViewMediaTracking(window.document.body),
-      consent: () => addCookieConsentTracking(sampleRUM),
-      paid: () => addAdsParametersTracking(sampleRUM),
-      email: () => addEmailParameterTracking(sampleRUM),
-    };
-
-    DEFAULT_TRACKING_EVENTS.filter((ck) => trackingFunctions[ck])
-      .forEach((ck) => trackingFunctions[ck]());
+    document.addEventListener('click', (event) => {
+      sampleRUM('click', { target: targetSelector(event.target), source: sourceSelector(event.target) });
+    });
+    addCWVTracking();
+    addFormTracking(window.document.body);
+    addNavigationTracking();
+    addLoadResourceTracking();
+    addUTMParametersTracking(sampleRUM);
+    addViewBlockTracking(window.document.body);
+    addViewMediaTracking(window.document.body);
+    addCookieConsentTracking(sampleRUM);
+    addAdsParametersTracking(sampleRUM);
+    addEmailParameterTracking(sampleRUM);
   }
 
   function initEnhancer() {