feat: track asset position as part of hemingway events

express/scripts/instrument.js

@@ -512,6 +512,21 @@ loadScript(martechURL, () => {
     let adobeEventName = 'adobe.com:express:cta:';
     let sparkEventName;
     let sparkButtonId;
+    let hemingwayAssetId;
+    let hemingwayAssetPath;
+    let hemingwayAssetPosition;
+
+    const hemingwayAsset = $a.querySelector('picture,video,audio,img');
+    if (hemingwayAsset) {
+      // Get asset details
+      const assetPath = hemingwayAsset.currentSrc // the active source in the element
+        || hemingwayAsset.src; // the source for an image/video/iframe
+      hemingwayAssetPath = new URL(assetPath).pathname;
+      const match = assetPath.match(/media_([a-f0-9]+)\.\w+/);
+      hemingwayAssetId = match ? match[0] : assetPath;
+      const siblings = [...$a.closest('.block').querySelectorAll(`.${$a.className.split(' ').join('.')}`)];
+      hemingwayAssetPosition = siblings.indexOf($a);
+    }
 
     const $templateContainer = $a.closest('.template-list');
     const $tutorialContainer = $a.closest('.tutorial-card');
@@ -727,6 +742,15 @@ loadScript(martechURL, () => {
                   sendTimestamp: new Date().getTime(),
                 },
               },
+              ...(hemingwayAsset
+                ? {
+                  hemingway: {
+                    assetId: hemingwayAssetId,
+                    assetPath: hemingwayAssetPath,
+                    assetPosition: hemingwayAssetPosition,
+                  },
+                }
+                : {}),
             },
           },
         },
@@ -1236,6 +1260,7 @@ loadScript(martechURL, () => {
                   hemingway: {
                     assetId: evt.assetId,
                     assetPath: evt.assetPath,
+                    assetPosition: evt.assetPosition,
                   },
                 },
               },

express/scripts/scripts.js

@@ -129,10 +129,14 @@ function trackViewedAssetsInDataLayer(assetsSelector = 'img[src*="/media_"]') {
         assetPath = new URL(assetPath).pathname;
         const match = assetPath.match(/media_([a-f0-9]+)\.\w+/);
         const assetFilename = match ? match[0] : assetPath;
+        const siblings = el.className
+          ? [...el.closest('.block').querySelectorAll(`.${el.className.split(' ').join('.')}`)]
+          : [];
         const details = {
           event: 'viewasset',
           assetId: assetFilename,
           assetPath,
+          assetPosition: siblings.indexOf(el),
         };
 
         // Add experiment details