Merge pull request #95 from deriv-com/sandeep/gtm-defer

fix: 🔥 push hash using react-router-dom
deriv-com · Oct 21, 2024 · ca22f67 · ca22f67
2 parents 79a0ed9 + cea44ea
commit ca22f67
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -10,36 +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.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
@@ -49,8 +49,20 @@ const router = createBrowserRouter(
 
 function App() {
     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' });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     return (

diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import DesktopWrapper from '@/components/shared_ui/desktop-wrapper';
 import Dialog from '@/components/shared_ui/dialog';
 import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
@@ -51,6 +51,7 @@ const AppWrapper = observer(() => {
     const hash = ['dashboard', 'bot_builder', 'chart', 'tutorial'];
     const { isDesktop } = useDevice();
     const location = useLocation();
+    const navigate = useNavigate();
 
     let tab_value: number | string = active_tab;
     const GetHashedValue = (tab: number) => {
@@ -86,7 +87,7 @@ const AppWrapper = observer(() => {
             if (!isDesktop) handleTabChange(Number(active_hash_tab));
             init_render.current = false;
         } else {
-            window.location.hash = hash[active_tab] || hash[0];
+            navigate(`#${hash[active_tab] || hash[0]}`);
         }
         if (active_tour !== '') {
             setActiveTour('');