adding GA to marketing

Hubs-Foundation · Oct 2, 2023 · 1d24fe1 · 1d24fe1
1 parent 9e05364
commit 1d24fe1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 8 deletions.
diff --git a/marketing/layouts/LayoutWrapper/LayoutWrapper.tsx b/marketing/layouts/LayoutWrapper/LayoutWrapper.tsx
@@ -3,6 +3,8 @@ import { ThemeContext } from 'contexts/ThemeProvider';
 import Nav from '@Navigation/Nav/Nav';
 import Footer from '@Navigation/Footer/Footer';
 import { NavigationT } from 'types';
+import Head from 'next/head';
+import { GA_TRACKING_ID } from 'services/analytics.service';
 
 type LayoutWrapperPropsT = {
   navData?: NavigationT;
@@ -18,14 +20,33 @@ const LayoutWrapper = ({ navData, children }: LayoutWrapperPropsT) => {
   const themeContext = useContext(ThemeContext);
 
   return (
-    // Hard coding light while dark theme is being designed
-    // <main data-theme={themeContext.theme}>
-    <main data-theme="light">
-      <div id="LP_modal_portal" />
-      <Nav navData={navData} />
-      {children}
-      <Footer />
-    </main>
+    <>
+      <Head>
+        {/* Google Analytics script */}
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag() {
+                dataLayer.push(arguments);
+              }
+              gtag('js', new Date());
+              gtag('config', '${GA_TRACKING_ID}');
+            `,
+          }}
+        />
+      </Head>
+      <main data-theme="light">
+        <div id="LP_modal_portal" />
+        <Nav navData={navData} />
+        {children}
+        <Footer />
+      </main>
+    </>
   );
 };
 

diff --git a/marketing/pages/_app.tsx b/marketing/pages/_app.tsx
@@ -7,8 +7,25 @@ import NotificationProvider from 'contexts/NotificationProvider';
 import favicon32 from '../public/favicon-32x32.png';
 import favicon16 from '../public/favicon-16x16.png';
 import appleTouch from '../public/apple-touch-icon.png';
+import { pageview } from 'services/analytics.service';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => pageview(url);
+
+    // Listen for route changes and call the handler
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    // Remove the event listener on unmount
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <ThemeProvider>
       <NotificationProvider>

diff --git a/marketing/services/analytics.service.ts b/marketing/services/analytics.service.ts
@@ -0,0 +1,14 @@
+declare global {
+  interface Window {
+    gtag: (...args: any[]) => void;
+  }
+}
+
+export const GA_TRACKING_ID = 'UA-77033033-12';
+
+// Function to track page views
+export const pageview = (url: string) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};