From a19e1c0a96d8ae7407958f2e279d8940872055ed Mon Sep 17 00:00:00 2001
From: DaeHyun <qqwwee08@naver.com>
Date: Tue, 21 May 2024 15:41:12 +0900
Subject: [PATCH] Update Google Analytics example for App Router

---
 examples/with-google-analytics/README.md      |  4 +-
 .../{pages/about.js => app/about/page.tsx}    |  2 +-
 .../app/contact/page.tsx                      | 27 +++++++++++
 examples/with-google-analytics/app/layout.tsx | 20 ++++++++
 .../{pages/index.js => app/page.tsx}          |  0
 .../components/{Header.js => Header.tsx}      |  0
 .../with-google-analytics/components/Page.js  | 10 ----
 .../with-google-analytics/components/Page.tsx | 11 +++++
 examples/with-google-analytics/lib/gtag.js    | 17 -------
 examples/with-google-analytics/package.json   |  6 +++
 examples/with-google-analytics/pages/_app.js  | 46 -------------------
 .../with-google-analytics/pages/contact.js    | 39 ----------------
 examples/with-google-analytics/tsconfig.json  | 24 ++++++++++
 13 files changed, 92 insertions(+), 114 deletions(-)
 rename examples/with-google-analytics/{pages/about.js => app/about/page.tsx} (73%)
 create mode 100644 examples/with-google-analytics/app/contact/page.tsx
 create mode 100644 examples/with-google-analytics/app/layout.tsx
 rename examples/with-google-analytics/{pages/index.js => app/page.tsx} (100%)
 rename examples/with-google-analytics/components/{Header.js => Header.tsx} (100%)
 delete mode 100644 examples/with-google-analytics/components/Page.js
 create mode 100644 examples/with-google-analytics/components/Page.tsx
 delete mode 100644 examples/with-google-analytics/lib/gtag.js
 delete mode 100644 examples/with-google-analytics/pages/_app.js
 delete mode 100644 examples/with-google-analytics/pages/contact.js
 create mode 100644 examples/with-google-analytics/tsconfig.json

diff --git a/examples/with-google-analytics/README.md b/examples/with-google-analytics/README.md
index beadddd13fa92..f5e507a140384 100644
--- a/examples/with-google-analytics/README.md
+++ b/examples/with-google-analytics/README.md
@@ -1,6 +1,8 @@
 # Example app with analytics
 
