Mwpw 139503: Merch Card link & block analytics (#1599)

* link and block analytics for merch card * unti tests and safe check * optional chaining * nle safe check --------- Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
adobecom · Dec 4, 2023 · 659efde · 659efde
1 parent 50841e8
commit 659efde
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -1,7 +1,7 @@
 import { decorateButtons, decorateBlockHrs } from '../../utils/decorate.js';
 import { createTag, getConfig } from '../../utils/utils.js';
 import { getUpFromSectionMetadata } from '../card/cardUtils.js';
-import { decorateLinkAnalytics } from '../../martech/attributes.js';
+import { processTrackingLabels } from '../../martech/analytics.js';
 import { replaceKey } from '../../features/placeholders.js';
 import '../../deps/commerce.js';
 import '../../deps/merch-card.js';
@@ -102,6 +102,16 @@ function addMerchCardGridsIfMissing(section) {
   }
 }
 
+const decorateMerchCardLinkAnalytics = (el) => {
+  [...el.querySelectorAll('a')].forEach((link, index) => {
+    const heading = el.querySelector('h3');
+    const linkText = `${processTrackingLabels(link.textContent)}-${index + 1}`;
+    const headingText = heading ? `${heading.textContent}` : '';
+    const analyticsString = heading ? `${linkText}|${headingText}` : linkText;
+    link.setAttribute('daa-ll', analyticsString);
+  });
+};
+
 const init = (el) => {
   let section = el.closest('.section');
   const upClass = getUpFromSectionMetadata(section);
@@ -120,8 +130,6 @@ const init = (el) => {
       section = fragmentParent.parentElement;
     }
     addMerchCardGridsIfMissing(section);
-    const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
-    decorateLinkAnalytics(el, headings);
     const images = el.querySelectorAll('picture');
     let image;
     const icons = [];
@@ -148,7 +156,7 @@ const init = (el) => {
       }
     });
 
