diff --git a/.env.example b/.env.example index 4352f8add7..18b41487f0 100644 --- a/.env.example +++ b/.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 # #==================================================# diff --git a/api/server/routes/config.js b/api/server/routes/config.js index 85264eb120..07022bc535 100644 --- a/api/server/routes/config.js +++ b/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') { diff --git a/client/package.json b/client/package.json index 9ff08e1362..4d2ac6e295 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx index 0e62eb195d..8e534d22d0 100644 --- a/client/src/components/Chat/Footer.tsx +++ b/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 }) { ); + if (config?.analyticsGtmId) { + const tagManagerArgs = { + gtmId: config?.analyticsGtmId, + }; + TagManager.initialize(tagManagerArgs); + } + const mainContentParts = ( typeof config?.customFooter === 'string' ? config.customFooter diff --git a/client/src/hooks/Config/useAppStartup.ts b/client/src/hooks/Config/useAppStartup.ts index cf1de06a46..79b6e986d5 100644 --- a/client/src/hooks/Config/useAppStartup.ts +++ b/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); + } } diff --git a/package-lock.json b/package-lock.json index b7f65da606..ffde1a98e8 100644 --- a/package-lock.json +++ b/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", diff --git a/packages/data-provider/src/types.ts b/packages/data-provider/src/types.ts index f1b5e21ab6..1df9ed35c9 100644 --- a/packages/data-provider/src/types.ts +++ b/packages/data-provider/src/types.ts @@ -296,6 +296,7 @@ export type TStartupConfig = { helpAndFaqURL: string; customFooter?: string; modelSpecs?: TSpecsConfig; + analyticsGtmId?: string; }; export type TRefreshTokenResponse = {