From 2ad68b226f2bd7189f3f5374276e814faf9a40d2 Mon Sep 17 00:00:00 2001
From: Alex Co <alex.tuan@mindvalley.com>
Date: Tue, 19 Nov 2024 10:32:43 +0800
Subject: [PATCH] Add GTM tracking

Signed-off-by: Alex Co <alex.tuan@mindvalley.com>
---
 .gitignore                         |  3 ++-
 web/package-lock.json              | 20 +++++++++++++++
 web/package.json                   |  1 +
 web/src/app/layout.tsx             | 39 +++++++++++-------------------
 web/src/components/GTMProvider.tsx | 29 ++++++++++++++++++++++
 web/src/lib/gtm.ts                 | 10 ++++++++
 web/src/types/gtm.d.ts             |  7 ++++++
 7 files changed, 83 insertions(+), 26 deletions(-)
 create mode 100644 web/src/components/GTMProvider.tsx
 create mode 100644 web/src/lib/gtm.ts
 create mode 100644 web/src/types/gtm.d.ts

diff --git a/.gitignore b/.gitignore
index 9ebde9f5fa0..1d7e04272ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,5 @@
 *.sw?
 /backend/tests/regression/answer_quality/search_test_config.yaml
 env.sh
-.cursorrules
\ No newline at end of file
+.cursorrules
+danswer_checkpoint/
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index 338cf0a9f0f..d881f49bba0 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,6 +11,7 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^8.0.0",
+        "@next/third-parties": "latest",
         "@phosphor-icons/react": "^2.0.8",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-popover": "^1.0.7",
@@ -1095,6 +1096,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/third-parties": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-15.0.3.tgz",
+      "integrity": "sha512-T2NkBXLcgRY0cmE7jb/dSMXNK9D+yv1k+n0uBxwMBS9SEtOhuMvxiUPQRj5x4cFnsei6JECloJg88koMprKw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "third-party-capital": "1.0.20"
+      },
+      "peerDependencies": {
+        "next": "^13.0.0 || ^14.0.0 || ^15.0.0",
+        "react": "^18.2.0 || 19.0.0-rc-66855b96-20241106"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -10890,6 +10904,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/third-party-capital": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
+      "integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==",
+      "license": "ISC"
+    },
     "node_modules/tiny-case": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
diff --git a/web/package.json b/web/package.json
index 190ec9b1aa6..eaf0451ff26 100644
--- a/web/package.json
+++ b/web/package.json
@@ -29,6 +29,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "mdast-util-find-and-replace": "^3.0.1",
+    "@next/third-parties": "latest",
     "next": "^14.2.3",
     "npm": "^10.8.0",
     "postcss": "^8.4.31",
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index df9c3fd5d92..f69381bd504 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -4,11 +4,7 @@ import {
   fetchEnterpriseSettingsSS,
   fetchSettingsSS,
 } from "@/components/settings/lib";
-import {
-  CUSTOM_ANALYTICS_ENABLED,
-  EE_ENABLED,
-  SERVER_SIDE_ONLY__PAID_ENTERPRISE_FEATURES_ENABLED,
-} from "@/lib/constants";
+import { SERVER_SIDE_ONLY__PAID_ENTERPRISE_FEATURES_ENABLED } from "@/lib/constants";
 import { SettingsProvider } from "@/components/settings/SettingsProvider";
 import { Metadata } from "next";
 import { buildClientUrl, fetchSS } from "@/lib/utilsSS";
@@ -20,6 +16,7 @@ import { HeaderTitle } from "@/components/header/HeaderTitle";
 import { Logo } from "@/components/Logo";
 import { UserProvider } from "@/components/user/UserProvider";
 import { ProviderContextProvider } from "@/components/chat_search/ProviderContext";
+import GTMProvider from "@/components/GTMProvider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -40,7 +37,8 @@ export async function generateMetadata(): Promise<Metadata> {
 
   return {
     title: enterpriseSettings?.application_name ?? "Eve AI",
-    description: "With Eve, you can quickly access the information you need to succeed in Mindvalley",
+    description:
+      "With Eve, you can quickly access the information you need to succeed in Mindvalley",
     icons: {
       icon: logoLocation,
     },
@@ -99,31 +97,22 @@ export default async function RootLayout({
         />
       </Head>
 
-      {CUSTOM_ANALYTICS_ENABLED && combinedSettings.customAnalyticsScript && (
-        <head>
-          <script
-            type="text/javascript"
-            dangerouslySetInnerHTML={{
-              __html: combinedSettings.customAnalyticsScript,
-            }}
-          />
-        </head>
-      )}
-
       <body className={`relative ${inter.variable} font-sans`}>
         <div
           className={`text-default min-h-screen bg-background ${
             // TODO: remove this once proper dark mode exists
             process.env.THEME_IS_DARK?.toLowerCase() === "true" ? "dark" : ""
-            }`}
+          }`}
         >
-          <UserProvider>
-            <ProviderContextProvider>
-              <SettingsProvider settings={combinedSettings}>
-                {children}
-              </SettingsProvider>
-            </ProviderContextProvider>
-          </UserProvider>
+          <GTMProvider>
+            <UserProvider>
+              <ProviderContextProvider>
+                <SettingsProvider settings={combinedSettings}>
+                  {children}
+                </SettingsProvider>
+              </ProviderContextProvider>
+            </UserProvider>
+          </GTMProvider>
         </div>
       </body>
     </html>
diff --git a/web/src/components/GTMProvider.tsx b/web/src/components/GTMProvider.tsx
new file mode 100644
index 00000000000..ab3500b18cb
--- /dev/null
+++ b/web/src/components/GTMProvider.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React from "react";
+import { GoogleTagManager } from "@next/third-parties/google";
+import { usePathname, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { GTM_ID, pageview } from "@/lib/gtm";
+
+export default function GTMProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      pageview(pathname);
+    }
+  }, [pathname, searchParams]);
+
+  return (
+    <>
+      <GoogleTagManager gtmId={GTM_ID} />
+      {children}
+    </>
+  );
+}
diff --git a/web/src/lib/gtm.ts b/web/src/lib/gtm.ts
new file mode 100644
index 00000000000..e75236451a9
--- /dev/null
+++ b/web/src/lib/gtm.ts
@@ -0,0 +1,10 @@
+export const GTM_ID = "GTM-T8573CZX"; // Replace with your GTM ID
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== "undefined") {
+    window.dataLayer.push({
+      event: "pageview",
+      page: url,
+    });
+  }
+};
diff --git a/web/src/types/gtm.d.ts b/web/src/types/gtm.d.ts
new file mode 100644
index 00000000000..5576edeaea5
--- /dev/null
+++ b/web/src/types/gtm.d.ts
@@ -0,0 +1,7 @@
+interface Window {
+  dataLayer: any[];
+}
+
+declare module "@next/third-parties/google" {
+  export function GoogleTagManager(props: { gtmId: string }): JSX.Element;
+}