feat: use google analytics script (#183)

ricardocasares · Aug 31, 2021 · 33d57e8 · 33d57e8 · vercel · Aug 31, 2021
1 parent 2967f88
commit 33d57e8
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 188 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
   "dependencies": {
     "@geist-ui/react-icons": "^1.0.0",
     "@genql/runtime": "2.6.0",
-    "@next/plugin-google-analytics": "^10.0.6",
     "@next/plugin-sentry": "ricardocasares/next-plugin-sentry",
     "@stitches/react": "^1.0.0",
     "@vercel/fetch": "^6.1.0",

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,16 +1,29 @@
+import { useEffect } from "react";
 import { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { DefaultSeo } from "next-seo";
 import { Providers } from "@/lib/providers";
 import { Layout } from "@/components/Layout";
 import { Header } from "@/components/Header";
 import { Scrollable } from "@/components/Scrollable";
 import { Player } from "@/components/Player";
-import seoProps from "@/config/seo";
 import { globalStyles } from "@/css/global";
+import { pageview } from "@/lib/utils";
+import seoProps from "@/config/seo";
+
 
 export function BembaApp({ Component, pageProps }: AppProps) {
   globalStyles();
 
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleRouteChange = (url: string) => pageview(url);
+    router.events.on("routeChangeComplete", handleRouteChange);
+
+    return () => router.events.off("routeChangeComplete", handleRouteChange);
+  }, [router.events]);
+
   return (
     <Providers>
       <Layout>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -7,6 +7,22 @@ export default class Document extends NextDocument {
       <Html lang="en">
         <Head>
           <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+            }}
+          />
         </Head>
         <body>
           <Main />