Better GA with pageviews and events

vercel · Apr 16, 2018 · 57710fb · 57710fb
1 parent 23dd604
commit 57710fb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git a/components/Layout.js b/components/Layout.js
@@ -6,6 +6,11 @@ import SearchList from './SearchList'
 import AppleLogo from '../static/apple-logo.svg'
 import LinuxLogo from '../static/linux-logo.svg'
 import WindowsLogo from '../static/windows-logo.svg'
+import * as gtag from '../lib/gtag'
+
+Router.onRouteChangeComplete = url => {
+  gtag.pageview(url)
+}
 
 export default class extends React.Component {
   constructor() {

diff --git a/components/PluginInfo.js b/components/PluginInfo.js
@@ -2,6 +2,7 @@ import Gravatar from 'react-gravatar'
 import Link from 'next/link'
 import InstallModal from './InstallModal'
 import GithubIcon from '../static/github-icon.svg'
+import * as gtag from '../lib/gtag'
 
 export default class extends React.Component {
   constructor() {
@@ -16,6 +17,13 @@ export default class extends React.Component {
   }
 
   openInstallModal() {
+    gtag.event({
+      action: 'Opened install modal',
+      category: 'plugin',
+      label: 'open_install_modal',
+      value: this.props.plugin.meta.name
+    })
+
     this.setState({
       isModalOpen: true
     })

diff --git a/lib/gtag.js b/lib/gtag.js
@@ -0,0 +1,16 @@
+export const GA_TRACKING_ID = 'UA-117491914-1'
+
+export const pageview = url => {
+  window.gtag('config', GA_TRACKING_ID, {
+    page_location: url
+  })
+}
+
+export const event = ({ action, category, label, value }) => {
+  console.log(action, category, label, value)
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value
+  })
+}
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,5 +1,7 @@
 import Document, { Head, Main, NextScript } from 'next/document'
 
+import { GA_TRACKING_ID } from '../lib/gtag'
+
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx)
@@ -9,25 +11,23 @@ export default class MyDocument extends Document {
   render() {
     return (
       <html>
-        <Head>
-          <style>{`body { margin: 0 } /* custom! */`}</style>
-        </Head>
-        <body className="custom_class">
+        <Head />
+        <body>
           <Main />
           <NextScript />
           <script
             async
-            src="https://www.googletagmanager.com/gtag/js?id=UA-117491914-1"
+            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());
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
 
-            gtag('config', 'UA-117491914-1');
-          `
+                gtag('config', '${GA_TRACKING_ID}');
+              `
             }}
           />
         </body>