-This example shows how to use [Next.js](https://github.com/vercel/next.js) along with [Google Analytics](https://developers.google.com/analytics/devguides/collection/gtagjs/). A custom [\_app](https://nextjs.org/docs/advanced-features/custom-app) is used to inject [tracking snippet](https://developers.google.com/analytics/devguides/collection/gtagjs/) and track [pageviews](https://developers.google.com/analytics/devguides/collection/gtagjs/pages) and [event](https://developers.google.com/analytics/devguides/collection/gtagjs/events).
+This example shows how to use [Next.js](https://github.com/vercel/next.js) along with [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4).
+
+If you are using the Pages Router, please refer to the [pages/ documentation.](https://nextjs.org/docs/pages/building-your-application/optimizing/third-party-libraries)
 
 ## Deploy your own
 
diff --git a/examples/with-google-analytics/pages/about.js b/examples/with-google-analytics/app/about/page.tsx
similarity index 73%
rename from examples/with-google-analytics/pages/about.js
rename to examples/with-google-analytics/app/about/page.tsx
index 425faf7c40891..4faa020811f94 100644
--- a/examples/with-google-analytics/pages/about.js
+++ b/examples/with-google-analytics/app/about/page.tsx
@@ -1,4 +1,4 @@
-import Page from "../components/Page";
+import Page from "../../components/Page";
 
 export default function About() {
   return (
diff --git a/examples/with-google-analytics/app/contact/page.tsx b/examples/with-google-analytics/app/contact/page.tsx
new file mode 100644
index 0000000000000..f3dcc3ad8e299
--- /dev/null
+++ b/examples/with-google-analytics/app/contact/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+import { useRef, type FormEvent } from "react";
+import Page from "../../components/Page";
+import { sendGTMEvent } from "@next/third-parties/google";
+
+export default function About() {
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    sendGTMEvent({ event: "message submit", value: inputRef.current?.value });
+    inputRef.current!.value = "";
+  };
+
+  return (
+    <Page>
+      <h1>This is the Contact page</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          <span>Message:</span>
+          <textarea ref={inputRef} />
+        </label>
+        <button type="submit">submit</button>
+      </form>
+    </Page>
+  );
+}
diff --git a/examples/with-google-analytics/app/layout.tsx b/examples/with-google-analytics/app/layout.tsx
new file mode 100644
index 0000000000000..d70f969428b47
--- /dev/null
+++ b/examples/with-google-analytics/app/layout.tsx
@@ -0,0 +1,20 @@
+import { GoogleTagManager } from "@next/third-parties/google";
+
+export const metadata = {
+  title: "Google Analytics Next.js",
+  description:
+    "This example shows how to use Next.js along with Google Analytics.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GA_ID as string} />
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-google-analytics/pages/index.js b/examples/with-google-analytics/app/page.tsx
similarity index 100%
rename from examples/with-google-analytics/pages/index.js
rename to examples/with-google-analytics/app/page.tsx
diff --git a/examples/with-google-analytics/components/Header.js b/examples/with-google-analytics/components/Header.tsx
similarity index 100%
rename from examples/with-google-analytics/components/Header.js
rename to examples/with-google-analytics/components/Header.tsx
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
deleted file mode 100644
index 9ecadce7f7766..0000000000000
--- a/examples/with-google-analytics/components/Page.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Header from "./Header";
-
-export default function Page({ children }) {
-  return (
-    <div>
-      <Header />
-      {children}
-    </div>
-  );
-}
diff --git a/examples/with-google-analytics/components/Page.tsx b/examples/with-google-analytics/components/Page.tsx
new file mode 100644
index 0000000000000..dfcbffb41b6d1
--- /dev/null
+++ b/examples/with-google-analytics/components/Page.tsx
@@ -0,0 +1,11 @@
+import Header from "./Header";
+import type { PropsWithChildren } from "react";
+
+export default function Page({ children }: PropsWithChildren<{}>) {
+  return (
+    <div>
+      <Header />
+      {children}
+    </div>
+  );
+}
diff --git a/examples/with-google-analytics/lib/gtag.js b/examples/with-google-analytics/lib/gtag.js
deleted file mode 100644
index c94566a6b0003..0000000000000
--- a/examples/with-google-analytics/lib/gtag.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
-
-// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-export const pageview = (url) => {
-  window.gtag("config", GA_TRACKING_ID, {
-    page_path: url,
-  });
-};
-
-// https://developers.google.com/analytics/devguides/collection/gtagjs/events
-export const event = ({ action, category, label, value }) => {
-  window.gtag("event", action, {
-    event_category: category,
-    event_label: label,
-    value: value,
-  });
-};
diff --git a/examples/with-google-analytics/package.json b/examples/with-google-analytics/package.json
index bf29745bfe271..7de4ab0f211ae 100644
--- a/examples/with-google-analytics/package.json
+++ b/examples/with-google-analytics/package.json
@@ -6,8 +6,14 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/third-parties": "^14.2.3",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.12.12",
+    "@types/react": "^18.3.2",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/examples/with-google-analytics/pages/_app.js b/examples/with-google-analytics/pages/_app.js
deleted file mode 100644
index 0db9173c454da..0000000000000
--- a/examples/with-google-analytics/pages/_app.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import Script from "next/script";
-import { useEffect } from "react";
-import * as gtag from "../lib/gtag";
-
-const App = ({ Component, pageProps }) => {
-  const router = useRouter();
-  useEffect(() => {
-    const handleRouteChange = (url) => {
-      gtag.pageview(url);
-    };
-    router.events.on("routeChangeComplete", handleRouteChange);
-    return () => {
-      router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, [router.events]);
-
-  return (
-    <>
-      <Head>
-        <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>
-      {/* Global Site Tag (gtag.js) - Google Analytics */}
-      <Script
-        strategy="afterInteractive"
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
-      />
-      <Component {...pageProps} />
-    </>
-  );
-};
-
-export default App;
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js
deleted file mode 100644
index 22c64093ae2db..0000000000000
--- a/examples/with-google-analytics/pages/contact.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component } from "react";
-import Page from "../components/Page";
-
-import * as gtag from "../lib/gtag";
-
-export default class Contact extends Component {
-  state = { message: "" };
-
-  handleInput = (e) => {
-    this.setState({ message: e.target.value });
-  };
-
-  handleSubmit = (e) => {
-    e.preventDefault();
-
-    gtag.event({
-      action: "submit_form",
-      category: "Contact",
-      label: this.state.message,
-    });
-
-    this.setState({ message: "" });
-  };
-
-  render() {
-    return (
-      <Page>
-        <h1>This is the Contact page</h1>
-        <form onSubmit={this.handleSubmit}>
-          <label>
-            <span>Message:</span>
-            <textarea onChange={this.handleInput} value={this.state.message} />
-          </label>
-          <button type="submit">submit</button>
-        </form>
-      </Page>
-    );
-  }
-}
diff --git a/examples/with-google-analytics/tsconfig.json b/examples/with-google-analytics/tsconfig.json
new file mode 100644
index 0000000000000..1d4f624eff7d9
--- /dev/null
+++ b/examples/with-google-analytics/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}