-    const merchCard = createTag('merch-card', { class: el.className, variant: cardType });
+    const merchCard = createTag('merch-card', { class: el.className, variant: cardType, 'data-block': '' });
     if (ribbonMetadata !== null) {
       const badge = returnRibbonStyle(ribbonMetadata);
       if (badge !== null) {
@@ -161,12 +169,6 @@ const init = (el) => {
       merchCard.setAttribute('action-menu', true);
       merchCard.append(createTag('div', { slot: 'action-menu-content' }, actionMenuContent.innerHTML));
     }
-    if (ctas) {
-      const footer = createTag('div', { slot: 'footer' });
-      decorateButtons(ctas);
-      footer.append(ctas);
-      merchCard.appendChild(footer);
-    }
     if (image !== undefined) {
       const imageSlot = createTag('div', { slot: 'bg-image' });
       imageSlot.appendChild(image);
@@ -183,6 +185,13 @@ const init = (el) => {
       merchCard.setAttribute('icons', JSON.stringify(Array.from(iconImgs)));
       icons.forEach((icon) => icon.remove());
     }
+    parseContent(el, altCta, cardType, merchCard);
+    const footer = createTag('div', { slot: 'footer' });
+    if (ctas) {
+      decorateButtons(ctas);
+      footer.append(ctas);
+      merchCard.appendChild(footer);
+    }
     if (styles.includes('secure')) {
       replaceKey('secure-transaction', getConfig())
         .then((key) => merchCard.setAttribute('secure-label', key));
@@ -193,12 +202,12 @@ const init = (el) => {
         merchCard.setAttribute('checkbox-label', label);
       }
     }
-    parseContent(el, altCta, cardType, merchCard);
     decorateBlockHrs(merchCard);
     if (merchCard.classList.contains('has-divider')) {
       merchCard.setAttribute('custom-hr', true);
     }
     el.replaceWith(merchCard);
+    decorateMerchCardLinkAnalytics(merchCard);
   }
 };
 

diff --git a/test/blocks/merch-card/mocks/uar-card.html b/test/blocks/merch-card/mocks/uar-card.html
@@ -6,7 +6,7 @@ <h1>UAR CARDS</h1>
     <div>
       <div data-valign="middle">
         <p><a href="/drafts/rparrish/assets/merch/photoshop.svg">https://main--milo--adobecom.hlx.page/drafts/rparrish/assets/merch/photoshop.svg</a></p>
-        <h4 id="photoshop">Photoshop</h4>
+        <h3 id="photoshop">Photoshop</h3>
         <p><a href="/tools/ost?osi=2maG5a9vLOf7LjkcfwPbq-JT7RK8ZJ8RpyGaVc4DRQQ&amp;offerId=28A8BD2F1A07795E4C5C37E59BA351B1&amp;type=priceOptical&amp;term=true&amp;seat=false&amp;tax=false">PRICE - PUF - Photoshop with 2TB</a> <a href="/tools/ost?osi=41wh2RRZK4M4qTbbEhzF2Xe9YicCIrNCfQQuxveECTg&amp;offerId=D090AD1C59E7360A2880EBFE339F6BB6&amp;type=priceStrikethrough&amp;term=true&amp;seat=false&amp;tax=false">PRICE - ABM - Photoshop with 2TB</a></p>
         <p>HR in between price and link? Variant UAR - Create gorgeous images, rich graphics, and incredible art.</p>
         <p><br>--- #00ffff</p>
@@ -21,7 +21,7 @@ <h2>inline heading</h2>
     <div>
       <div data-valign="middle">
         <h2 id="httpsmain--milo--adobecomhlxpagedraftsrparrishassetsmerchindesignsvg"><a href="/drafts/rparrish/assets/merch/indesign.svg">https://main--milo--adobecom.hlx.page/drafts/rparrish/assets/merch/indesign.svg</a></h2>
-        <h4 id="indesign">InDesign</h4>
+        <h3 id="indesign">InDesign</h3>
         <p><a href="/tools/ost?osi=2maG5a9vLOf7LjkcfwPbq-JT7RK8ZJ8RpyGaVc4DRQQ&amp;offerId=28A8BD2F1A07795E4C5C37E59BA351B1&amp;type=priceOptical&amp;term=true&amp;seat=false&amp;tax=false">PRICE - PUF - Photoshop with 2TB</a> <a href="/tools/ost?osi=41wh2RRZK4M4qTbbEhzF2Xe9YicCIrNCfQQuxveECTg&amp;offerId=D090AD1C59E7360A2880EBFE339F6BB6&amp;type=priceStrikethrough&amp;term=true&amp;seat=false&amp;tax=false">PRICE - ABM - Photoshop with 2TB</a></p>
         <p>--- #FF3266</p>
         <p>Variant: ‘inline headline’ is used to keep the title inline w/ the icon.</p>
@@ -36,7 +36,7 @@ <h2>background opacity 70</h2>
     <div>
       <div data-valign="middle">
         <p><a href="/drafts/rparrish/assets/merch/xd.svg">https://main--milo--adobecom.hlx.page/drafts/rparrish/assets/merch/xd.svg</a></p>
-        <h4 id="xd">XD</h4>
+        <h3 id="xd">XD</h3>
         <h4 id="price---puf---photoshop-with-2tb-price---abm---photoshop-with-2tb"><a href="/tools/ost?osi=2maG5a9vLOf7LjkcfwPbq-JT7RK8ZJ8RpyGaVc4DRQQ&amp;offerId=28A8BD2F1A07795E4C5C37E59BA351B1&amp;type=priceOptical&amp;term=true&amp;seat=false&amp;tax=false">PRICE - PUF - Photoshop with 2TB</a> <a href="/tools/ost?osi=41wh2RRZK4M4qTbbEhzF2Xe9YicCIrNCfQQuxveECTg&amp;offerId=D090AD1C59E7360A2880EBFE339F6BB6&amp;type=priceStrikethrough&amp;term=true&amp;seat=false&amp;tax=false">PRICE - ABM - Photoshop with 2TB</a></h4>
         <p>HR between link and ctas? Variant: ‘background opacity 70’ is used to have a 70% white bg.</p>
         <p><a href="https://adobe.com/">See terms</a></p>