add safe gtm component

Author: javiert-okta

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

@@ -0,0 +1,21 @@
+'use client'
+
+import { GoogleTagManager } from "@next/third-parties/google"
+import { useEffect, useState } from "react";
+
+const MAX_URL_LENGTH = 8000;
+
+export function SafeGTM({ gtmId}: { gtmId: string}) {
+    const [canLoad, setCanLoad] = useState(false)
+
+    useEffect(() => {
+        const urlLength = window.location.href.length
+        const hasLargeToken = urlLength > MAX_URL_LENGTH
+        if(hasLargeToken) {
+            console.warn("GTM disabled: URL too long", urlLength)
+        }
+        setCanLoad(!hasLargeToken)
+    }, [])
+
+    return canLoad ? <GoogleTagManager gtmId={gtmId} /> : null
+}

src/features/common/components/shell/shell.component.tsx

@@ -12,7 +12,6 @@ import { COOKIE_LEVELS } from "@/features/analytics/models/cookie-levels.constan
 import { OnetrustScriptComponent } from "@/features/analytics/components/onetrust-script.component";
 import { CLIENT_CONFIG } from "@/features/analytics/services/config";
 import { COOKIE_CONSENT_STATUS } from "@/features/analytics/models/cookie-consent-status.constants";
-import { GoogleTagManager } from "@next/third-parties/google";
 import styles from "./shell.module.scss";
 import { UiLocalizationService } from "@/features/localization/services/ui-localization.service";
 import { clsx } from "clsx";
@@ -27,6 +26,7 @@ import { ThemeDetectorComponent } from "@/features/common/components/theme-detec
 import { ThemeCookieValues } from "@/features/common/values/theme.values";
 import { AbTestingScriptComponent } from "@/features/analytics/components/ab-testing-script/ab-testing-script.component";
 import AdobeAnalyticsScript from "@/features/analytics/components/adobe-analytics-script.component";
+import { SafeGTM } from "./gtm/safe-gtm.component";
 
 const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
 
@@ -113,7 +113,7 @@ export const ShellComponent: React.FC<ShellComponentProps> = ({
         process.env.NEXT_PUBLIC_IS_PROD &&
         GTM_ID && (
           <>
-            <GoogleTagManager gtmId={GTM_ID} />
+            <SafeGTM gtmId={GTM_ID} />
             <AbTestingScriptComponent />
           </>
         )}