Add integration with Google Analytics

madebyais · Jul 24, 2021 · 3782e5d · 3782e5d
1 parent 7f6a225
commit 3782e5d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -25,6 +25,9 @@ For base css style, you can go to [TailwindCSS](https://tailwindcss.com/) docume
 #### Header
 - 2 plug-n-play header components
 
+#### Others
+- Google Analytics
+
 ### Getting Started
 
 Before getting started, you can clone this project or run following command:

diff --git a/next.config.js b/next.config.js
@@ -11,6 +11,9 @@ module.exports = {
     FACEBOOK_CLIENT_SECRET: process.env.FACEBOOK_CLIENT_SECRET,
     FACEBOOK_REDIRECT_URI: process.env.FACEBOOK_REDIRECT_URI,
     FACEBOOK_OAUTH_SCOPE: process.env.FACEBOOK_OAUTH_SCOPE,
-    FACEBOOK_OAUTH_FIELDS: process.env.FACEBOOK_OAUTH_FIELDS
+    FACEBOOK_OAUTH_FIELDS: process.env.FACEBOOK_OAUTH_FIELDS,
+
+    GOOGLE_ANALYTICS_ENABLE: process.env.GOOGLE_ANALYTICS_ENABLE || false,
+    GOOGLE_ANALYTICS_TRACKING_ID: process.env.GOOGLE_ANALYTICS_TRACKING_ID
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,21 @@
 import '../styles/style.css'
 import type { AppProps } from 'next/app'
+import { NextRouter, useRouter } from 'next/dist/client/router'
+import { useEffect } from 'react'
+import * as GoogleAnalytics from 'util/google-analytics'
 
 function App({ Component, pageProps }: AppProps) {
+  const router: NextRouter = useRouter()
+
+  useEffect(() => {
+    const routerEventsChange = () => router.events.on('routeChangeComplete', GoogleAnalytics.pageview)
+
+    routerEventsChange()
+    return () => {
+      routerEventsChange()
+    }
+  }, [router.events])
+
   return <Component {...pageProps} />
 }
 export default App
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -7,6 +7,23 @@ class _Document extends Document {
         <Head>
           <link rel='icon' href='/favicon.ico' />
           <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==' crossOrigin='anonymous' />
+
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${process.env.GOOGLE_ANALYTICS_TRACKING_ID}', {
+                  page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
         </Head>
         <body>
           <Main />

diff --git a/util/google-analytics.ts b/util/google-analytics.ts
@@ -0,0 +1,13 @@
+export const pageview = (url: string) => {
+  if (process.env.GOOGLE_ANALYTICS_ENABLE) {
+    // @ts-ignore
+    window.gtag('config', process.env.GOOGLE_ANALYTICS_TRACKING_ID, {
+      page_path: url
+    })
+  }
+}
+
+export const event = ({ action, params }: any) => {
+  // @ts-ignore
+  window.gtag('event', action, params)
+}