feat: integrate analytics

asafkorem · Nov 4, 2024 · fd2a9b1 · fd2a9b1
1 parent 7d7d9b6
commit fd2a9b1
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 8 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import GoogleAnalytics from '@/components/GoogleAnalytics';
 import "./globals.css";
 
 const geistSans = localFont({
@@ -13,23 +14,24 @@ const geistMono = localFont({
   weight: "100 900",
 });
 
+const GA_MEASUREMENT_ID = 'G-NFEVN0VVSF';
+
 export const metadata: Metadata = {
   title: "Git Spotlight",
   description: "Illuminating your code's pain points through git history",
 };
 
 export default function RootLayout({
-  children,
-}: Readonly<{
+                                     children,
+                                   }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+      <GoogleAnalytics GA_MEASUREMENT_ID={GA_MEASUREMENT_ID} />
+      {children}
       </body>
-    </html>
+      </html>
   );
 }
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -10,6 +10,13 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ code, language = 'bash' })
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = async () => {
+        // @ts-ignore
+        window.gtag('event', 'code copied', {
+            event_category: 'action',
+            event_label: 'label',
+            value: 'copied'
+        });
+
         await navigator.clipboard.writeText(code);
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), 2000);

diff --git a/src/components/GoogleAnalytics.tsx b/src/components/GoogleAnalytics.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import Script from 'next/script'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+
+export default function GoogleAnalytics({ GA_MEASUREMENT_ID }: { GA_MEASUREMENT_ID: string }) {
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
+
+    useEffect(() => {
+        const url = pathname + searchParams.toString()
+
+        // Push to dataLayer or send page_view through gtag
+        // @ts-ignore
+        window.gtag('config', GA_MEASUREMENT_ID, {
+            page_path: url
+        })
+    }, [pathname, searchParams, GA_MEASUREMENT_ID])
+
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+            />
+            <Script
+                id="google-analytics"
+                strategy="afterInteractive"
+                dangerouslySetInnerHTML={{
+                    __html: `
+                        window.dataLayer = window.dataLayer || [];
+                        function gtag(){dataLayer.push(arguments);}
+                        gtag('js', new Date());
+                        gtag('config', '${GA_MEASUREMENT_ID}');
+                    `
+                }}
+            />
+        </>
+    )
+}
diff --git a/src/components/PatternCard.tsx b/src/components/PatternCard.tsx
@@ -22,6 +22,13 @@ export const PatternCard: React.FC<PatternCardProps> = ({ pattern }) => {
             ...prev,
             [param.name]: value
         }));
+
+        // @ts-ignore
+        window.gtag('event', 'param changed', {
+            event_category: 'action',
+            event_label: 'label',
+            value: `${param.name} changed to ${value}`
+        });
     };
 
     const command = pattern.generateCommand(params);

diff --git a/src/types/google-analytics.d.ts b/src/types/google-analytics.d.ts
@@ -0,0 +1,13 @@
+interface Window {
+    gtag: (
+        command: 'config' | 'event' | 'js',
+        targetId: string,
+        config?: AnalyticsConfig | Date | undefined
+    ) => void;
+    dataLayer: unknown[];
+}
+
+interface AnalyticsConfig {
+    page_path: string;
+    [key: string]: string;
+}