Merge pull request #1117 from oraidex/feat/improve-ui-loading

feat: dynamically load Google Tag Manager script after app render
oraidex · Jan 3, 2025 · 0c73521 · 0c73521
2 parents 457317a + 4091947
commit 0c73521
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -4,15 +4,15 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.svg" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script>
+    <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
       gtag('js', new Date());
       gtag('config', 'G-8T22XRLHXY');
-    </script>
+    </script> -->
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <title>%VITE_APP_SITE_TITLE%</title>
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -92,3 +92,26 @@ const initApp = async () => {
 };
 
 initApp();
+
+// Dynamically load the Google Tag Manager script after the app has rendered
+const loadGTM = () => {
+  const script = document.createElement('script');
+  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY';
+  script.defer = true;
+  document.head.appendChild(script);
+
+  script.onload = () => {
+    // @ts-ignore
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      // @ts-ignore
+      window.dataLayer.push(arguments);
+    }
+    // @ts-ignore
+    gtag('js', new Date());
+    // @ts-ignore
+    gtag('config', 'G-8T22XRLHXY');
+  };
+};
+
+loadGTM();