🔍 Analytics tracking

Closes #56
trendwerk · Aug 21, 2020 · 59c4153 · 59c4153
1 parent 355fb85
commit 59c4153
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/.env.development b/.env.development
@@ -3,3 +3,4 @@ LANGUAGE=nl
 NODE_TLS_REJECT_UNAUTHORIZED=0
 SITE_URL=https://localhost:3000
 WP_URL=https://headless-wordpress.lndo.site
+TRACKING_ID=UA-XXXXXXX-Y
diff --git a/next.config.js b/next.config.js
@@ -8,7 +8,9 @@ const redirects = async () => [
   },
 ]
 
+const { SITE_URL, TRACKING_ID, WP_URL } = process.env
+
 module.exports = transpiled({
-  env: { SITE_URL: process.env.SITE_URL, WP_URL: process.env.WP_URL },
+  env: { SITE_URL, TRACKING_ID, WP_URL },
   redirects,
 })
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,6 +1,24 @@
 import 'styles/main.css'
+import Router from 'next/router'
+import { useEffect } from 'react'
 
 const App = function ({ Component, pageProps }) {
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      return
+    }
+
+    const sendView = (path) => {
+      window.gtag('config', process.env.TRACKING_ID, { page_path: path })
+    }
+
+    Router.events.on('routeChangeComplete', sendView)
+
+    return () => {
+      Router.events.off('routeChangeComplete', sendView)
+    }
+  }, [])
+
   return <Component {...pageProps} />
 }
 

diff --git a/pages/_document.js b/pages/_document.js
@@ -9,7 +9,7 @@ export default class extends Document {
   render() {
     return (
       <Html lang={process.env.LANGUAGE} className="antialiased">
-        <Head />
+        <Head>{process.env.NODE_ENV === 'production' && <Analytics />}</Head>
         <body>
           <Main />
           <NextScript />
@@ -18,3 +18,28 @@ export default class extends Document {
     )
   }
 }
+
+const Analytics = () => (
+  <>
+    <script
+      async
+      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.TRACKING_ID}`}
+    />
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+
+          gtag('js', new Date());
+          gtag('config', '${process.env.TRACKING_ID}', {
+            page_path: window.location.pathname
+          });
+        `,
+      }}
+    />
+  </>
+)