Update Google Analytics example for App Router

vercel · May 21, 2024 · 9fd0a4a · 9fd0a4a
1 parent af49a5b
commit 9fd0a4a
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 114 deletions.
diff --git 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/...ples/with-google-analytics/pages/about.js → .../with-google-analytics/app/about/page.tsx b/...ples/with-google-analytics/pages/about.js → .../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
@@ -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
@@ -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} />
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/...ples/with-google-analytics/pages/index.js → examples/with-google-analytics/app/page.tsx b/...ples/with-google-analytics/pages/index.js → examples/with-google-analytics/app/page.tsx
diff --git a/...ith-google-analytics/components/Header.js → ...th-google-analytics/components/Header.tsx b/...ith-google-analytics/components/Header.js → ...th-google-analytics/components/Header.tsx
diff --git a/examples/with-google-analytics/components/Page.js b/examples/with-google-analytics/components/Page.js
diff --git a/examples/with-google-analytics/components/Page.tsx 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
diff --git 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
diff --git a/examples/with-google-analytics/pages/contact.js b/examples/with-google-analytics/pages/contact.js