refactor: 🔥 added gtm and related scripts

deriv-com · Oct 16, 2024 · 4c2b13c · 4c2b13c
1 parent f1d2648
commit 4c2b13c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,36 @@
                 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.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="root"></div>
     </body>

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,4 +1,5 @@
 import { Fragment, lazy, Suspense } from 'react';
+import React from 'react';
 import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router-dom';
 import RoutePromptDialog from '@/components/route-prompt-dialog';
 import Endpoint from '@/pages/endpoint';
@@ -47,6 +48,11 @@ const router = createBrowserRouter(
 );
 
 function App() {
+    React.useEffect(() => {
+        window?.dataLayer?.push({ event: 'page_load' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <Fragment>
             <RouterProvider router={router} />