[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,84 +130,87 @@ export default function AppShell({ children }: Props) {
   })();
 
   return (
-    <div className="flex h-full min-h-screen">
+    <GoogleAnalytics
-      {/* Narrow sidebar */}
+      measurementID={currentProductNavigation.googleAnalyticsMeasurementID}>
-      {currentProductNavigation.showGlobalNav && (
+      <div className="flex h-full min-h-screen">
-        <div className="hidden w-28 overflow-y-auto border-r border-slate-200 bg-white md:block">
+        {/* Narrow sidebar */}
-          <div className="flex w-full flex-col items-center py-6">
+        {currentProductNavigation.showGlobalNav && (
-            <div className="flex flex-shrink-0 items-center">
+          <div className="hidden w-28 overflow-y-auto border-r border-slate-200 bg-white md:block">
-              <Link href="/">
+            <div className="flex w-full flex-col items-center py-6">
-                <img
+              <div className="flex flex-shrink-0 items-center">
-                  alt="Tech Interview Handbook"
+                <Link href="/">
-                  className="h-8 w-auto"
+                  <img
-                  src="/logo.svg"
+                    alt="Tech Interview Handbook"
-                />
+                    className="h-8 w-auto"
-              </Link>
+                    src="/logo.svg"
-            </div>
-            <div className="mt-6 w-full flex-1 space-y-1 px-2">
-              {GlobalNavigation.map((item) => (
-                <Link
-                  key={item.name}
-                  className={clsx(
-                    'text-slate-700 hover:bg-slate-100',
-                    'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium',
-                  )}
-                  href={item.href}>
-                  <item.icon
-                    aria-hidden="true"
-                    className={clsx(
-                      'text-slate-500 group-hover:text-slate-700',
-                      'h-6 w-6',
-                    )}
                   />
-                  <span className="mt-2">{item.name}</span>
                 </Link>
-              ))}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Mobile menu */}
-      <MobileNavigation
-        globalNavigationItems={GlobalNavigation}
-        isShown={mobileMenuOpen}
-        productNavigationItems={currentProductNavigation.navigation}
-        productTitle={currentProductNavigation.title}
-        setIsShown={setMobileMenuOpen}
-      />
-
-      {/* Content area */}
-      <div className="flex h-screen flex-1 flex-col overflow-hidden">
-        <header className="w-full">
-          <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
-            <button
-              className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
-              type="button"
-              onClick={() => setMobileMenuOpen(true)}>
-              <span className="sr-only">Open sidebar</span>
-              <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
-            </button>
-            <div className="flex flex-1 justify-between px-4 sm:px-6">
-              <div className="flex flex-1 items-center">
-                <ProductNavigation
-                  items={currentProductNavigation.navigation}
-                  title={currentProductNavigation.title}
-                  titleHref={currentProductNavigation.titleHref}
-                />
               </div>
-              <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">
+              <div className="mt-6 w-full flex-1 space-y-1 px-2">
-                <ProfileJewel />
+                {GlobalNavigation.map((item) => (
+                  <Link
+                    key={item.name}
+                    className={clsx(
+                      'text-slate-700 hover:bg-slate-100',
+                      'group flex w-full flex-col items-center rounded-md p-3 text-xs font-medium',
+                    )}
+                    href={item.href}>
+                    <item.icon
+                      aria-hidden="true"
+                      className={clsx(
+                        'text-slate-500 group-hover:text-slate-700',
+                        'h-6 w-6',
+                      )}
+                    />
+                    <span className="mt-2">{item.name}</span>
+                  </Link>
+                ))}
               </div>
             </div>
           </div>
-        </header>
+        )}
 
-        {/* Main content */}
+        {/* Mobile menu */}
-        <div className="flex flex-1 items-stretch overflow-hidden">
+        <MobileNavigation
-          {children}
+          globalNavigationItems={GlobalNavigation}
+          isShown={mobileMenuOpen}
+          productNavigationItems={currentProductNavigation.navigation}
+          productTitle={currentProductNavigation.title}
+          setIsShown={setMobileMenuOpen}
+        />
+
+        {/* Content area */}
+        <div className="flex h-screen flex-1 flex-col overflow-hidden">
+          <header className="w-full">
+            <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-slate-200 bg-white shadow-sm">
+              <button
+                className="focus:ring-primary-500 border-r border-slate-200 px-4 text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset md:hidden"
+                type="button"
+                onClick={() => setMobileMenuOpen(true)}>
+                <span className="sr-only">Open sidebar</span>
+                <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
+              </button>
+              <div className="flex flex-1 justify-between px-4 sm:px-6">
+                <div className="flex flex-1 items-center">
+                  <ProductNavigation
+                    items={currentProductNavigation.navigation}
+                    title={currentProductNavigation.title}
+                    titleHref={currentProductNavigation.titleHref}
+                  />
+                </div>
+                <div className="ml-2 flex items-center space-x-4 sm:ml-6 sm:space-x-6">
+                  <ProfileJewel />
+                </div>
+              </div>
+            </div>
+          </header>
+
+          {/* Main content */}
+          <div className="flex flex-1 items-stretch overflow-hidden">
+            {children}
+          </div>
         </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;
+  }
+}