Merge pull request #75 from mindvalley/feat/add-gtm-tracking

Add GTM tracking
mindvalley · Nov 19, 2024 · dd37b07 · dd37b07
2 parents b062460 + 2ad68b2
commit dd37b07
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,5 @@
 *.sw?
 /backend/tests/regression/answer_quality/search_test_config.yaml
 env.sh
-.cursorrules
+.cursorrules
+danswer_checkpoint/
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,7 @@
+interface Window {
+  dataLayer: any[];
+}
+
+declare module "@next/third-parties/google" {
+  export function GoogleTagManager(props: { gtmId: string }): JSX.Element;
+}