[portal] add Google Analytics

apps/portal/src/components/global/AppShell.tsx

@@ -13,6 +13,7 @@ import OffersNavigation from '~/components/offers/OffersNavigation';
 import QuestionsNavigation from '~/components/questions/QuestionsNavigation';
 import ResumesNavigation from '~/components/resumes/ResumesNavigation';
 
+import GoogleAnalytics from './GoogleAnalytics';
 import MobileNavigation from './MobileNavigation';
 import type { ProductNavigationItems } from './ProductNavigation';
 import ProductNavigation from './ProductNavigation';
@@ -106,6 +107,7 @@ export default function AppShell({ children }: Props) {
   const router = useRouter();
 
   const currentProductNavigation: Readonly<{
+    googleAnalyticsMeasurementID: string;
     navigation: ProductNavigationItems;
     showGlobalNav: boolean;
     title: string;
@@ -128,6 +130,8 @@ export default function AppShell({ children }: Props) {
   })();
 
   return (
+    <GoogleAnalytics
+      measurementID={currentProductNavigation.googleAnalyticsMeasurementID}>
       <div className="flex h-full min-h-screen">
         {/* Narrow sidebar */}
         {currentProductNavigation.showGlobalNav && (
@@ -207,5 +211,6 @@ export default function AppShell({ children }: Props) {
           </div>
         </div>
       </div>
+    </GoogleAnalytics>
   );
 }

apps/portal/src/components/global/GoogleAnalytics.tsx

@@ -0,0 +1,102 @@
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { createContext, useContext, useEffect } from 'react';
+
+type Context = Readonly<{
+  event: (payload: GoogleAnalyticsEventPayload) => void;
+}>;
+
+export const GoogleAnalyticsContext = createContext<Context>({
+  event,
+});
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+function pageview(measurementID: string, url: string) {
+  // Don't log analytics during development.
+  if (process.env.NODE_ENV === 'development') {
+    return;
+  }
+
+  window.gtag('config', measurementID, {
+    page_path: url,
+  });
+
+  window.gtag('event', url, {
+    event_category: 'pageview',
+    event_label: document.title,
+  });
+}
+
+type GoogleAnalyticsEventPayload = Readonly<{
+  action: string;
+  category: string;
+  label: string;
+  value?: number;
+}>;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export function event({
+  action,
+  category,
+  label,
+  value,
+}: GoogleAnalyticsEventPayload) {
+  // Don't log analytics during development.
+  if (process.env.NODE_ENV === 'development') {
+    return;
+  }
+
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value,
+  });
+}
+
+type Props = Readonly<{
+  children: React.ReactNode;
+  measurementID: string;
+}>;
+
+export function useGoogleAnalytics() {
+  return useContext(GoogleAnalyticsContext);
+}
+
+export default function GoogleAnalytics({ children, measurementID }: Props) {
+  const router = useRouter();
+  useEffect(() => {
+    function handleRouteChange(url: string) {
+      pageview(measurementID, url);
+    }
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, measurementID]);
+
+  return (
+    <GoogleAnalyticsContext.Provider value={{ event }}>
+      {children}
+      {/* Global Site Tag (gtag.js) - Google Analytics */}
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${measurementID}`}
+        strategy="afterInteractive"
+      />
+      <Script
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${measurementID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+        id="gtag-init"
+        strategy="afterInteractive"
+      />
+    </GoogleAnalyticsContext.Provider>
+  );
+}

apps/portal/src/components/global/HomeNavigation.ts

@@ -14,6 +14,7 @@ const navigation: ProductNavigationItems = [
 ];
 
 const config = {
+  googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: true,
   title: 'Tech Interview Handbook',

apps/portal/src/components/offers/OffersNavigation.ts

@@ -6,6 +6,8 @@ const navigation: ProductNavigationItems = [
 ];
 
 const config = {
+  // TODO: Change this to your own GA4 measurement ID.
+  googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: false,
   title: 'Offer Profile Repository',

apps/portal/src/components/questions/QuestionsNavigation.ts

@@ -8,6 +8,8 @@ const navigation: ProductNavigationItems = [
 ];
 
 const config = {
+  // TODO: Change this to your own GA4 measurement ID.
+  googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: false,
   title: 'Questions Bank',

apps/portal/src/components/resumes/ResumesNavigation.ts

@@ -21,6 +21,8 @@ const navigation: ProductNavigationItems = [
 ];
 
 const config = {
+  // TODO: Change this to your own GA4 measurement ID.
+  googleAnalyticsMeasurementID: 'G-DBLZDQ2ZZN',
   navigation,
   showGlobalNav: false,
   title: 'Resumes',

apps/portal/src/types/index.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    gtag: any;
+  }
+}