From 61727eaa37c93f88a359285095a7b3531d4e1b0c Mon Sep 17 00:00:00 2001
From: trungbach <trunga2k29@gmail.com>
Date: Fri, 3 Jan 2025 15:33:57 +0700
Subject: [PATCH] feat: dynamically load Google Tag Manager script after app
 render

---
 index.html    |  6 +++---
 src/index.tsx | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index e0eae36e8..0efff91cd 100644
--- 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>
+    <!-- <script defer 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
index 984856cb6..4b1579580 100644
--- 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();