Revert "chore: replace gtag implementation w/ next.js" (#51)

Revert "chore: replace gtag implementation w/ next.js (#49)" This reverts commit 9a4037d.
laurelin60 · Apr 3, 2024 · 5a1b728 · 5a1b728
1 parent 9a4037d
commit 5a1b728
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 22 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,10 +1,9 @@
-import { GoogleAnalytics } from "@next/third-parties/google";
-
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import GoogleAnalytics from "@/components/GoogleAnalytics";
 import { Toaster } from "@/components/ui/toaster";
 
 const inter = Inter({ subsets: ["latin"], fallback: ["sans-serif"] });
@@ -42,7 +41,7 @@ export default function RootLayout({
             <body className={inter.className}>
                 <div className="flex flex-col place-content-center bg-background text-text">
                     <Header />
-                    <GoogleAnalytics gaId="G-PMNW29ZB3Y" />
+                    <GoogleAnalytics />
                     {children}
                     <Footer />
                     <Toaster />

diff --git a/components/GoogleAnalytics.tsx b/components/GoogleAnalytics.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import Script from "next/script";
+import * as gtag from "@/lib/gtag";
+
+const GoogleAnalytics = () => {
+    return (
+        <>
+            <Script
+                strategy="afterInteractive"
+                src={`https://www.googletagmanager.com/gtag/js?id=${gtag.NEXT_PUBLIC_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.NEXT_PUBLIC_GA_TRACKING_ID}', {
+                      page_path: window.location.pathname,
+                      });
+                    `,
+                }}
+            />
+        </>
+    );
+};
+
+export default GoogleAnalytics;
diff --git a/lib/gtag.ts b/lib/gtag.ts
@@ -0,0 +1,10 @@
+// https://stackoverflow.com/questions/77063977/implementing-google-analytics-in-nextjs-13-app-directory
+
+export const NEXT_PUBLIC_GA_TRACKING_ID: string | undefined =
+    process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
+export const pageview = (url: string) => {
+    (window as any).gtag("config", NEXT_PUBLIC_GA_TRACKING_ID, {
+        page_path: url,
+    });
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,6 @@
         "test:watch": "jest --watch"
     },
     "dependencies": {
-        "@next/third-parties": "^14.1.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",