TDW-2277 Decrease ad load times

scripts/delayed.js

@@ -568,10 +568,7 @@
   if (userButton) userButton.replaceWith(userButton.cloneNode(true));
   const favoriteButtons = document.querySelectorAll('.leaderboard-favorite-button');
   if (favoriteButtons) favoriteButtons.forEach((btn) => btn.replaceWith(btn.cloneNode(true)));
-  loadScript(
-    'https://cdns.gigya.com/JS/socialize.js?apikey=3__4H034SWkmoUfkZ_ikv8tqNIaTA0UIwoX5rsEk96Ebk5vkojWtKRZixx60tZZdob',
-    setupGigya,
-  );
+  loadScript('https://cdns.gigya.com/JS/socialize.js?apikey=3__4H034SWkmoUfkZ_ikv8tqNIaTA0UIwoX5rsEk96Ebk5vkojWtKRZixx60tZZdob', setupGigya);
 }
 
 initGigya();
@@ -660,7 +657,8 @@
   return null;
 }
 
-async function OptanonWrapper() {
+const OptanonWrapper = (async function () {
+  console.log('test');
   const geoInfo = window.Optanon.getGeolocationData();
   Object.keys(geoInfo).forEach((key) => {
     const cookieName = `PGAT_${key.charAt(0).toUpperCase() + key.slice(1)}`;
@@ -681,39 +679,41 @@
     }
   }
   sendAnalyticsPageEvent();
-}
-
-const otId = placeholders.onetrustId;
-if (otId) {
-  const cookieScript = loadScript('https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
-  cookieScript.setAttribute('data-domain-script', `${otId}${isProd ? '' : '-test'}`);
-  cookieScript.setAttribute('data-dlayer-name', 'dataLayer');
-  cookieScript.setAttribute('data-nscript', 'beforeInteractive');
-
-  const gtmId = placeholders.googletagmanagerId;
-  if (gtmId) {
-    const GTMScript = document.createElement('script');
-    GTMScript.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+});
+
+export const loadAds = (function () {
+  const otId = placeholders.onetrustId;
+  if (otId) {
+    const cookieScript = loadScript('https://cdn.cookielaw.org/scripttemplates/otSDKStub.js');
+    cookieScript.setAttribute('data-domain-script', `${otId}${isProd ? '' : '-test'}`);
+    cookieScript.setAttribute('data-dlayer-name', 'dataLayer');
+    cookieScript.setAttribute('data-nscript', 'beforeInteractive');
+
+    const gtmId = placeholders.googletagmanagerId;
+    if (gtmId) {
+      const GTMScript = document.createElement('script');
+      GTMScript.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','${gtmId}');`;
-    document.head.append(GTMScript);
+      document.head.append(GTMScript);
 
-    const GTMFrame = document.createElement('no-script');
-    GTMFrame.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmId}"
+      const GTMFrame = document.createElement('no-script');
+      GTMFrame.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${gtmId}"
     height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
-    document.body.prepend(GTMFrame);
-  }
+      document.body.prepend(GTMFrame);
+    }
 
-  window.OptanonWrapper = OptanonWrapper;
+    window.OptanonWrapper = OptanonWrapper;
 
-  if (document.querySelector('.marketing')) {
-    const marketingBlock = document.querySelector('.marketing');
-    decorateBlock(marketingBlock);
-    loadBlock(marketingBlock);
+    if (document.querySelector('.marketing')) {
+      const marketingBlock = document.querySelector('.marketing');
+      decorateBlock(marketingBlock);
+      loadBlock(marketingBlock);
+    }
   }
-}
+});
 
 async function loadLiveChat() {
   const liveChat = getMetadata('live-chat');

scripts/scripts.js

@@ -10,6 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+// eslint-disable-next-line import/no-cycle
+import { loadAds } from './delayed.js';
+
 /**
  * log RUM if part of the sample.
  * @param {string} checkpoint identifies the checkpoint in funnel
@@ -1069,6 +1072,7 @@ async function loadLazy(doc) {
   addFavIcon(`${window.hlx.codeBasePath}/styles/favicon.ico`);
 
   doc.querySelectorAll('div:not([class]):not([id]):empty').forEach((empty) => empty.remove());
+  loadAds();
 }
 
 /**