From 97d12d03d1a4c48cf35c79cf99527c95a8c85774 Mon Sep 17 00:00:00 2001 From: Denis Palnitsky Date: Sat, 15 Jun 2024 14:09:18 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8A=20=20feat:=20Google=20tag=20manage?= =?UTF-8?q?r=20integration=20(#2469)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .env.example | 3 +++ api/server/routes/config.js | 1 + client/package.json | 1 + client/src/components/Chat/Footer.tsx | 9 +++++++++ client/src/hooks/Config/useAppStartup.ts | 8 ++++++++ package-lock.json | 6 ++++++ packages/data-provider/src/types.ts | 1 + 7 files changed, 29 insertions(+) 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 = {