Mwpw 135027 aa tracking on accordion

acrobat/blocks/eventwrapper/eventwrapper.js

@@ -16,7 +16,32 @@ const CONVERSION_START = 'conversion-start';
 // const UPSELL_DIS = 'upsell-displayed';
 const FADE = 'review fade-in';
 
+const changeAccordionAnalytics = (fragment, fragmentName, alloy) => {
+  const allButtons = fragment.querySelectorAll('button');
+  allButtons.forEach((button, index) => {
+    button.removeAttribute('daa-ll');
+    button.addEventListener('click', function() {
+      const text = this.textContent.trim();
+      const ctaNumber = index + 1;
+      const state = this.getAttribute('aria-expanded') === 'true' ? 'Expand' : 'Collapse';
+      alloy(fragmentName, state, ctaNumber, text);
+    });
+  });
+};
+
 export default function init(element) {
+  const faqFrag = element.querySelector("a[href*='faq'], div[data-path*='faq']");
+  if (faqFrag) {
+    const waitFragToLoad = setInterval(async () => {
+      const loadedFrag = element.querySelector("div[data-path*='faq'] .accordion-container");
+      if (loadedFrag) {
+        clearInterval(waitFragToLoad);
+        const { default: accordionAlloy } = await import('../../scripts/alloy/accordion.js');
+        changeAccordionAnalytics(loadedFrag, 'faq', accordionAlloy);
+      }
+    },100);
+  }
+
   const wrapper = element;
   const reviewBlock = document.querySelectorAll('.review');
   const setCurrentEvent = (event) => {

acrobat/scripts/alloy/accordion.js

@@ -0,0 +1,30 @@
+export default function init(fragmentName, state, ctaNumber, text) {
+  const customLink = [fragmentName.toUpperCase(), state, `${ctaNumber}-${text}`].join('|');
+  const event = {
+    // always trigger the event using navigator.sendBeacon
+    documentUnloading: true,
+    data: {
+      eventType: 'web.webinteraction.linkClicks',
+      web: {
+        webInteraction: {
+          linkClicks: {
+            value: 1,
+          },
+          type: 'other',
+          name: customLink,
+        },
+      },
+      _adobe_corpnew: {
+        digitalData: {
+          primaryEvent: {
+            eventInfo: {
+              interaction: {[state]: customLink},
+              eventName: customLink,
+            },
+          },
+        },
+      },
+    },
+  };
+  window._satellite.track('event', event);
+}

acrobat/scripts/contentSecurityPolicy/dev.js

@@ -20,6 +20,7 @@ const connectSrc = [
   'accounts.google.com/gsi/log',
   'accounts.google.com/gsi/status',
   'adobe.tt.omtrdc.net',
+  'adobedc.demdex.net/',
   'adobeioruntime.net',
   'analytics.tiktok.com',
   'api.company-target.com/api/v2/',
@@ -162,6 +163,7 @@ const scriptSrc = [
   'accounts.google.com/gsi/client',
   'adobe.demdex.net',
   'adobe.tt.omtrdc.net',
+  'adobedc.demdex.net/',
   'analytics.tiktok.com/',
   'analytics.twitter.com',
   'assets.adobedtm.com',

test/scripts/alloy/accordion.test.js

@@ -0,0 +1,36 @@
+import { expect } from '@esm-bundle/chai';
+import * as sinon from 'sinon';
+
+const { default: init } = await import(
+  '../../../acrobat/scripts/alloy/accordion'
+);
+
+describe('Alloy accordion', () => {
+  beforeEach(() => {
+    window._satellite = {
+      track: sinon.stub(),
+    };
+  });
+
+  afterEach(() => {
+    sinon.restore();
+  });
+  [
+    ['faq', 'Expand', 1, 'How do I fill out a form?'],
+    ['faq', 'Expand', 3, 'How can I upload a photo of my signature?'],
+    ['faq', 'Collapse', 1, 'How do I fill out a form?'],
+    ['faq', 'Collapse', 3, 'How can I upload a photo of my signature?'],
+
+  ].forEach(
+    ([fragmentName, state, ctaNumber, text]) => {
+      it('initiates Alloy accordion', () => {
+        init(fragmentName, state, ctaNumber, text);
+        const customLink = [fragmentName.toUpperCase(), state, `${ctaNumber}-${text}`].join('|');
+        expect(
+          window._satellite.track.args[0][1].data._adobe_corpnew.digitalData
+          .primaryEvent.eventInfo.eventName
+        ).to.include(customLink);
+      });
+    }
+  );
+});