feat: add GA tracking to app

won23 · Sep 13, 2020 · e441f74 · e441f74
1 parent c6f410a
commit e441f74
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 1 deletion.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -14,6 +14,11 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: '12'
+      - name: Create DotENV config
+        uses: SpicyPizza/create-envfile@v1
+        with:
+          envkey_NEXT_PUBLIC_ANALYTICS_ID: ${{ secrets.INPUT_ENVKEY_GA_ID }}
+          file_name: .env
       - name: Install Dependencies
         run: |
           yarn

diff --git a/src/lib/gtag.tsx b/src/lib/gtag.tsx
@@ -0,0 +1,18 @@
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_ANALYTICS_ID;
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export { pageView, event };
+
+const pageView = (url) => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_path: url,
+  });
+};
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+const event = ({ action, category, label, value }) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  });
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,10 +1,13 @@
 import { ThemeProvider, CSSReset } from '@chakra-ui/core';
 import '../styles/global.css';
 import customTheme from '../styles/theme';
-
+import Router from 'next/router';
+import * as gtag from 'src/lib/gtag'; //https://hoangtrinhj.com/using-google-analytics-with-next-js
 interface IProps {
   [key: string]: any;
 }
+// Notice how we track pageview when route is changed
+Router.events.on('routeChangeComplete', (url) => gtag.pageView(url));
 
 export default function App({ Component, pageProps }: IProps) {
   return (

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,4 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { GA_TRACKING_ID } from 'src/lib/gtag';
 
 class MyDocument extends Document {
   // static async getInitialProps(ctx) {
@@ -18,6 +19,25 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Alegreya+Sans&display=swap"
             rel="stylesheet"
           ></link>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+          />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                <script>
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){dataLayer.push(arguments);}
+                  gtag('js', new Date());
+                
+                  gtag('config', '${GA_TRACKING_ID}', {
+                    page_path: window.location.pathname,
+                  });
+                </script>
+              `,
+            }}
+          />
         </Head>
 
         <body>

diff --git a/types.d.ts b/types.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  gtag: any;
+}