adding GA to marketing (#417)

* adding GA to marketing * adding the right code * trying with root url * fixing sandbox --------- Co-authored-by: Nick Grato <[email protected]>
Hubs-Foundation · Oct 3, 2023 · 85efea4 · 85efea4
1 parent 9e05364
commit 85efea4
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 17 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,31 @@ 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';
+import getEnvVariable from 'config';
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const root = getEnvVariable('DASH_ROOT_DOMAIN');
+    pageview(root + router.route);
+
+    const handleRouteChange = (url: string) => {
+      pageview(root + 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/pages/sandbox/index.tsx b/marketing/pages/sandbox/index.tsx
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-
+import LayoutWrapper from 'layouts/LayoutWrapper/LayoutWrapper';
 type SandboxPropsT = {};
 
 /**
@@ -8,14 +8,16 @@ type SandboxPropsT = {};
  */
 const Sandbox = ({}: SandboxPropsT) => {
   return (
-    <div className="page_wrapper">
-      <Head>
-        <title>Sandbox</title>
-      </Head>
-      <main>
-        <h1>Sandbox</h1>
-      </main>
-    </div>
+    <LayoutWrapper>
+      <div className="page_wrapper">
+        <Head>
+          <title>Sandbox</title>
+        </Head>
+        <main>
+          <h1>Sandbox</h1>
+        </main>
+      </div>
+    </LayoutWrapper>
   );
 };
 

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 = 'G-4W4Q68ZFMX';
+
+// Function to track page views
+export const pageview = (url: string) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};