@adobe/helix-rum-enhancer 1.1.4 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.3.0](https://github.com/adobe/helix-rum-enhancer/compare/v1.2.0...v1.3.0) (2023-08-24)
+
+
+### Features
+
+* **forms:** improve form instrumentation ([86ecbf5](https://github.com/adobe/helix-rum-enhancer/commit/86ecbf564fe6c04e1d566ac4eeb446d3e6670171))
+
+# [1.2.0](https://github.com/adobe/helix-rum-enhancer/compare/v1.1.4...v1.2.0) (2023-08-18)
+
+
+### Features
+
+* **checkpoints:** introduce new checkpoint `enter` that gets triggered when a page is first loaded (not refreshed) ([16c3381](https://github.com/adobe/helix-rum-enhancer/commit/16c3381ee564de17fbd6ab8d14a717f9773ca5f6)), closes [#62](https://github.com/adobe/helix-rum-enhancer/issues/62)
+
 ## [1.1.4](https://github.com/adobe/helix-rum-enhancer/compare/v1.1.3...v1.1.4) (2023-05-16)
 
 

package/README.md

@@ -20,6 +20,7 @@ It will add following new checkpoints:
 - `click`: A click anywhere in the document
 - `viewblock`: A Helix block has been scrolled into the viewport
 - `viewmedia`: An image or viedo hosted by Helix Media Bus has been scrolled into the viewport
+- `enter`: when page loads and the referrer is different than the current page.
 
 ## Development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-rum-enhancer",
-  "version": "1.1.4",
+  "version": "1.3.0",
   "description": "Helix RUM Enhancer",
   "main": "src/index.js",
   "type": "module",
@@ -28,22 +28,22 @@
     "reporter-options": "configFile=.mocha-multi.json"
   },
   "devDependencies": {
-    "@adobe/eslint-config-helix": "2.0.2",
+    "@adobe/eslint-config-helix": "2.0.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@semantic-release/npm": "10.0.3",
-    "c8": "7.13.0",
+    "@semantic-release/npm": "10.0.5",
+    "c8": "8.0.1",
     "codecov": "3.8.3",
-    "eslint": "8.40.0",
+    "eslint": "8.47.0",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.1",
     "husky": "8.0.3",
     "jsdoc-to-markdown": "8.0.0",
     "junit-report-builder": "3.0.1",
-    "lint-staged": "13.2.2",
+    "lint-staged": "14.0.0",
     "mocha": "10.2.0",
     "mocha-multi-reporters": "1.5.1",
-    "semantic-release": "21.0.2"
+    "semantic-release": "21.0.7"
   },
   "lint-staged": {
     "*.js": "eslint",

package/src/index.js

@@ -46,8 +46,14 @@ sampleRUM.drain('observe', ((elements) => {
   });
 }));
 
+// enter checkpoint when referrer is not the current page url
+if (!!document.referrer && (document.referrer !== window.location.href)) {
+  sampleRUM('enter', { target: undefined, source: document.referrer });
+}
+
 sampleRUM.targetselector = (element) => {
-  let value = element.getAttribute('href') || element.currentSrc || element.getAttribute('src');
+  let value = 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;
@@ -85,9 +91,19 @@ sampleRUM.sourceselector = (element) => {
   if (element === document.body || element === document.documentElement || !element) {
     return undefined;
   }
-  if (element.id) {
-    return `#${element.id}`;
+
+  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()}`;
+  }
+
+  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}`;
   }
+
   if (element.getAttribute('data-block-name')) {
     return `.${element.getAttribute('data-block-name')}`;
   }
@@ -97,3 +113,10 @@ sampleRUM.sourceselector = (element) => {
 document.addEventListener('click', (event) => {
   sampleRUM('click', { target: sampleRUM.targetselector(event.target), source: sampleRUM.sourceselector(event.target) });
 });
+
+// Track form submissions
+document.querySelectorAll('form').forEach((form) => {
+  form.addEventListener('submit', (event) => {
+    sampleRUM('formsubmit', { target: sampleRUM.targetselector(event.target), source: sampleRUM.sourceselector(event.target) });
+  });
+});