set timeout for loading gtm component

Author: javiert-okta

src/features/common/components/shell/gtm/safe-gtm.component.tsx

@@ -3,19 +3,23 @@
 import { GoogleTagManager } from "@next/third-parties/google"
 import { useEffect, useState } from "react";
 
-const MAX_URL_LENGTH = 4000;
+const MAX_HASH_LENGTH = 4000;
 
 export function SafeGTM({ gtmId}: { gtmId: string}) {
     const [canLoad, setCanLoad] = useState(false)
 
     useEffect(() => {
-        const urlLength = window.location.href.length
-        const hasLargeToken = urlLength > MAX_URL_LENGTH
-        console.log("url length", urlLength)
-        if(hasLargeToken) {
-            console.warn("GTM disabled: URL too long", urlLength)
+        const hash = window.location.hash
+        const hasLargeHash = hash.length > MAX_HASH_LENGTH
+        let originalHash = ""
+        if(hasLargeHash) {
+            originalHash = hash
+            window.location.hash = ""
+            setTimeout(() => {
+                window.location.hash = originalHash
+            }, 500)
         }
-        setCanLoad(!hasLargeToken)
+        setCanLoad(true)
     }, [])
 
     return canLoad ? <GoogleTagManager gtmId={gtmId} /> : null