From fb8a1924bb7381af07aeb7c9e181499ad333d834 Mon Sep 17 00:00:00 2001
From: Sol Irvine <sol@zenzen.io>
Date: Wed, 6 Sep 2023 16:23:57 -0700
Subject: [PATCH] fix: Swap out GTM provider

---
 app/[locale]/analytics.tsx | 47 ++++++++++++++++++++++++++++++++++++++
 app/[locale]/layout.tsx    | 13 ++++-------
 lib/gtm.ts                 | 22 ++++++++++++++++++
 3 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 app/[locale]/analytics.tsx
 create mode 100644 lib/gtm.ts
diff --git a/app/[locale]/analytics.tsx b/app/[locale]/analytics.tsx
new file mode 100644
index 000000000..5bf3619dd
--- /dev/null
+++ b/app/[locale]/analytics.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { GTM_ID, pageview } from 'lib/gtm';
+import { usePathname, useSearchParams } from 'next/navigation';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (pathname) {
+      pageview(pathname);
+    }
+  }, [pathname, searchParams]);
+
+  if (process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production') {
+    return null;
+  }
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer', '${GTM_ID}');
+  `
+        }}
+      />
+    </>
+  );
+}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 75f03f241..13e6a7067 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -2,10 +2,10 @@ import { Lato, Noto_Serif_JP } from 'next/font/google';
 import localFont from 'next/font/local';
 import { ReactNode, Suspense } from 'react';
 
-import { GoogleProvider } from 'app/context/google-provider';
 import { SupportedLocale } from 'components/layout/navbar/language-control';
 import { NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
+import Analytics from './analytics';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -88,8 +88,6 @@ export default async function RootLayout({
     notFound();
   }
 
-  const shouldTrack = process.env.NODE_ENV === 'production';
-
   return (
     <html
       lang={params.locale}
@@ -97,11 +95,10 @@ export default async function RootLayout({
     >
       <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
         <NextIntlClientProvider locale={params?.locale} messages={messages}>
-          <GoogleProvider isShowing={shouldTrack}>
-            <Suspense>
-              <main>{children}</main>
-            </Suspense>
-          </GoogleProvider>
+          <Suspense>
+            <Analytics />
+            <main>{children}</main>
+          </Suspense>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/lib/gtm.ts b/lib/gtm.ts
new file mode 100644
index 000000000..da1d70a5c
--- /dev/null
+++ b/lib/gtm.ts
@@ -0,0 +1,22 @@
+// lib/gtm.ts
+type WindowWithDataLayer = Window & {
+  dataLayer: Record<string, any>[];
+};
+
+declare const window: WindowWithDataLayer;
+
+export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
+
+export const pageview = (url: string) => {
+  if (typeof window.dataLayer !== 'undefined') {
+    window.dataLayer.push({
+      event: 'pageview',
+      page: url
+    });
+  } else {
+    console.debug({
+      event: 'pageview',
+      page: url
+    });
+  }
+};
