Merge pull request #903 from teitei-tk/chore/google_analytics_4

migrate google analytics v4
teitei-tk · Apr 12, 2024 · b74a23d · b74a23d
2 parents 92ce30c + 8740cb9
commit b74a23d
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "typescript": "^4.9.4"
   },
   "dependencies": {
+    "@next/third-parties": "^14.2.1",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@zeit-ui/react": "^1.8.1",

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1 @@
+export const GA_TRACKING_ID = "G-K3N55YZQ46";
diff --git a/src/lib/gtag.js b/src/lib/gtag.js
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,27 +1,15 @@
-import { useEffect } from "react";
 import { AppProps } from "next/app";
 import Head from "next/head";
-import Router from "next/router";
-
-import * as gtag from "../lib/gtag";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { GA_TRACKING_ID } from "@/constants";
 
 const App = ({ Component, pageProps }: AppProps) => {
-  useEffect(() => {
-    const handleRouteChange = (url: string) => {
-      gtag.pageview(url);
-    };
-
-    Router.events.on("routeChangeComplete", handleRouteChange);
-    return () => {
-      Router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, []);
-
   return (
     <>
       <Head>
         <title>teitei-tk.com</title>
       </Head>
+      <GoogleAnalytics gaId={GA_TRACKING_ID} />
       <Component {...pageProps} />
     </>
   );

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -5,7 +5,8 @@ import Document, {
   DocumentContext,
 } from "next/document";
 import { CssBaseline } from "@zeit-ui/react";
-import { GA_TRACKING_ID } from "../lib/gtag";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { GA_TRACKING_ID } from "@/constants";
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -27,24 +28,7 @@ export default class MyDocument extends Document {
     return (
       <html>
         <Head>
-          {/* Global Site Tag (gtag.js) - Google Analytics */}
-          <script
-            async
-            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-          />
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${GA_TRACKING_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
-            }}
-          />
-
+          <GoogleAnalytics gaId={GA_TRACKING_ID} />
           <link
             rel="apple-touch-icon"
             sizes="180x180"

diff --git a/yarn.lock b/yarn.lock
@@ -690,6 +690,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz#d28ea15a72cdcf96201c60a43e9630cd7fda168f"
   integrity sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==
 
+"@next/third-parties@^14.2.1":
+  version "14.2.1"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.2.1.tgz#a417099d0c4cdeb1368eae8185e51131ee890623"
+  integrity sha512-iHVq3uHT1BLR4O8LXJ/AJeRCATnsxWNq5S223BYhrQMceMUr/5TtKIroQwJpXrbwxkOr7SFX72mZqPTXxd/TnQ==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -4756,6 +4763,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+[email protected]:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 [email protected]:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"