chore: split gtm/ga code import

aziontech · Dec 2, 2024 · fd5a5c5 · fd5a5c5
1 parent 2cac3ee
commit fd5a5c5
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 84 deletions.
diff --git a/src/components/html/trd3.astro b/src/components/html/trd3.astro
@@ -1,9 +1,11 @@
 ---
 import Clarity from '~/components/trd3/clarity/index.astro';
 import Hubspot from '~/components/trd3/hubspot/index.astro';
-import GoogleTagManagerScript from '~/components/trd3/google-tag-manager/script.astro';
+import GoogleAnalytics from '~/components/trd3/google/analytics.astro';
+import GoogleTagManager from '~/components/trd3/google/tagmanager.astro';
 ---
 
-<GoogleTagManagerScript />
+<GoogleAnalytics />
+<GoogleTagManager />
 <Clarity />
 <Hubspot />
diff --git a/src/components/trd3/google-tag-manager/script.astro b/src/components/trd3/google-tag-manager/script.astro
diff --git a/src/components/trd3/google/analytics.astro b/src/components/trd3/google/analytics.astro
@@ -0,0 +1,29 @@
+<script is:inline defer type="text/javascript">
+  (function () {
+    if (
+      window.location.origin !== "https://www.azion.com" ||
+      window.location.search.match(/trd3=false/)
+    ) {
+      console.log("Google GTAG: disabled");
+      return;
+    }
+
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag("js", new Date());
+    gtag("config", "G-LNFV74DS0K");
+
+    function load() {
+      let script = document.createElement("script");
+      script.async = true;
+      script.src = "https://www.googletagmanager.com/gtag/js?id=G-LNFV74DS0K";
+      document.head.appendChild(script);
+    }
+
+    setTimeout(load, window.innerWidth >= 1024 ? 2500 : 5000);
+  })();
+</script>
diff --git a/...trd3/google-tag-manager/body-iframe.astro → ...nents/trd3/google/tagmanager-iframe.astro b/...trd3/google-tag-manager/body-iframe.astro → ...nents/trd3/google/tagmanager-iframe.astro
diff --git a/src/components/trd3/google/tagmanager.astro b/src/components/trd3/google/tagmanager.astro
@@ -0,0 +1,46 @@
+<script is:inline defer type="text/javascript">
+  (function () {
+    window.dataLayer = window.dataLayer || [];
+
+    function loadScript() {
+      if (
+        window.location.origin !== "https://www.azion.com" ||
+        window.location.search.match(/trd3=false/)
+      ) {
+        console.log("Google Tag Manager: disabled");
+        return;
+      }
+
+      (function (w, l) {
+        w[l] = w[l] || [];
+        w[l].push({
+          "gtm.start": new Date().getTime(),
+          event: "gtm.js",
+        });
+      })(window, "dataLayer");
+
+      let script = document.createElement("script");
+      script.async = true;
+      script.src = "https://www.googletagmanager.com/gtm.js?id=GTM-NCNDRN2";
+      document.head.appendChild(script);
+    }
+
+    loaded = false;
+    window.addEventListener("load", () => {
+      window.addEventListener("scroll", () => {
+        if (window.scrollY < 100) return;
+        if (loaded) return;
+
+        loadScript();
+        loaded = true;
+      });
+
+      window.addEventListener("mouseover", () => {
+        if (loaded) return;
+
+        loadScript();
+        loaded = true;
+      });
+    });
+  })();
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -5,6 +5,7 @@ import HeadCommon from '~/components/HeadCommon.astro';
 import HeadSEO from '~/components/HeadSEO.astro';
 import LeftSidebar from '~/components/LeftSidebar/LeftSidebar.astro';
 import SidebarPanelMenu from '~/components/sidebarpanelmenu/SidebarPanelMenu.vue';
+import GoogleTagManagerIframe from '~/components/trd3/google/tagmanager-iframe.astro';
 import Trd3 from '~/components/html/trd3.astro';
 
 // @ts-nocheck
@@ -176,6 +177,8 @@ const translatedPages = await (async (c) => {
 	</head>
 
 	<body class="surface-ground">
+		<GoogleTagManagerIframe />
+
 		<script is:inline>
 			const setTheme = (theme) => {
 				const toggleTheme = () => {