@adobe/helix-rum-enhancer 1.10.0 → 2.0.0

package/CHANGELOG.md

@@ -1,9 +1,16 @@
-# [1.10.0](https://github.com/adobe/helix-rum-enhancer/compare/v1.9.1...v1.10.0) (2024-01-16)
+# [2.0.0](https://github.com/adobe/helix-rum-enhancer/compare/v1.9.1...v2.0.0) (2024-01-16)
 
 
 ### Features
 
-* **sourceselector:** highlight clicks on buttons and CTAs ([4cd62b8](https://github.com/adobe/helix-rum-enhancer/commit/4cd62b86eb08c496712deba42d3f011b8cbac5c6))
+* prepare compatibility with @adobe/helix-rum-js@2 ([b1cef07](https://github.com/adobe/helix-rum-enhancer/commit/b1cef07ec59c8134056a9aaf25a331016aeffe39))
+* prepare compatibility with @adobe/helix-rum-js@2 ([702a873](https://github.com/adobe/helix-rum-enhancer/commit/702a8731d783850d26b2daae3a839e7ee4192e47))
+
+
+### BREAKING CHANGES
+
+* this version can only be used from helix-rum-js@v2 and up
+* this version can only be used from helix-rum-js@v2 and up
 
 ## [1.9.1](https://github.com/adobe/helix-rum-enhancer/compare/v1.9.0...v1.9.1) (2024-01-11)
 

package/README.md

@@ -17,10 +17,13 @@ This library is meant to be used in conjunction with and loaded by the `sampleRU
 It will add following new checkpoints:
 
 - `cwv`: Core Web Vitals Collection
+- `pagesviewed`: number that helps to estimate how many pages are seen in average by a user.
 - `click`: A click anywhere in the document
 - `viewblock`: A Helix block has been scrolled into the viewport
 - `viewmedia`: An image or video hosted by Helix Media Bus has been scrolled into the viewport
-- `enter`: when page loads and the referrer is different than the current page.
+- `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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "1.10.0",
+  "version": "2.0.0",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -32,7 +32,7 @@
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@semantic-release/npm": "11.0.2",
-    "c8": "9.0.0",
+    "c8": "9.1.0",
     "codecov": "3.8.3",
     "eslint": "8.56.0",
     "eslint-plugin-header": "3.1.1",

package/src/index.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 Adobe. All rights reserved.
+ * Copyright 2023 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
@@ -9,66 +9,21 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-const { sampleRUM } = window.hlx.rum;
-
-sampleRUM.baseURL = sampleRUM.baseURL || new URL('https://rum.hlx.page');
-
-sampleRUM.blockobserver = (window.IntersectionObserver) ? new IntersectionObserver((entries) => {
-  entries
-    .filter((entry) => entry.isIntersecting)
-    .forEach((entry) => {
-      sampleRUM.blockobserver.unobserve(entry.target); // observe only once
-      const target = sampleRUM.targetselector(entry.target);
-      const source = sampleRUM.sourceselector(entry.target);
-      sampleRUM('viewblock', { target, source });
-    });
-}, { threshold: 0.25 }) : { observe: () => { } };
-
-sampleRUM.mediaobserver = (window.IntersectionObserver) ? new IntersectionObserver((entries) => {
-  entries
-    .filter((entry) => entry.isIntersecting)
-    .forEach((entry) => {
-      sampleRUM.mediaobserver.unobserve(entry.target); // observe only once
-      const target = sampleRUM.targetselector(entry.target);
-      const source = sampleRUM.sourceselector(entry.target);
-      sampleRUM('viewmedia', { target, source });
-    });
-}, { threshold: 0.25 }) : { observe: () => { } };
-
-sampleRUM.drain('observe', ((elements) => {
-  elements.forEach((element) => {
-    if (element.tagName.toLowerCase() === 'img'
-      || element.tagName.toLowerCase() === 'video'
-      || element.tagName.toLowerCase() === 'audio'
-      || element.tagName.toLowerCase() === 'iframe') {
-      sampleRUM.mediaobserver.observe(element);
-    } else {
-      sampleRUM.blockobserver.observe(element);
-    }
-  });
-}));
-
-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 !== 'navigate') {
-    sampleRUM(type, payload); // back, forward, prerender, etc.
-  } else if (source && window.location.origin === new URL(source).origin) {
-    sampleRUM('navigate', payload); // internal navigation
-  } else {
-    sampleRUM('enter', payload); // enter site
-  }
-};
+/* eslint-env browser */
+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'];
+const SESSION_STORAGE_KEY = 'aem-rum';
+const { sampleRUM, queue, isSelected } = window.hlx.rum;
 
-new PerformanceObserver((list) => list
-  .getEntries().map((entry) => navigate(document.referrer, entry.type)))
-  .observe({ type: 'navigation', buffered: true });
+const urlSanitizers = {
+  full: () => window.location.href,
+  origin: () => window.location.origin,
+  path: () => window.location.href.replace(/\?.*$/, ''),
+};
 
-sampleRUM.targetselector = (element) => {
-  let value = element.getAttribute('data-rum-target') || element.getAttribute('href') || element.currentSrc || element.getAttribute('src')
-                || element.dataset.action || element.action;
+const targetselector = (element) => {
+  let value = element.getAttribute('data-rum-target') || element.getAttribute('href')
+    || element.currentSrc || element.getAttribute('src') || element.dataset.action || element.action;
   if (value && !value.startsWith('https://')) {
     // resolve relative links
     value = new URL(value, window.location).href;
@@ -76,42 +31,7 @@ sampleRUM.targetselector = (element) => {
   return value;
 };
 
-sampleRUM.drain('cwv', (() => {
-  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;
-  }
-  // use classic script to avoid CORS issues
-  const script = document.createElement('script');
-  script.src = cwvScript;
-  script.onload = () => {
-    const storeCWV = (measurement) => {
-      const data = { cwv: {} };
-      data.cwv[measurement.name] = measurement.value;
-      sampleRUM('cwv', data);
-    };
-    // When loading `web-vitals` using a classic script, all the public
-    // methods can be found on the `webVitals` global namespace.
-    ['CLS', 'FID', 'LCP', 'INP', 'TTFB']
-      .map((metric) => window.webVitals[`get${metric}`])
-      .filter((metric) => typeof metric === 'function')
-      .forEach((invokeMetric) => {
-        invokeMetric(storeCWV);
-      });
-  };
-  document.head.appendChild(script);
-}));
-
-sampleRUM.drain('leave', ((event = {}) => {
-  if (sampleRUM.left || (event.type === 'visibilitychange' && document.visibilityState !== 'hidden')) {
-    return;
-  }
-  sampleRUM.left = true;
-  sampleRUM('leave');
-}));
-
-sampleRUM.sourceselector = (element) => {
+const sourceselector = (element) => {
   if (element === document.body || element === document.documentElement || !element) {
     return undefined;
   }
@@ -124,8 +44,8 @@ sampleRUM.sourceselector = (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 blockName = element.closest('.block') ? element.closest('.block').getAttribute('data-block-name') : '';
     const id = element.id ? `#${element.id}` : '';
     return blockName ? `.${blockName} ${formElementSelector}${id}` : `${formElementSelector}${id}`;
   }
@@ -133,37 +53,217 @@ sampleRUM.sourceselector = (element) => {
   if (element.getAttribute('data-block-name')) {
     return `.${element.getAttribute('data-block-name')}`;
   }
+  return sourceselector(element.parentElement);
+};
+
+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;
 
-  if (Array.from(element.classList).some((className) => className.match(/button|cta/))) {
-    return blockName ? `.${blockName} .button` : '.button';
+// eslint-disable-next-line no-unused-vars
+function optedIn(checkpoint, data) {
+  // TODO: check config service to know if
+  return true;
+}
+// Gets configured collection from the config service for the current domain
+function getCollectionConfig() {
+  if (window.location.hostname === 'blog.adobe.com') {
+    return ['loadresource', ...DEFAULT_TRACKING_EVENTS];
   }
-  
-  return sampleRUM.sourceselector(element.parentElement);
-};
+  // TODO: configured collection should come from config service
+  return DEFAULT_TRACKING_EVENTS;
+}
+
+function trackCheckpoint(checkpoint, data, t) {
+  const { weight, id } = window.hlx.rum;
+  if (optedIn(checkpoint, data) && isSelected) {
+    const sendPing = (pdata = data) => {
+      // eslint-disable-next-line object-curly-newline, max-len
+      const body = JSON.stringify({ weight, id, sanitizeURL: urlSanitizers[window.hlx.RUM_MASK_URL || 'path'], checkpoint, t, ...data }, KNOWN_PROPERTIES);
+      const url = new URL(`.rum/${weight}`, sampleRUM.baseURL).href;
+      navigator.sendBeacon(url, body);
+      // eslint-disable-next-line no-console
+      console.debug(`ping:${checkpoint}`, pdata);
+    };
+    sendPing(data);
+  }
+}
+
+function processQueue() {
+  while (queue.length) {
+    const ck = queue.shift();
+    trackCheckpoint(...ck);
+  }
+}
+
+function addCWVTracking() {
+  setTimeout(() => {
+    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;
+        sampleRUM('cwv', data);
+      };
+      // When loading `web-vitals` using a classic script, all the public
+      // methods can be found on the `webVitals` global namespace.
+      ['CLS', 'FID', 'LCP', 'INP', 'TTFB']
+        .map((metric) => window.webVitals[`get${metric}`])
+        .filter((metric) => typeof metric === 'function')
+        .forEach((invokeMetric) => {
+          invokeMetric(storeCWV);
+        });
+    };
+    document.head.appendChild(script);
+  }, 2000); // wait for delayed
+}
 
-document.addEventListener('click', (event) => {
-  sampleRUM('click', { target: sampleRUM.targetselector(event.target), source: sampleRUM.sourceselector(event.target) });
-});
+function addEnterLeaveTracking() {
+  // 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 !== 'navigate') {
+      sampleRUM(type, payload); // back, forward, prerender, etc.
+    } else if (source && window.location.origin === new URL(source).origin) {
+      sampleRUM('navigate', payload); // internal navigation
+    } else {
+      sampleRUM('enter', payload); // enter site
+    }
+  };
+  navigate(document.referrer);
 
-// Track form submissions
-document.querySelectorAll('form').forEach((form) => {
-  form.addEventListener('submit', (event) => {
-    sampleRUM('formsubmit', { target: sampleRUM.targetselector(event.target), source: sampleRUM.sourceselector(event.target) });
+  new PerformanceObserver((list) => list
+    .getEntries().map((entry) => navigate(document.referrer, entry.type)))
+    .observe({ type: 'navigation', buffered: true });
+
+  const leave = ((event) => {
+    if (leave.left || (event.type === 'visibilitychange' && document.visibilityState !== 'hidden')) {
+      return;
+    }
+    leave.left = true;
+    sampleRUM('leave');
   });
-});
+  window.addEventListener('visibilitychange', ((event) => leave(event)));
+  window.addEventListener('pagehide', ((event) => leave(event)));
+}
 
-window.addEventListener('visibilitychange', ((event) => sampleRUM.leave(event)));
-window.addEventListener('pagehide', ((event) => sampleRUM.leave(event)));
+function addLoadResourceTracking() {
+  if (window.location.hostname === 'blog.adobe.com') {
+    const observer = new PerformanceObserver((list) => {
+      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)$'))
+        .forEach((entry) => {
+          sampleRUM('loadresource', { source: entry.name, target: Math.round(entry.duration) });
+        });
+    });
+    observer.observe({ type: 'resource', buffered: true });
+  }
+}
 
-if (window.location.hostname === 'blog.adobe.com') {
-  const observer = new PerformanceObserver((list) => {
-    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)$'))
+function activateBlocksMutationObserver() {
+  if (!mutationObserver || mutationObserver.active) {
+    return;
+  }
+  mutationObserver.active = true;
+  mutationObserver.observe(
+    document.body,
+    // eslint-disable-next-line object-curly-newline
+    { subtree: true, attributes: true, attributeFilter: ['data-block-status'] },
+  );
+}
+
+function getIntersectionObsever(checkpoint) {
+  if (!window.IntersectionObserver) {
+    return null;
+  }
+  activateBlocksMutationObserver();
+  const observer = new IntersectionObserver((entries) => {
+    entries
+      .filter((entry) => entry.isIntersecting)
       .forEach((entry) => {
-        sampleRUM('loadresource', { source: entry.name, target: Math.round(entry.duration) });
+        observer.unobserve(entry.target); // observe only once
+        const target = targetselector(entry.target);
+        const source = sourceselector(entry.target);
+        sampleRUM(checkpoint, { target, source });
       });
+  }, { threshold: 0.25 });
+  return observer;
+}
+function addViewBlockTracking(element) {
+  const blockobserver = getIntersectionObsever('viewblock');
+  if (blockobserver) {
+    const blocks = element.getAttribute('data-block-status') ? [element] : element.querySelectorAll('div[data-block-status="loaded"]');
+    blocks.forEach((b) => blockobserver.observe(b));
+  }
+}
+
+function addViewMediaTracking(parent) {
+  const mediaobserver = getIntersectionObsever('viewmedia');
+  if (mediaobserver) {
+    parent.querySelectorAll('picture > img, video, audio, iframe').forEach((m) => {
+      if (!m.closest('div .block') || m.closest('div[data-block-status="loaded"]')) {
+        mediaobserver.observe(m);
+      }
+    });
+  }
+}
+
+function addFormTracking(parent) {
+  activateBlocksMutationObserver();
+  parent.querySelectorAll('form').forEach((form) => {
+    form.removeEventListener('submit', formSubmitListener); // listen only once
+    form.addEventListener('submit', formSubmitListener);
   });
-  observer.observe({ type: 'resource', buffered: true });
 }
+
+const addObserver = (ck, fn, block) => getCollectionConfig().includes(ck) && fn(block);
+function mutationsCallback(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);
+      addObserver('viewmedia', addViewMediaTracking, m.target);
+    });
+}
+
+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(),
+    viewblock: () => addViewBlockTracking(window.document.body),
+    viewmedia: () => addViewMediaTracking(window.document.body),
+  };
+
+  getCollectionConfig().filter((ck) => trackingFunctions[ck])
+    .forEach((ck) => trackingFunctions[ck]());
+}
+
+function initEnhancer() {
+  // eslint-disable-next-line max-len
+  const rumStorage = sessionStorage.getItem(SESSION_STORAGE_KEY) ? JSON.parse(sessionStorage.getItem(SESSION_STORAGE_KEY)) : {};
+  sampleRUM('pagesviewed', { source: rumStorage.pages });
+  addTrackingFromConfig();
+  window.hlx.rum.collector = trackCheckpoint;
+  processQueue();
+}
+
+initEnhancer();