📈 Replace gtag.js with Google tag manager

SogoKato · Feb 29, 2024 · 418a232 · 418a232
1 parent 292ccc7
commit 418a232
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 71 deletions.
diff --git a/components/Like.tsx b/components/Like.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { LikeEvent } from "../types/ga";
-import { trackEvent } from "../utils/gtag";
+import { sendGTMEvent } from '@next/third-parties/google'
 
 type LikeProps = {
   path: string;
@@ -187,12 +186,7 @@ const getRecords = (): Records => {
 };
 
 const trackLikeEvent = (label: string) => {
-  const event: LikeEvent = {
-    action: "like",
-    category: "button",
-    label: label,
-  };
-  trackEvent(event);
+  sendGTMEvent({ event: 'like', value: label })
 };
 
 interface IAPIReaction {

diff --git a/hooks/usePageView.ts b/hooks/usePageView.ts
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "clean": "tsc --build --clean"
   },
   "dependencies": {
+    "@next/third-parties": "^14.1.0",
     "@noroch/like-widget": "^1.0.2",
     "googleapis": "^110.0.0",
     "gray-matter": "^4.0.3",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,17 +1,18 @@
 import Head from "next/head";
 import type { AppProps } from "next/app";
+import { GoogleTagManager } from '@next/third-parties/google'
 import Layout from "../components/Layout";
 import "../styles/globals.css";
-import usePageView from "../hooks/usePageView";
+import { googleTagManagerId } from "../utils/const";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  usePageView();
   return (
     <Layout {...pageProps}>
       <Head>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Component {...pageProps} />
+      <GoogleTagManager gtmId={googleTagManagerId} />
     </Layout>
   );
 }

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,6 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import Script from "next/script";
-import { gaId, siteTitle } from "../utils/const";
+import { siteTitle } from "../utils/const";
 
 export default function Document() {
   return (
@@ -17,25 +16,6 @@ export default function Document() {
           type="application/rss+xml"
           title={siteTitle}
         />
-        <Script
-          async
-          src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
-          strategy="afterInteractive"
-        />
-        <Script
-          id="_gtag"
-          defer
-          dangerouslySetInnerHTML={{
-            __html: `
-              if (window.location.hostname === "sogo.dev") {
-                window.dataLayer = window.dataLayer || [];
-                function gtag(){dataLayer.push(arguments);}
-                gtag("js", new Date());
-                gtag("config", "${gaId}");
-              }`,
-          }}
-          strategy="afterInteractive"
-        />
       </Head>
       <body>
         <Main />

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/types/ga.ts b/types/ga.ts
diff --git a/utils/const.ts b/utils/const.ts
@@ -5,4 +5,4 @@ export const baseUrl = "https://sogo.dev";
 export const basePostDir = "posts";
 export const postsPerPage = 10;
 
-export const gaId = "G-RE7Q7WBFDJ";
+export const googleTagManagerId = "GTM-M965SWP";
diff --git a/utils/gtag.ts b/utils/gtag.ts