MWPW-161845: basic analytics on mas cards

libs/features/mas/web-components/src/hydrate.js

@@ -4,6 +4,9 @@ const DEFAULT_BADGE_COLOR = '#000000';
 const DEFAULT_BADGE_BACKGROUND_COLOR = '#F8D904';
 const CHECKOUT_LINK_STYLE_PATTERN =
     /(accent|primary|secondary)(-(outline|link))?/;
+export const ANALYTICS_TAG = 'mas:product_code/';
+export const ANALYTICS_LINK_ATTR = 'daa-ll';
+export const ANALYTICS_SECTION_ATTR = 'daa-lh';
 
 function processFragment(fragmentData) {
     return fragmentData.fields.reduce(
@@ -222,6 +225,17 @@ export function processCTAs(fragment, merchCard, aemFragmentMapping, variant) {
     }
 }
 
+export function processAnalytics(fragment, merchCard) {
+  const { tags } = fragment;
+  const cardAnalyticsId = tags?.find(tag => tag.startsWith(ANALYTICS_TAG))?.split('/').pop();
+    if(cardAnalyticsId) {
+      merchCard.setAttribute(ANALYTICS_SECTION_ATTR, cardAnalyticsId);
+      merchCard.querySelectorAll(`a[data-analytics-id]`).forEach((link, index) => {
+        link.setAttribute(ANALYTICS_LINK_ATTR, `${link.dataset.analyticsId}-${index + 1}`);
+      });
+    }
+}
+
 export async function hydrate(fragmentData, merchCard) {
     const fragment = processFragment(fragmentData);
     const { variant } = fragment;
@@ -237,6 +251,7 @@ export async function hydrate(fragmentData, merchCard) {
     merchCard.removeAttribute('badge-color');
     merchCard.removeAttribute('badge-text');
     merchCard.removeAttribute('size');
+    merchCard.removeAttribute(ANALYTICS_SECTION_ATTR);
 
     merchCard.variant = variant;
     await merchCard.updateComplete;
@@ -260,4 +275,5 @@ export async function hydrate(fragmentData, merchCard) {
     processPrices(fragment, merchCard, aemFragmentMapping.prices);
     processDescription(fragment, merchCard, aemFragmentMapping.description);
     processCTAs(fragment, merchCard, aemFragmentMapping, variant);
+    processAnalytics(fragment, merchCard);
 }

libs/features/mas/web-components/src/merch-card.js

@@ -14,7 +14,7 @@ import {
     EVENT_MAS_ERROR,
 } from './constants.js';
 import { VariantLayout } from './variants/variant-layout.js';
-import { hydrate } from './hydrate.js';
+import { hydrate, ANALYTICS_SECTION_ATTR } from './hydrate.js';
 
 export const MERCH_CARD_NODE_NAME = 'MERCH-CARD';
 export const MERCH_CARD = 'merch-card';
@@ -90,6 +90,7 @@ export class MerchCard extends LitElement {
             reflect: true,
         },
         merchOffer: { type: Object },
+        analyticsId: { type: String, attribute: ANALYTICS_SECTION_ATTR, reflect: true },
     };
 
     static styles = [styles, getVariantStyles(), ...sizeStyles()];

libs/features/mas/web-components/test/hydrate.test.js

@@ -5,6 +5,10 @@ import {
     processBackgroundImage,
     processCTAs,
     processSubtitle,
+    processAnalytics,
+    ANALYTICS_TAG,
+    ANALYTICS_LINK_ATTR,
+    ANALYTICS_SECTION_ATTR
 } from '../src/hydrate.js';
 
 import { mockFetch } from './mocks/fetch.js';
@@ -318,3 +322,56 @@ describe('processBackgroundImage', () => {
         expect(merchCard.outerHTML).to.equal('<div></div>');
     });
 });
+
+describe('processAnalytics', () => {
+  let merchCard;
+
+  beforeEach(() => {
+      merchCard = mockMerchCard();
+      //merchCard.innerHTML = '<a href="/see-terms.html" data-analytics-id="see-terms">See terms</a>'
+  });
+
+  afterEach(() => {
+      sinon.restore();
+  });
+
+  it('should not set analytics attributes if no fragment.tags', () => {
+      const fragment = {};
+      processAnalytics(fragment, merchCard);
+      expect(merchCard.hasAttribute(ANALYTICS_SECTION_ATTR)).to.be.false;
+      expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(0);
+  });
+
+  it(`should not set analytics attributes when no tags start with ${ANALYTICS_TAG}`, () => {
+      const fragment = { tags: ['mas:term/montly'] };
+      processAnalytics(fragment, merchCard);
+      expect(merchCard.hasAttribute(ANALYTICS_SECTION_ATTR)).to.be.false;
+      expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(0);
+  });
+
+  it('should set analytics-section attribute on merchCard', () => {
+      const fragment = { tags: ['mas:product_code/phsp'] };
+      processAnalytics(fragment, merchCard);
+      expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('phsp');
+  });
+
+  it('should set analytics-link attributes on links inside merchCard', () => {
+      const fragment = { tags: ['mas:term/montly', 'mas:product_code/ccsn'] };
+
+      const seeTerms = document.createElement('a');
+      seeTerms.setAttribute('data-analytics-id', 'see-terms');
+      const buyNow = document.createElement('a');
+      buyNow.setAttribute('data-analytics-id', 'buy-now');
+      const noAnalytics = document.createElement('a');
+      merchCard.appendChild(seeTerms);
+      merchCard.appendChild(buyNow);
+      merchCard.appendChild(noAnalytics);
+
+      processAnalytics(fragment, merchCard);
+      expect(merchCard.getAttribute(ANALYTICS_SECTION_ATTR)).to.equal('ccsn');
+      expect(seeTerms.getAttribute(ANALYTICS_LINK_ATTR)).to.equal('see-terms-1');
+      expect(buyNow.getAttribute(ANALYTICS_LINK_ATTR)).to.equal('buy-now-2');
+      // should handle only links with data-analytics-id attribute
+      expect(merchCard.querySelectorAll(`a[${ANALYTICS_LINK_ATTR}]`).length).to.equal(2);
+  });
+});