feat: add alloy and related scripts (#433)

.eslintignore

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

404.html

@@ -11,8 +11,8 @@
   <meta property="og:title" content="Page not found">
   <script src="/solutions/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
   <script type="module">
-    import { decorateButtons, sampleRUM } from '/solutions/scripts/lib-franklin.js';
-  
+    import { decorateButtons, sampleRUM } from '/solutions/scripts/aem.js';
+
     window.addEventListener('load', async () => {
       const response = await fetch('/solutions/404.plain.html');
       if (response.ok) {
@@ -23,7 +23,7 @@
       }
       sampleRUM('404', { source: document.referrer, target: window.location.href });
     });
-  </script>  
+  </script>
   <link rel="stylesheet" href="/solutions/styles/styles.css">
   <style>
 
@@ -67,7 +67,7 @@
       font-weight: var(--font-weight-bold);
     }
 
-   
+
 /* Default styles (mobile-first) */
 
 main .link-section {
@@ -91,10 +91,10 @@
 
 .link-section > div:last-child {
   margin-top: 1rem;
-  column-count: 1; 
+  column-count: 1;
   width: 100%;
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
   align-items: center;
 }
 
@@ -126,7 +126,7 @@
 
   .link-section > div:last-child {
     column-count: 2;
-    display: block; 
+    display: block;
     align-items: initial;
   }
 }
@@ -146,7 +146,7 @@ <h2 class="error-message">Page Not Found</h2>
       <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
     </div>
     <div class="link-section">
-    </div>  
+    </div>
   </main>
   <footer></footer>
 </body>

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/aem.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"/>
+<link rel="stylesheet" href="/solutions/styles/styles.css"/>

solutions/blocks/awards-search/awards-search.js

@@ -1,4 +1,4 @@
-import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
+import { createOptimizedPicture } from '../../scripts/aem.js';
 
 let awardsData = [];
 let filteredAwards = [];

solutions/blocks/cards/cards.js

@@ -1,4 +1,4 @@
-import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
+import { createOptimizedPicture } from '../../scripts/aem.js';
 
 export default function decorate(block) {
   /* change to ul, li */

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 { decorateIcons, getMetadata } from '../../scripts/aem.js';
+import { adobeMcAppendVisitorId } from '../../scripts/utils.js';
 
 function wrapImgsInLinks(container) {
   const pictures = container.querySelectorAll('picture');

solutions/blocks/fragment-metadata/fragment-metadata.js

@@ -1,4 +1,4 @@
-import { readBlockConfig } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/aem.js';
 import { openUrlForOs } from '../../scripts/scripts.js';
 
 export default function decorate(block) {

solutions/blocks/header/header.js

@@ -1,9 +1,9 @@
 import {
   getMetadata, decorateIcons, decorateButtons, decorateTags,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.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,5 +1,5 @@
-import { createTag } from '../../scripts/utils/utils.js';
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { createTag } from '../../scripts/utils.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 const SLIDE_PREFIX = 'carousel-slide-';
 const CONTROL_PREFIX = 'carousel-control-';

solutions/blocks/quote/quote.js

@@ -1,5 +1,5 @@
-import { createTag } from '../../scripts/utils/utils.js';
-import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { createTag } from '../../scripts/utils.js';
+import { decorateIcons } from '../../scripts/aem.js';
 
 function createQuote(item) {
   const paragraphs = Array.from(item.querySelectorAll('p'));

solutions/blocks/sticky-navigation/sticky-navigation.js

@@ -1,4 +1,4 @@
-import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/lib-franklin.js';
+import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/aem.js';
 
 function scrollToAnchorWithOffset(anchorId) {
   const anchorElement = document.getElementById(anchorId);

solutions/blocks/tabs/tabs.js

@@ -7,7 +7,7 @@
 
 import {
   readBlockConfig,
-} from '../../scripts/lib-franklin.js';
+} from '../../scripts/aem.js';
 
 function isMobileScreenSize() {
   const isDesktop = window.matchMedia('(min-width: 900px)');

solutions/scripts/analytics.js

@@ -0,0 +1,101 @@
+/*
+ * 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) => {
+      // eslint-disable-next-line no-console
+      console.debug('Event tracked:', JSON.stringify(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

@@ -4,7 +4,7 @@ import {
   sampleRUM,
   fetchPlaceholders,
   getMetadata,
-} from './lib-franklin.js';
+} from './aem.js';
 
 // eslint-disable-next-line import/no-cycle
 import {
@@ -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/onetrust.js

@@ -0,0 +1,58 @@
+import { loadScript } from './aem.js';
+import { updateUserConsentStatus } from './analytics.js';
+
+const CHECK_INTERVAL = 100;
+const MAX_TRIES = 50;
+
+function handleConsentChange(event) {
+  if (event && Array.isArray(event.detail) && window.Optanon) {
+    const hasConsent = window.OptanonActiveGroups.includes('C0002');
+    updateUserConsentStatus(hasConsent);
+    if (!window.adobeDataLayer) {
+      window.adobeDataLayer = [];
+    }
+    window.adobeDataLayer.push({ event: 'OneTrustOnConsentChanged' });
+  }
+}
+
+function checkAndSetInitialConsent() {
+  const isConsentDone = document.cookie.match(/(?:^|;\s*)OptanonAlertBoxClosed=([^;]*)/);
+  if (isConsentDone && window.Optanon && window.OptanonActiveGroups.includes('C0002')) {
+    updateUserConsentStatus(true);
+  }
+}
+
+function initializeConsentProcessing() {
+  checkAndSetInitialConsent();
+  window.Optanon.OnConsentChanged(handleConsentChange);
+}
+
+function waitForOneTrustAndInitialize() {
+  let tries = 0;
+
+  const interval = setInterval(() => {
+    if (window.Optanon && window.OptanonActiveGroups) {
+      clearInterval(interval);
+      initializeConsentProcessing();
+    } else if (tries >= MAX_TRIES) {
+      // eslint-disable-next-line no-console
+      console.error('OneTrust not available');
+      clearInterval(interval);
+    }
+    tries += 1;
+  }, CHECK_INTERVAL);
+}
+
+export default function loadOneTrust(domainID) {
+  // eslint-disable-next-line no-console
+  console.debug(`Loading OneTrust with ID: ${domainID}`);
+  const attrs = {
+    'data-domain-script': `${domainID}`,
+    'data-layer-name': 'adobeDataLayer',
+  };
+  loadScript(`/solutions/vendor/onetrust/consent/${domainID}/otSDKStub.js`, {
+    type: 'text/javascript',
+    charset: 'UTF-8',
+    ...attrs,
+  }).then(waitForOneTrustAndInitialize);
+}