Add GA (#19)

I don't want to collect personal data but I'm interested on how many people is on the website. I'll disable everything else on GA.
cherta · Mar 14, 2020 · 6ab2666 · 6ab2666 · vercel · Mar 14, 2020
1 parent 74abcd1
commit 6ab2666
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/lib/gtag.js b/lib/gtag.js
@@ -0,0 +1,8 @@
+export const GA_TRACKING_ID = "UA-39629146-7";
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = url => {
+  window.gtag("config", GA_TRACKING_ID, {
+    page_path: url
+  });
+};
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,13 +1,13 @@
 import App from "next/app";
 import Head from "next/head";
+import Router from "next/router";
 import React from "react";
 import { ThemeProvider } from "styled-components";
+import * as gtag from "../lib/gtag";
 
-const theme = {
-  colors: {
-    primary: "#0070f3"
-  }
-};
+Router.events.on("routeChangeComplete", url => gtag.pageview(url));
+
+const theme = {}; // Leaving this here just in case
 
 export default class RemoteUYApp extends App {
   render() {

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,29 +1,59 @@
-import Document from 'next/document'
-import { ServerStyleSheet } from 'styled-components'
+import Document, { Head, Main, NextScript } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+import { GA_TRACKING_ID } from "../lib/gtag";
 
 export default class RemoteUYDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet()
-    const originalRenderPage = ctx.renderPage
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
-        })
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        });
 
-      const initialProps = await Document.getInitialProps(ctx)
+      const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
         styles: (
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
           </>
-        ),
-      }
+        )
+      };
     } finally {
-      sheet.seal()
+      sheet.seal();
     }
   }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `
+            }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
 }