Merge pull request #42 from techulus/develop

arjunkomath · web-flow · commit 2400698bb770 · 2024-12-22T14:49:32.000+11:00
Add GTM tag
diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
@@ -3,7 +3,9 @@ import { SessionContextProvider } from "@supabase/auth-helpers-react";
 import { Analytics } from "@vercel/analytics/react";
 import localFont from "next/font/local";
 import Head from "next/head";
-import { useState } from "react";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { useEffect, useState } from "react";
 import "../styles/global.css";
 import { UserContextProvider } from "../utils/useUser";
 
@@ -24,6 +26,22 @@ export default function App({ Component, pageProps }) {
   const getLayout = Component.getLayout || ((page) => page);
   const [supabaseClient] = useState(() => createPagesBrowserClient());
 
+  const router = useRouter();
+  const googleTagId = "AW-11500375049";
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      // @ts-ignore
+      window.gtag("config", googleTagId, {
+        page_path: url,
+      });
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [router.events, googleTagId]);
+
   return (
     <>
       <Head>
@@ -37,6 +55,24 @@ export default function App({ Component, pageProps }) {
           --geist-font: ${geist.style.fontFamily};
         }
       `}</style>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${googleTagId}`}
+      />
+      <Script
+        id="google-ads-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${googleTagId}', {
+              send_page_view: false
+            });
+          `,
+        }}
+      />
       <SessionContextProvider
         supabaseClient={supabaseClient}
         initialSession={pageProps.initialSession}
