feat: intergate websdk (#477)

.eslintignore

@@ -1,3 +1,4 @@
 helix-importer-ui
 tools/sitemap
 solutions/plugins/experimentation
+solutions/vendor

head.html

@@ -1,6 +1,6 @@
 <meta name="referrer" content="no-referrer-when-downgrade" />
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <script src="/solutions/scripts/lib-franklin.js" type="module"></script>
-<script src="/solutions/scripts/utils/utils.js" type="module"></script>
+<script src="/solutions/scripts/utils.js" type="module"></script>
 <script src="/solutions/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/solutions/styles/styles.css"/>

solutions/blocks/footer/footer.js

@@ -1,5 +1,5 @@
 import { decorateIcons, getMetadata } from '../../scripts/lib-franklin.js';
-import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js';
+import { adobeMcAppendVisitorId } from '../../scripts/utils.js';
 
 function wrapImgsInLinks(container) {
   const pictures = container.querySelectorAll('picture');

solutions/blocks/header/header.js

@@ -3,7 +3,7 @@ import {
 } from '../../scripts/lib-franklin.js';
 
 import { decorateBlockWithRegionId, decorateLinkWithLinkTrackingId } from '../../scripts/scripts.js';
-import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js';
+import { adobeMcAppendVisitorId } from '../../scripts/utils.js';
 
 function createLoginModal() {
   const loginModal = document.querySelector('nav > div:nth-child(4)');

solutions/blocks/hero/hero.js

@@ -4,7 +4,7 @@ import {
   createNanoBlock,
   renderNanoBlocks,
   fetchProduct,
-} from '../../scripts/utils/utils.js';
+} from '../../scripts/utils.js';
 
 /**
  * Builds hero block and prepends to main in a new section.

solutions/blocks/product-comparison-table/product-comparison-table.js

@@ -1,4 +1,4 @@
-import { createNanoBlock, renderNanoBlocks, fetchProduct } from '../../scripts/utils/utils.js';
+import { createNanoBlock, renderNanoBlocks, fetchProduct } from '../../scripts/utils.js';
 
 const fetchedProducts = [];
 

solutions/blocks/products/products.js

@@ -3,7 +3,7 @@ import {
   renderNanoBlocks,
   fetchProduct,
   createTag,
-} from '../../scripts/utils/utils.js';
+} from '../../scripts/utils.js';
 
 import { trackProduct } from '../../scripts/scripts.js';
 

solutions/blocks/quote-carousel/quote-carousel.js

@@ -1,4 +1,4 @@
-import { createTag } from '../../scripts/utils/utils.js';
+import { createTag } from '../../scripts/utils.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 
 const SLIDE_PREFIX = 'carousel-slide-';

solutions/blocks/quote/quote.js

@@ -1,4 +1,4 @@
-import { createTag } from '../../scripts/utils/utils.js';
+import { createTag } from '../../scripts/utils.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 
 function createQuote(item) {

solutions/scripts/analytics.js

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+export async function updateUserConsentStatus(isConsentGiven) {
+  // eslint-disable-next-line no-undef
+  if (!alloy) {
+    // eslint-disable-next-line no-console
+    console.warn('Alloy is not initialized, cannot update consent status');
+    return Promise.resolve();
+  }
+
+  const consentObject = {
+    consent: [{
+      standard: 'Adobe',
+      version: '1.0',
+      value: {
+        general: isConsentGiven ? 'in' : 'out',
+      },
+    }],
+  };
+
+  // eslint-disable-next-line no-undef
+  return alloy('setConsent', consentObject);
+}
+
+async function trackAnalyticsEvent(xdmObject, eventData) {
+  // eslint-disable-next-line no-undef
+  if (!alloy) {
+    // eslint-disable-next-line no-console
+    console.warn('Alloy is not initialized, cannot send analytics event');
+    return Promise.resolve();
+  }
+
+  // eslint-disable-next-line no-undef
+  return alloy('sendEvent', {
+    documentUnloading: true,
+    xdm: xdmObject,
+    data: eventData,
+  });
+}
+
+function generateAlloyConfigObject(targetDocument, datastreamConfig) {
+  const { hostname } = targetDocument.location;
+  return {
+    debugEnabled: hostname.startsWith('localhost') || hostname.includes('--'),
+    clickCollectionEnabled: true,
+    defaultConsent: 'pending',
+    ...datastreamConfig,
+  };
+}
+
+function generateAlloyInitializationScript() {
+  return `!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||[]).push(o),n[o]=
+  function(){var u=arguments;return new Promise(function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}(window,["alloy"]);`;
+}
+
+function injectScriptIntoDocument(targetDocument, targetElement, scriptContent, scriptType = 'text/javascript') {
+  const script = targetDocument.createElement('script');
+  script.type = scriptType;
+  script.innerHTML = scriptContent;
+  targetElement.appendChild(script);
+  return script;
+}
+
+export async function loadAnalytics(targetDocument, datastreamConfig) {
+  injectScriptIntoDocument(document, document.body, generateAlloyInitializationScript());
+
+  // eslint-disable-next-line no-undef
+  if (!alloy) {
+    // eslint-disable-next-line no-console
+    console.warn('Alloy is not initialized, cannot setup analytics tracking');
+    return;
+  }
+
+  import('../vendor/adobe/adobe-client-data-layer.min.js');
+  import('../vendor/adobe/alloy.min.js');
+
+  // eslint-disable-next-line no-undef
+  alloy('configure', generateAlloyConfigObject(targetDocument, datastreamConfig));
+
+  // Setup Adobe Data Layer if not already present
+  if (typeof window.adobeDataLayer === 'undefined') {
+    window.adobeDataLayer = [];
+  }
+
+  window.adobeDataLayer.push((dataLayer) => {
+    dataLayer.addEventListener('adobeDataLayer:event', (event) => {
+      trackAnalyticsEvent(event.eventInfo);
+    });
+  });
+}

solutions/scripts/breadcrumbs.js

@@ -2,7 +2,7 @@ import {
   createTag,
   fetchIndex,
   fixExcelFilterZeroes,
-} from './utils/utils.js';
+} from './utils.js';
 
 // eslint-disable-next-line import/no-cycle
 import { decorateBlockWithRegionId } from './scripts.js';

solutions/scripts/delayed.js

@@ -15,7 +15,7 @@ import {
   openUrlForOs,
 } from './scripts.js';
 import { loadBreadcrumbs } from './breadcrumbs.js';
-import { onAdobeMcLoaded } from './utils/utils.js';
+import { onAdobeMcLoaded } from './utils.js';
 
 // Core Web Vitals RUM collection
 sampleRUM('cwv');

solutions/scripts/scripts.js

@@ -17,7 +17,9 @@ import {
 import {
   adobeMcAppendVisitorId,
   createTag,
-} from './utils/utils.js';
+} from './utils.js';
+
+import { loadAnalytics } from './analytics.js';
 
 const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list
 const TRACKED_PRODUCTS = [];
@@ -28,7 +30,7 @@ export const DEFAULT_LANGUAGE = 'en';
 export const SUPPORTED_COUNTRIES = ['au'];
 export const DEFAULT_COUNTRY = 'au';
 
-export const METADATA_ANAYTICS_TAGS = 'analytics-tags';
+export const METADATA_ANALYTICS_TAGS = 'analytics-tags';
 
 const HREFLANG_MAP = [
   ['en-ro', { baseUrl: 'https://www.bitdefender.ro', pageType: '.html' }],
@@ -222,7 +224,7 @@ export function getTags(tags) {
 export function trackProduct(product) {
   // eslint-disable-next-line max-len
   const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId);
-  const tags = getTags(getMetadata(METADATA_ANAYTICS_TAGS));
+  const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS));
   const isTrackedPage = tags.includes('product') || tags.includes('service');
   if (isTrackedPage && !isDuplicate) TRACKED_PRODUCTS.push(product);
 }
@@ -465,7 +467,7 @@ function pushPageLoadToDataLayer() {
   const { domain, domainPartsCount } = getDomainInfo(hostname);
   const languageCountry = getLanguageCountryFromPath(window.location.pathname);
   const environment = getEnvironment(hostname, languageCountry.country);
-  const tags = getTags(getMetadata(METADATA_ANAYTICS_TAGS));
+  const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS));
 
   const experimentDetails = getExperimentDetails();
 
@@ -570,8 +572,16 @@ async function loadPage() {
   await loadEager(document);
   await window.hlx.plugins.load('lazy');
   await loadLazy(document);
+
+  const setupAnalytics = loadAnalytics(document, {
+    edgeConfigId: '7275417f-3870-465c-af3e-84f8f4670b3c',
+    orgId: '0E920C0F53DA9E9B0A490D45@AdobeOrg',
+  });
+
   adobeMcAppendVisitorId('main');
+
   loadDelayed();
+  await setupAnalytics;
 }
 
 loadPage();

solutions/scripts/utils/utils.js → solutions/scripts/utils.js

@@ -1,5 +1,3 @@
-import { getMetadata } from '../lib-franklin.js';
-
 const cacheResponse = new Map();
 const FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax';
 
@@ -52,24 +50,19 @@ async function findProductVariant(cachedResponse, variant) {
  */
 export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) {
   const data = new FormData();
-  let pidFromUrl;
-  let pidFromMetadata;
   // extract pid from url
   if (!pid) {
     const url = new URL(window.location.href);
-    pidFromUrl = url.searchParams.get('pid');
-  }
-
-  if (!pidFromUrl) {
-    pidFromMetadata = getMetadata('pid');
+    // eslint-disable-next-line no-param-reassign
+    pid = url.searchParams.get('pid');
   }
 
   data.append('data', JSON.stringify({
     ev: 1,
     product_id: code,
     config: {
       extra_params: {
-        pid: pidFromUrl || pidFromMetadata,
+        pid,
       },
     },
   }));