Change GTM integration to delayed integration

blocks/configurator/configurator.js

@@ -9,8 +9,8 @@
  * [email protected]
  */
 
-import { loadThirdPartyScriptWithoutPartytown } from '../../scripts/load-thirdparty-script.js';
 import { buildBlock, decorateBlock, loadBlock } from '../../scripts/aem.js';
+import { loadScriptDelayed } from '../../scripts/load-resource.js';
 
 const includeScript = false;
 
@@ -44,7 +44,7 @@ export default async function decorate(block) {
 
   // load script
   if (includeScript) {
-    loadThirdPartyScriptWithoutPartytown(
+    loadScriptDelayed(
       `https://portal.combeenation.com/plugin/EDER/${configuratorCode}`,
     )
       .then();

blocks/embed/embed.js

@@ -18,8 +18,8 @@
  * @see https://github.com/adobe/aem-block-collection/tree/main/blocks/embed
  */
 
-import { betterLoadScript } from '../../scripts/load-resource.js';
 import { handleTranslate } from '../../scripts/i18n.js';
+import { loadScriptDelayed } from '../../scripts/load-resource.js';
 
 const getDefaultEmbed = (url, block) => {
   // Set default height and width
@@ -74,7 +74,7 @@ const embedVimeo = (url, autoplay) => {
 };
 
 const embedTwitter = (url) => {
-  betterLoadScript('https://platform.twitter.com/widgets.js')
+  loadScriptDelayed('https://platform.twitter.com/widgets.js')
     .then();
   return `<blockquote class="twitter-tweet"><a href="${url.href}"></a></blockquote>`;
 };

blocks/thirdparty/thirdparty.js

@@ -9,15 +9,11 @@
  * [email protected]
  */
 
-import {
-  createThirdPartyRelatedScriptTag,
-  loadThirdPartyScript,
-  loadThirdPartyScriptWithoutPartytown,
-} from '../../scripts/load-thirdparty-script.js';
+import { createThirdPartyRelatedScriptTag, loadThirdPartyScript } from '../../scripts/load-thirdparty-script.js';
 import {
   getCurrentUrl, hasUrlParam, isLocal, isTest, transformRowsToData,
 } from '../../scripts/helpers.js';
-import { betterLoadScript } from '../../scripts/load-resource.js';
+import { loadScriptDelayed } from '../../scripts/load-resource.js';
 
 /**
  * Load usercentrics
@@ -32,11 +28,8 @@ function loadUsercentrics(id) {
         it works with partytown but settings button in footer doesn't work
       If we use "loader.js" with "betterLoadScript":
         everything works but without partytown loading to a lower lighthouse score
-      If we use "loadThirdPartyScriptWithoutPartytown"
-        the script will load too late
-      So we use "betterLoadScript" for now.
    */
-  return betterLoadScript(
+  return loadScriptDelayed(
     'https://app.usercentrics.eu/browser-ui/latest/loader.js',
     {
       id: 'usercentrics-cmp',
@@ -53,26 +46,21 @@ function loadUsercentrics(id) {
  */
 function loadUserlike(id) {
   // FIXME we already contacted userlike to provide support for partytown, they did not respond yet
-  return loadThirdPartyScriptWithoutPartytown(
+  return loadScriptDelayed(
     `https://userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/${id}.js`,
   );
 }
 
 /**
  * Init data layer
- *
- * @param {string} id
  */
-function initDataLayer(id) {
-  window.dataLayer = window.dataLayer || [];
-
-  window.gtag = function gtag() {
-    // eslint-disable-next-line prefer-rest-params
-    window.dataLayer.push(arguments);
-  };
-
-  window.gtag('js', new Date());
-  window.gtag('config', id);
+function initDataLayer() {
+  const dataLayerName = 'dataLayer';
+  window[dataLayerName] = window[dataLayerName] || [];
+  window[dataLayerName].push({
+    'gtm.start': new Date().getTime(),
+    event: 'gtm.js',
+  });
 }
 
 /**
@@ -87,16 +75,16 @@ function loadGoogleTagManager(id) {
    *   we can switch to serving GTM normally here
    */
   const usePartyTownForGTM = false;
-  const gtmUrl = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+  const gtmUrl = `https://www.googletagmanager.com/gtm.js?id=${id}`;
   if (!usePartyTownForGTM || hasUrlParam('gtm_debug') || sessionStorage.getItem('gtm_debug')) {
     sessionStorage.setItem('gtm_debug', '1');
-    initDataLayer(id);
-    betterLoadScript(gtmUrl).then();
+    initDataLayer();
+    loadScriptDelayed(gtmUrl).then();
     return Promise.resolve();
   }
   return Promise.all(
     [
-      createThirdPartyRelatedScriptTag(`${initDataLayer.toString()} ${initDataLayer.name}('${id}');`),
+      createThirdPartyRelatedScriptTag(`${initDataLayer.toString()} ${initDataLayer.name}();`),
       loadThirdPartyScript(gtmUrl),
     ],
   );
@@ -153,7 +141,7 @@ function loadAdobeAnalytics(url) {
 
   // load URL
   // FIXME use "loadThirdPartyScript" as soon as Adobe Analytics uses the correct CORS headers
-  return loadThirdPartyScriptWithoutPartytown(url);
+  return loadScriptDelayed(url);
 }
 
 /**

scripts/load-resource.js

@@ -119,6 +119,29 @@ async function betterLoadScript(href, attrs) {
   });
 }
 
+/**
+ * Load delayed scripts (for example for third party scripts, see delayed.js)
+ *
+ * @param {String} url
+ * @param {Object} [attrs] additional optional attributes
+ * @returns {Promise}
+ */
+async function loadScriptDelayed(url, attrs) {
+  const finalizedAttrs = {
+    ...(attrs || {}),
+    defer: '',
+  };
+
+  return new Promise((resolve) => {
+    setTimeout(
+      () => {
+        resolve(betterLoadScript(url, finalizedAttrs));
+      },
+      3000,
+    );
+  });
+}
+
 /**
  * Load third party module
  *
@@ -241,6 +264,7 @@ async function clearFetchCache() {
 
 export {
   createScriptTag,
+  loadScriptDelayed,
   betterLoadScript,
   betterLoadCSS,
   loadThirdPartyBundle,

scripts/load-thirdparty-script.js

@@ -71,24 +71,6 @@ function loadThirdPartyScript(script, attrs) {
     });
 }
 
-/**
- * Load third party script without partytown
- *
- * @param {String} url
- * @returns {Promise}
- */
-function loadThirdPartyScriptWithoutPartytown(url) {
-  // FIXME we use setTimeout here to enhance the LH score
-  return new Promise((resolve) => {
-    setTimeout(
-      () => {
-        resolve(betterLoadScript(url, { defer: '' }));
-      },
-      2000,
-    );
-  });
-}
-
 /**
  * Create third party related script tag
  *
@@ -110,6 +92,5 @@ function createThirdPartyRelatedScriptTag(scriptContent) {
 
 export {
   loadThirdPartyScript,
-  loadThirdPartyScriptWithoutPartytown,
   createThirdPartyRelatedScriptTag,
 };