refactor: 🔥 removed GTM from index and adding it dynamically on initi…

…al load
deriv-com · Oct 21, 2024 · cea44ea · cea44ea
1 parent a91cc2d
commit cea44ea
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -10,37 +10,9 @@
                 font-size: 62.5%;
             }
         </style>
-        <!-- 
-        <script>
-            (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.defer = true;
-                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
-                f.parentNode.insertBefore(j, f);
-            })(window, document, 'script', 'dataLayer', 'GTM-NF7884S');
-        </script> -->
     </head>
 
     <body class="body theme theme--light">
-        <!-- Google Tag Manager (noscript) -->
-        <!-- <noscript
-            ><iframe
-                src="https://www.googletagmanager.com/ns.html?id=GTM-NF7884S"
-                height="0"
-                width="0"
-                style="display: none; visibility: hidden"
-            ></iframe
-        ></noscript> -->
-        <!-- End Google Tag Manager (noscript) -->
-
         <div id="modal_root" class="modal-root"></div>
         <div id="popup_root" class="popup-root"></div>
         <div id="root"></div>

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -48,10 +48,22 @@ const router = createBrowserRouter(
 );
 
 function App() {
-    // React.useEffect(() => {
-    //     window?.dataLayer?.push({ event: 'page_load' });
-    //     // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, []);
+    React.useEffect(() => {
+        const loadGTM = () => {
+            if (!window.dataLayer) {
+                window.dataLayer = window.dataLayer || [];
+                window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+
+                const script = document.createElement('script');
+                script.async = true;
+                script.src = `https://www.googletagmanager.com/gtm.js?id='GTM-NF7884S'`;
+                document.head.appendChild(script);
+            }
+        };
+
+        loadGTM();
+        window?.dataLayer?.push({ event: 'page_load' });
+    }, []);
 
     return (
         <Fragment>