[HOLD] 311-adobe-target

scripts/scripts.js

@@ -185,6 +185,91 @@ export function decorateMain(main) {
   decorateBlocks(main);
 }
 
+// Adobe Taget ID
+function targetPageParams() {
+  return {
+    'at_property': '08436c44-3085-b335-a1c4-03f14ae5226a'
+  };
+}
+
+// Adobe Target Code
+function initATJS(path, config) {
+  window.targetGlobalSettings = config;
+  return new Promise((resolve) => {
+    import(path).then(resolve);
+  });
+}
+
+function onDecoratedElement(fn) {
+  // Apply propositions to all already decorated blocks/sections
+  if (document.querySelector('[data-block-status="loaded"],[data-section-status="loaded"]')) {
+    fn();
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((m) => m.target.tagName === 'BODY'
+      || m.target.dataset.sectionStatus === 'loaded'
+      || m.target.dataset.blockStatus === 'loaded')) {
+      fn();
+    }
+  });
+  // Watch sections and blocks being decorated async
+  observer.observe(document.querySelector('main'), {
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-block-status', 'data-section-status'],
+  });
+  // Watch anything else added to the body
+  observer.observe(document.querySelector('body'), { childList: true });
+}
+
+function toCssSelector(selector) {
+  return selector.replace(/(\.\S+)?:eq\((\d+)\)/g, (_, clss, i) => `:nth-child(${Number(i) + 1}${clss ? ` of ${clss})` : ''}`);
+}
+
+async function getElementForOffer(offer) {
+  const selector = offer.cssSelector || toCssSelector(offer.selector);
+  return document.querySelector(selector);
+}
+
+async function getElementForMetric(metric) {
+  const selector = toCssSelector(metric.selector);
+  return document.querySelector(selector);
+}
+
+async function getAndApplyOffers() {
+  const response = await window.adobe.target.getOffers({ request: { execute: { pageLoad: {} } } });
+  const { options = [], metrics = [] } = response.execute.pageLoad;
+  onDecoratedElement(() => {
+    window.adobe.target.applyOffers({ response });
+    // keeping track of offers that were already applied
+    options.forEach((o) => o.content = o.content.filter((c) => !getElementForOffer(c)));
+    // keeping track of metrics that were already applied
+    metrics.map((m, i) => getElementForMetric(m) ? i : -1)
+      .filter((i) => i >= 0)
+      .reverse()
+      .map((i) => metrics.splice(i, 1));
+  });
+}
+
+let atjsPromise = Promise.resolve();
+if (getMetadata('target')) {
+  atjsPromise = initATJS('./at.js', {
+    at_property: '08436c44-3085-b335-a1c4-03f14ae5226a',
+    clientCode: 'danaher',
+    serverDomain: 'danaher.tt.omtrdc.net',
+    imsOrgId: '08333E7B636A2D4D0A495C34@AdobeOrg',
+    bodyHidingEnabled: false,
+    cookieDomain: window.location.hostname,
+    pageLoadEnabled: false,
+    secureOnly: true,
+    viewsEnabled: false,
+    withWebGLRenderer: false,
+  });
+  document.addEventListener('at-library-loaded', () => getAndApplyOffers());
+}
+// Emd of Adobe Target Code
+
 /**
  * Loads everything needed to get to LCP.
  * @param {Element} doc The container element
@@ -195,11 +280,15 @@ async function loadEager(doc) {
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);
-    await decorateTemplates(main);
-    await decorateCategory(main);
-    await decorateNavigation(main);
-    document.body.classList.add('appear');
-    await waitForLCP(LCP_BLOCKS);
+    // wait for atjs to finish loading
+    await atjsPromise;
+    // show the LCP block in a dedicated frame to reduce TBT
+    await new Promise((resolve) => {
+      window.requestAnimationFrame(async () => {
+        await waitForLCP(LCP_BLOCKS);
+        resolve();
+      });
+    });
   }
 
   try {