📊 feat: Google tag manager integration (#2469)

* Google tag manager integration

* change location of react-gtm-module package

* refactor: move react-gtm-module usage from Chat/Footer to useAppStartup hook

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

.env.example

@@ -407,6 +407,9 @@ HELP_AND_FAQ_URL=https://librechat.ai
 
 # SHOW_BIRTHDAY_ICON=true
 
+# Google tag manager id
+#ANALYTICS_GTM_ID=user provided google tag manager id
+
 #==================================================#
 #                      Others                      #
 #==================================================#

api/server/routes/config.js

@@ -52,6 +52,7 @@ router.get('/', async function (req, res) {
       helpAndFaqURL: process.env.HELP_AND_FAQ_URL || 'https://librechat.ai',
       interface: req.app.locals.interfaceConfig,
       modelSpecs: req.app.locals.modelSpecs,
+      analyticsGtmId: process.env.ANALYTICS_GTM_ID,
     };
 
     if (typeof process.env.CUSTOM_FOOTER === 'string') {

client/package.json

@@ -74,6 +74,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-flip-toolkit": "^7.1.0",
+    "react-gtm-module": "^2.0.11",
     "react-hook-form": "^7.43.9",
     "react-lazy-load-image-component": "^1.6.0",
     "react-markdown": "^8.0.6",

client/src/components/Chat/Footer.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import TagManager from 'react-gtm-module';
 import { Constants } from 'librechat-data-provider';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
 import { useLocalize } from '~/hooks';
 
+
 export default function Footer({ className }: { className?: string }) {
   const { data: config } = useGetStartupConfig();
   const localize = useLocalize();
@@ -33,6 +35,13 @@ export default function Footer({ className }: { className?: string }) {
     </a>
   );
 
+  if (config?.analyticsGtmId) {
+    const tagManagerArgs = {
+      gtmId: config?.analyticsGtmId,
+    };
+    TagManager.initialize(tagManagerArgs);
+  }
+
   const mainContentParts = (
     typeof config?.customFooter === 'string'
       ? config.customFooter

client/src/hooks/Config/useAppStartup.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import TagManager from 'react-gtm-module';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { LocalStorageKeys } from 'librechat-data-provider';
 import { useAvailablePluginsQuery } from 'librechat-data-provider/react-query';
@@ -98,4 +99,11 @@ export default function useAppStartup({
 
     setAvailableTools({ pluginStore, ...mapPlugins(tools) });
   }, [allPlugins, user, setAvailableTools]);
+
+  if (startupConfig?.analyticsGtmId) {
+    const tagManagerArgs = {
+      gtmId: startupConfig?.analyticsGtmId,
+    };
+    TagManager.initialize(tagManagerArgs);
+  }
 }

package-lock.json

@@ -1159,6 +1159,7 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-flip-toolkit": "^7.1.0",
+        "react-gtm-module": "^2.0.11",
         "react-hook-form": "^7.43.9",
         "react-lazy-load-image-component": "^1.6.0",
         "react-markdown": "^8.0.6",
@@ -24286,6 +24287,11 @@
         "react-dom": ">= 16.x"
       }
     },
+    "node_modules/react-gtm-module": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
+      "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw=="
+    },
     "node_modules/react-hook-form": {
       "version": "7.50.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.0.tgz",

packages/data-provider/src/types.ts

@@ -296,6 +296,7 @@ export type TStartupConfig = {
   helpAndFaqURL: string;
   customFooter?: string;
   modelSpecs?: TSpecsConfig;
+  analyticsGtmId?: string;
 };
 
 export type TRefreshTokenResponse = {