From fd2a9b1a9df02f81e2cfe94b267cc99257f7b692 Mon Sep 17 00:00:00 2001 From: Asaf Korem Date: Mon, 4 Nov 2024 07:56:28 +0200 Subject: [PATCH] feat: integrate analytics --- src/app/layout.tsx | 18 +++++++------ src/components/CodeBlock.tsx | 7 +++++ src/components/GoogleAnalytics.tsx | 41 ++++++++++++++++++++++++++++++ src/components/PatternCard.tsx | 7 +++++ src/types/google-analytics.d.ts | 13 ++++++++++ 5 files changed, 78 insertions(+), 8 deletions(-) create mode 100644 src/components/GoogleAnalytics.tsx create mode 100644 src/types/google-analytics.d.ts diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fcd49e5..e67a859 100644 --- 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 ( - - - {children} + + + + {children} - + ); } diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx index e5e6109..c8d8c1f 100644 --- a/src/components/CodeBlock.tsx +++ b/src/components/CodeBlock.tsx @@ -10,6 +10,13 @@ export const CodeBlock: React.FC = ({ 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 new file mode 100644 index 0000000..750699b --- /dev/null +++ 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 ( + <> +