feat: Attach Google Analytics

Code reference: https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics

Author: hanlee55

Diff for: .env.development

@@ -1 +1,2 @@
-NEXT_PUBLIC_API_URL="https://api-dev.pycon.kr"
+NEXT_PUBLIC_API_URL="https://api-dev.pycon.kr"
+NEXT_PUBLIC_GA_ID="G-QNY29HSQWN"

Diff for: .env.production

@@ -1 +1,2 @@
-NEXT_PUBLIC_API_URL="https://api.pycon.kr"
+NEXT_PUBLIC_API_URL="https://api.pycon.kr"
+NEXT_PUBLIC_GA_ID="G-QNY29HSQWN"

Diff for: lib/gtag.ts

@@ -0,0 +1,24 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: URL) => {
+  window.gtag('config', GA_TRACKING_ID as string, {
+    page_path: url,
+  });
+};
+
+type GTagEvent = {
+  action: string;
+  category: string;
+  label: string;
+  value: number;
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ action, category, label, value }: GTagEvent) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};

Diff for: package-lock.json

@@ -16,6 +16,7 @@
     "@egjs/flicking-plugins": "^4.7.0",
     "@egjs/react-flicking": "^4.10.6",
     "@stitches/react": "^1.2.8",
+    "@types/gtag.js": "^0.0.12",
     "axios": "^1.3.4",
     "next": "13.1.5",
     "next-themes": "^0.2.1",

Diff for: package.json

@@ -1,9 +1,12 @@
 import type { AppProps } from 'next/app';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { useRouter } from 'next/router';
+import * as gtag from '@/lib/gtag';
 import { RecoilRoot, useRecoilSnapshot } from 'recoil';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import Container from '@/components/layout/Container';
+import Script from 'next/script';
 import { darkTheme } from '@/stitches.config';
 import { ThemeProvider } from 'next-themes';
 
@@ -23,6 +26,19 @@ function RecoilDebugObserver() {
 const queryClient = new QueryClient();
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  React.useEffect(() => {
+    const handleRouteChange = (url: URL) => {
+      gtag.pageview(url);
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    router.events.on('hashChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+      router.events.off('hashChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <ThemeProvider
       attribute="class"
@@ -37,6 +53,10 @@ function MyApp({ Component, pageProps }: AppProps) {
         {process.env.NODE_ENV === 'development' && <RecoilDebugObserver />}
         <QueryClientProvider client={queryClient}>
           <Container>
+            <Script
+              strategy="afterInteractive"
+              src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+            />
             <Component {...pageProps} />
           </Container>
           <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />

Diff for: pages/_app.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
 import { getCssText, globalCss } from '@/stitches.config';
+import * as gtag from '@/lib/gtag';
 
 const globalStyle = globalCss({
   '*': {
@@ -38,6 +39,18 @@ export default class Document extends NextDocument {
             type="text/css"
           />
           <style dangerouslySetInnerHTML={{ __html: getCssText() }} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gtag.GA_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
         </Head>
         <body>
           <Main />

Diff for: pages/_document.tsx

@@ -18,7 +18,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "types": ["@types/gtag.js"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]