Merge pull request #115 from hufs-sports-live/feat/ga

[FEAT] google analytics 추가
hufscheer · Nov 29, 2023 · 94ebec1 · 94ebec1
2 parents 0cbc5bf + 7226f44
commit 94ebec1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 6 deletions.
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -5,7 +5,7 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: 'https://cc1dcf1845d69a9079c615d462e122b2@o4506026798088192.ingest.sentry.io/4506026816503808',
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 0.2,

diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts
@@ -3,11 +3,10 @@
 // Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: "https://cc1dcf1845d69a9079c615d462e122b2@o4506026798088192.ingest.sentry.io/4506026816503808",
-
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 1,
 

diff --git a/sentry.server.config.ts b/sentry.server.config.ts
@@ -5,8 +5,7 @@
 import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
-  dsn: 'https://cc1dcf1845d69a9079c615d462e122b2@o4506026798088192.ingest.sentry.io/4506026816503808',
-
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   // Adjust this value in production, or use tracesSampler for greater control
   tracesSampleRate: 0.2,
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,9 +3,12 @@ import './globals.css';
 import { Analytics } from '@vercel/analytics/react';
 import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 import Footer from '@/components/layout/Footer';
 import Header from '@/components/layout/Header';
+import * as ga from '@/types/ga/gtag';
 
 import ReactQueryProvider from './ReactQueryProvider';
 
@@ -27,8 +30,41 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url: URL) => {
+      ga.pageView(url);
+    };
+
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <html lang="en">
+      <head>
+        <script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TAG}`}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TAG}', {
+              page_path: window.location.pathname,
+            });
+          `,
+          }}
+        />
+      </head>
       <body className={`${inter.className} m-auto max-w-md`}>
         <ReactQueryProvider>
           <Header />

diff --git a/src/types/ga/gtag.ts b/src/types/ga/gtag.ts
@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    gtag: (param1: string, param2: string, param3: object) => void;
+  }
+}
+
+export const pageView = (url: URL) => {
+  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_TAG!, {
+    page_path: url,
+  });
+};