🐛 fix(analytics): prevent multiple GTM initializations (#4174)

* feat(types): Add global window interface for Google Tag Manager

* refactor(Chat/Footer): Move GTM initialization to useEffect for better lifecycle management

* fix(hooks): add useEffect to initialize TagManager conditionally

client/src/common/types.ts

@@ -540,3 +540,9 @@ export type TVectorStore = {
 };
 
 export type TThread = { id: string; createdAt: string };
+
+declare global {
+  interface Window {
+    google_tag_manager?: unknown;
+  }
+}

client/src/components/Chat/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import TagManager from 'react-gtm-module';
 import { Constants } from 'librechat-data-provider';
@@ -34,13 +34,6 @@ export default function Footer({ className }: { className?: string }) {
     </a>
   );
 
-  if (config?.analyticsGtmId != null) {
-    const tagManagerArgs = {
-      gtmId: config.analyticsGtmId,
-    };
-    TagManager.initialize(tagManagerArgs);
-  }
-
   const mainContentParts = (
     typeof config?.customFooter === 'string'
       ? config.customFooter
@@ -50,6 +43,15 @@ export default function Footer({ className }: { className?: string }) {
         localize('com_ui_latest_footer')
   ).split('|');
 
+  useEffect(() => {
+    if (config?.analyticsGtmId != null && typeof window.google_tag_manager === 'undefined') {
+      const tagManagerArgs = {
+        gtmId: config.analyticsGtmId,
+      };
+      TagManager.initialize(tagManagerArgs);
+    }
+  }, [config?.analyticsGtmId]);
+
   const mainContentRender = mainContentParts.map((text, index) => (
     <React.Fragment key={`main-content-part-${index}`}>
       <ReactMarkdown

client/src/hooks/Config/useAppStartup.ts

@@ -100,10 +100,12 @@ export default function useAppStartup({
     setAvailableTools({ pluginStore, ...mapPlugins(tools) });
   }, [allPlugins, user, setAvailableTools]);
 
-  if (startupConfig?.analyticsGtmId) {
-    const tagManagerArgs = {
-      gtmId: startupConfig?.analyticsGtmId,
-    };
-    TagManager.initialize(tagManagerArgs);
-  }
+  useEffect(() => {
+    if (startupConfig?.analyticsGtmId != null && typeof window.google_tag_manager === 'undefined') {
+      const tagManagerArgs = {
+        gtmId: startupConfig.analyticsGtmId,
+      };
+      TagManager.initialize(tagManagerArgs);
+    }
+  }, [startupConfig?.analyticsGtmId]);
 }