Merge pull request #143 from hlxsites/72-data-attributes-live-ux

feat: instrument main via editable data attributes
Netcentric · Dec 1, 2022 · bc8a85a · bc8a85a
2 parents 4bd1470 + e91cbff
commit bc8a85a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/404.html b/404.html
@@ -13,7 +13,7 @@
   <script type="module">
     import { sampleRUM } from '/scripts/lib-franklin.js';
 
-    window.addEventListener('load', () => {
+    window.addEventListener('load', async () => {
       if (document.referrer) {
         const { origin, pathname } = new URL(document.referrer);
         if (origin === window.location.origin) {
@@ -26,6 +26,23 @@
           btnContainer.append(backBtn);
         }
       }
+      const resp = await fetch(`metadata.json`);
+      if (resp.ok) {
+        const json = await resp.json();
+        if (json && json.data) {
+          const matchedRow = json.data.find((row) => (row.URL === '404.html'));
+          if (matchedRow) {
+            const main = document.querySelector('main');
+            if (main) {
+              main.setAttribute('data-wp-version-name', matchedRow['wp-version-name']);
+              main.setAttribute('data-wp-page-type', matchedRow['wp-page-type']);
+              main.setAttribute('data-wp-http-status', matchedRow['wp-http-status']);
+              main.setAttribute('data-wp-version-traffic', matchedRow['wp-version-traffic']);
+              main.setAttribute('data-wp-page-cookie', matchedRow['wp-page-cookie']);
+            }
+          }
+        }
+      }
       sampleRUM('404', { source: document.referrer, target: window.location.href });
     });
   </script>
@@ -50,7 +67,7 @@
 
 <body>
   <header></header>
-  <main class="error">
+  <main class="error" data-wp-version-name="franklin" data-wp-http-status="404" data-wp-page-type="error">
     <div class="section">
       <svg viewBox="1 0 38 18" class="error-number">
         <text x="0" y="17">404</text>

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -166,12 +166,23 @@ function buildAutoBlocks(main) {
   }
 }
 
+/**
+ * Instruments the main element with document metadata for LiveUX tracking
+ * @param {*} main The main element
+ */
+function instrumentMain(main) {
+  [...document.head.children]
+    .filter((child) => child.nodeName === 'META' && child.name.startsWith('wp-'))
+    .forEach((meta) => main.setAttribute(`data-${meta.name}`, meta.content));
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
  */
 // eslint-disable-next-line import/prefer-default-export
 export function decorateMain(main) {
+  instrumentMain(main);
   // hopefully forward compatible button decoration
   decorateButtons(main);
   buildAutoBlocks(main);