Merge pull request #82 from Stack-Knowledge/feature/googleAnalytics

frorong · web-flow · commit 7a1d946a4086 · 2023-10-30T23:02:22.000+09:00
[Client] googleAnalytics
diff --git a/package.json b/package.json
@@ -28,5 +28,8 @@
   "license": "ISC",
   "resolutions": {
     "@types/react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.17"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/client/src/app/layout.tsx b/projects/client/src/app/layout.tsx
@@ -5,6 +5,10 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { GlobalStyle } from 'common';
 import { Header } from 'common';
 
+import Script from 'next/script';
+
+import * as gtag from 'client/libs/gtag';
+
 import Providers from './providers';
 
 export const metadata: Metadata = {
@@ -58,6 +62,27 @@ export default function RootLayout({
 }) {
   return (
     <html lang='ko'>
+      <head>
+        {/* Global Site Tag (gtag.js) - Google Analytics */}
+        <Script
+          async
+          src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+        />
+        <Script
+          id='gtag-init'
+          strategy='afterInteractive'
+          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>
         <Providers>
           <ReactQueryDevtools />
diff --git a/projects/client/src/libs/gtag.ts b/projects/client/src/libs/gtag.ts
@@ -0,0 +1,21 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = (
+  action: Gtag.EventNames,
+  { event_category, event_label, value }: Gtag.EventParams
+) => {
+  window.gtag('event', action, {
+    event_category,
+    event_label,
+    value,
+  });
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: URL) => {
+  if (GA_TRACKING_ID)
+    window.gtag('config', GA_TRACKING_ID, {
+      page_path: url,
+    });
+};
diff --git a/projects/client/tsconfig.json b/projects/client/tsconfig.json
@@ -2,26 +2,14 @@
   "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
     "jsx": "preserve",
+    "types": ["@types/gtag.js"],
     "paths": {
-      "common/*": [
-        "../../packages/common/src/*"
-      ],
-      "client/*": [
-        "./src/*"
-      ],
-      "api/*": [
-        "../../packages/api/*"
-      ]
+      "common/*": ["../../packages/common/src/*"],
+      "client/*": ["./src/*"],
+      "api/*": ["../../packages/api/*"]
     },
     "strict": false
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,8 @@`
`28`	`28`	`"license": "ISC",`
`29`	`29`	`"resolutions": {`
`30`	`30`	`"@types/react": "^18.2.0"`
	`31`	`+ },`
	`32`	`+ "devDependencies": {`
	`33`	`+ "@types/gtag.js": "^0.0.17"`
`31`	`34`	`}`
`32`	`35`	`}`