From 5ee70f8947388dba52803b084bfbd6655ce77215 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 18 Oct 2024 14:56:00 +0800 Subject: [PATCH 1/3] fix: :fire: push hash using react-router-dom --- index.html | 1 + src/pages/main/main.tsx | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 9a39eced..2ba2a864 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ 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'); diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index e2af41eb..b9abcede 100644 --- 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'; @@ -52,6 +52,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) => { @@ -87,7 +88,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 (tour_list[active_tab] !== active_tour) { setActiveTour(''); From a91cc2df094ec72a44eb6ba1fcea5e05543a6951 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Fri, 18 Oct 2024 17:21:53 +0800 Subject: [PATCH 2/3] chore: :fire: disable gtm to check web-vital effects on loading --- index.html | 8 ++++---- src/app/App.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 2ba2a864..2339444c 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ font-size: 62.5%; } - + - + > --> diff --git a/src/app/App.tsx b/src/app/App.tsx index b19c4426..ab160208 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -48,10 +48,10 @@ const router = createBrowserRouter( ); function App() { - React.useEffect(() => { - window?.dataLayer?.push({ event: 'page_load' }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + // React.useEffect(() => { + // window?.dataLayer?.push({ event: 'page_load' }); + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, []); return ( From cea44ea838c72434c4d3870188019a8e2705e886 Mon Sep 17 00:00:00 2001 From: Sandeep Date: Mon, 21 Oct 2024 10:26:17 +0800 Subject: [PATCH 3/3] refactor: :fire: removed GTM from index and adding it dynamically on initial load --- index.html | 28 ---------------------------- src/app/App.tsx | 20 ++++++++++++++++---- 2 files changed, 16 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 2339444c..f2136c66 100644 --- a/index.html +++ b/index.html @@ -10,37 +10,9 @@ font-size: 62.5%; } - - - - -
diff --git a/src/app/App.tsx b/src/app/App.tsx index ab160208..ba8741e5 100644 --- 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 (