Add Events SDK

hlxsites · Jun 11, 2024 · 93fa9de · 93fa9de
1 parent ee9d9b0
commit 93fa9de
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 44 deletions.
diff --git a/blocks/product-recommendations/product-recommendations.js b/blocks/product-recommendations/product-recommendations.js
@@ -90,9 +90,9 @@ function renderItems(block, recommendations) {
     return;
   }
 
-  window.adobeDataLayer.push((dl) => {
+  /* window.adobeDataLayer.push((dl) => {
     dl.push({ event: 'recs-unit-impression-render', eventInfo: { ...dl.getState(), unitId: recommendation.unitId } });
-  });
+  }); */
 
   // Title
   block.querySelector('h2').textContent = recommendation.storefrontLabel;
@@ -108,9 +108,9 @@ function renderItems(block, recommendations) {
   const inViewObserver = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
-        window.adobeDataLayer.push((dl) => {
+        /* window.adobeDataLayer.push((dl) => {
           dl.push({ event: 'recs-unit-view', eventInfo: { ...dl.getState(), unitId: recommendation.unitId } });
-        });
+        }); */
         inViewObserver.disconnect();
       }
     });
@@ -166,17 +166,17 @@ async function loadRecommendation(block, context) {
     console.error('Error parsing purchase history', e);
   }
 
-  window.adobeDataLayer.push((dl) => {
+  /* window.adobeDataLayer.push((dl) => {
     dl.push({ event: 'recs-api-request-sent', eventInfo: { ...dl.getState() } });
-  });
+  }); */
 
   recommendationsPromise = performCatalogServiceQuery(recommendationsQuery, context);
   const { recommendations } = await recommendationsPromise;
 
-  window.adobeDataLayer.push((dl) => {
+  /* window.adobeDataLayer.push((dl) => {
     dl.push({ recommendationsContext: { units: recommendations.results.map(mapUnit) } });
     dl.push({ event: 'recs-api-response-received', eventInfo: { ...dl.getState() } });
-  });
+  }); */
 
   renderItems(block, recommendations);
 }
@@ -186,29 +186,30 @@ export default async function decorate(block) {
 
   const context = {};
 
-  function handleProductChanges({ productContext }) {
-    context.currentSku = productContext.sku;
+  function handleProductChanges({ eventInfo }) {
+    context.currentSku = eventInfo.productContext.sku;
     loadRecommendation(block, context);
   }
 
-  function handleCategoryChanges({ categoryContext }) {
-    context.category = categoryContext.name;
+  function handleCategoryChanges({ eventInfo }) {
+    context.category = eventInfo.categoryContext.name;
     loadRecommendation(block, context);
   }
 
-  function handlePageTypeChanges({ pageContext }) {
-    context.pageType = pageContext.pageType;
+  function handlePageTypeChanges({ eventInfo }) {
+    context.pageType = eventInfo.pageContext.pageType;
     loadRecommendation(block, context);
   }
 
-  function handleCartChanges({ shoppingCartContext }) {
-    context.cartSkus = shoppingCartContext.items.map(({ product }) => product.sku);
+  function handleCartChanges({ eventInfo }) {
+    context.cartSkus = eventInfo.shoppingCartContext.items.map(({ product }) => product.sku);
     loadRecommendation(block, context);
   }
 
+  window.magentoStorefrontEvents.subscribe.pageView(handlePageTypeChanges);
+  window.magentoStorefrontEvents.subscribe.productPageView(handleProductChanges);
+
   window.adobeDataLayer.push((dl) => {
-    dl.addEventListener('adobeDataLayer:change', handlePageTypeChanges, { path: 'pageContext' });
-    dl.addEventListener('adobeDataLayer:change', handleProductChanges, { path: 'productContext' });
     dl.addEventListener('adobeDataLayer:change', handleCategoryChanges, { path: 'categoryContext' });
     dl.addEventListener('adobeDataLayer:change', handleCartChanges, { path: 'shoppingCartContext' });
   });

diff --git a/scripts/delayed.js b/scripts/delayed.js
@@ -28,12 +28,11 @@ if (getConsent('commerce-collection')) {
     storefrontTemplate: 'Franklin',
   };
 
-  window.adobeDataLayer.push(
-    { storefrontInstanceContext: config },
-    { eventForwardingContext: { commerce: true, aep: false } },
-  );
-
-  // Load events SDK and collector
-  import('./commerce-events-sdk.js');
+  // Load events collector
+  window.magentoStorefrontEvents.context.setStorefrontInstance(config);
+  window.magentoStorefrontEvents.context.setEventForwarding({
+    commerce: true,
+    aep: false,
+  });
   import('./commerce-events-collector.js');
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -146,7 +146,7 @@ async function loadEager(doc) {
     await runEager(document, { audiences: AUDIENCES }, pluginContext);
   }
 
-  window.adobeDataLayer = window.adobeDataLayer || [];
+  await import('./commerce-events-sdk.js');
 
   let pageType = 'CMS';
   if (document.body.querySelector('main .product-details')) {
@@ -194,21 +194,17 @@ async function loadEager(doc) {
     pageType = 'Checkout';
   }
 
-  window.adobeDataLayer.push({
-    pageContext: {
-      pageType,
-      pageName: document.title,
-      eventType: 'visibilityHidden',
-      maxXOffset: 0,
-      maxYOffset: 0,
-      minXOffset: 0,
-      minYOffset: 0,
-    },
+  window.magentoStorefrontEvents.context.setPage({
+    pageType,
+    pageName: document.title,
+    eventType: 'visibilityHidden',
+    maxXOffset: 0,
+    maxYOffset: 0,
+    minXOffset: 0,
+    minYOffset: 0,
   });
   if (pageType !== 'Product') {
-    window.adobeDataLayer.push((dl) => {
-      dl.push({ event: 'page-view', eventInfo: { ...dl.getState() } });
-    });
+    window.magentoStorefrontEvents.publish.pageView();
   }
 
   const main = doc.querySelector('main');
@@ -249,11 +245,6 @@ async function loadLazy(doc) {
     loadFonts(),
   ]);
 
-  await import('./acdl/adobe-client-data-layer.min.js');
-  if (sessionStorage.getItem('acdl:debug')) {
-    import('./acdl/validate.js');
-  }
-
   trackHistory();
 
   sampleRUM('lazy');