bring back google analytics for both app/pages routers (graphql#1674)

dimaMachina · web-flow · commit d0794fef865e · 2024-03-31T00:25:20.000+03:00
* bring back google analytics

* add for app router as well

* do not render locally
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 import nextra from "nextra"
 import path from "node:path"
 import withLess from "next-with-less"
@@ -55,6 +57,8 @@ export default withLess(
       // If you want to cache the remote images, you can set the time to live of the cache in seconds.
       // The default value is 0 seconds.
       nextImageExportOptimizer_remoteImageCacheTTL: "0",
+      NEXT_PUBLIC_GA_ID:
+        process.env.NODE_ENV === "production" ? "UA-44373548-16" : "",
     },
     trailingSlash: true,
     // Only for local development, skip 200 statusCode due following error:
diff --git a/src/app/ga.tsx b/src/app/ga.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import Script from "next/script"
+
+export default function GoogleAnalytics() {
+  const gaId = process.env.NEXT_PUBLIC_GA_ID
+  if (!gaId) {
+    return null
+  }
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+      />
+      <Script
+        id="gtag-init"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${gaId}', {
+              page_path: location.pathname,
+            });
+          `,
+        }}
+      />
+    </>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react"
 import { Metadata } from "next"
 import { Roboto_Flex } from "next/font/google"
+import GoogleAnalytics from "@/app/ga"
 import "../globals.css"
 
 const font = Roboto_Flex({
@@ -31,7 +32,10 @@ export default function RootLayout({
       <head>
         <style>{`html { scroll-padding-top: 5rem }`}</style>
       </head>
-      <body className="bg-conf-black">{children}</body>
+      <body className="bg-conf-black">
+        <GoogleAnalytics />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,19 +1,36 @@
 import type { AppProps } from "next/app"
+import { Roboto_Flex, Roboto_Mono } from "next/font/google"
+import { useRouter } from "next/router"
+import { useEffect } from "react"
 import "@/globals.css"
 import "@/codemirror.less"
 import "@/index.less"
-import { Roboto_Flex, Roboto_Mono } from "next/font/google"
 
 const robotoFlex = Roboto_Flex({
-  // weight: ["300", """500", "600", "700"],
   subsets: ["latin"],
 })
 
 const robotoMono = Roboto_Mono({
   subsets: ["latin"],
 })
 
+const gaId = process.env.NEXT_PUBLIC_GA_ID
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+function handleRouteChange(url: string) {
+  ;(window as any).gtag("config", gaId, { page_path: url })
+}
+
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter()
+  useEffect(() => {
+    if (!gaId) return
+    router.events.on("routeChangeComplete", handleRouteChange)
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange)
+    }
+  }, [])
+
   return (
     <>
       <style jsx global>{`
