Fix analytics (#328)

google · Feb 2, 2022 · e4976a2 · e4976a2
1 parent 560802e
commit e4976a2
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 21,629 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -23,7 +23,6 @@
     "lodash.get": "^4.4.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-gtag": "^1.11.0",
     "vue-mq": "^1.0.1",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
@@ -33,6 +32,7 @@
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@tailwindcss/typography": "^0.4.0",
     "@types/dompurify": "^2.2.1",
+    "@types/gtag.js": "0.0.8",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",

diff --git a/app/public/index.html b/app/public/index.html
@@ -22,6 +22,17 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Google Dev Library | What will you build?</title>
+
+    <!-- Google Tag Manager -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2BDY03FSVV"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){window.dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      // Opt-out of page view measurement by default
+      gtag('config', 'G-2BDY03FSVV', { 'send_page_view': false });
+    </script>
 
     <!-- Verification for Google Search Console -->
     <meta name="google-site-verification" content="3Fs4HuD7rC0LxPmCZjCIeaa_EmMrN2kfpkg4LyfI2nM" />

diff --git a/app/src/components/CookieBar.vue b/app/src/components/CookieBar.vue
@@ -40,6 +40,7 @@
 import { Component, Vue } from "vue-property-decorator";
 
 import MaterialButton from "@/components/MaterialButton.vue";
+import { pageView } from "@/plugins/gtag";
 
 @Component({
   components: {
@@ -69,20 +70,8 @@ export default class CookieBar extends Vue {
   }
 
   public grantConsent() {
-    // See:
-    // - https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out
-    // - https://matteo-gabriele.gitbook.io/vue-gtag/opt-in-out
-    this.$gtag.optIn();
-
     // After optIn make sure we trigger a page view to capture the current page
-    this.$gtag.pageview({
-      // eslint-disable-next-line
-      page_title: this.$route.name || "Unknown", 
-      // eslint-disable-next-line
-      page_path: this.$route.path,
-      // eslint-disable-next-line
-      page_location: window.location.href
-    });
+    pageView(this.$route);
   }
 }
 </script>

diff --git a/app/src/main.ts b/app/src/main.ts
@@ -15,7 +15,6 @@
  */
 
 import Vue from "vue";
-import VueGtag from "vue-gtag";
 
 import App from "./App.vue";
 import router from "./router";
@@ -30,19 +29,6 @@ import "@/assets/css/fonts.css";
 // Icons
 import "@/plugins/icons";
 
-// Analytics
-Vue.use(
-  VueGtag,
-  {
-    config: { id: "G-2BDY03FSVV" },
-
-    // Disable until the user accepts cookies
-    // https://matteo-gabriele.gitbook.io/vue-gtag/opt-in-out
-    enabled: false,
-  },
-  router
-);
-
 // Media Queries
 // eslint-disable-next-line
 import VueMq from "vue-mq";

diff --git a/app/src/plugins/gtag.ts b/app/src/plugins/gtag.ts
@@ -0,0 +1,16 @@
+/**
+ * See:
+ * https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
+ */
+
+import { Route } from "vue-router";
+
+export function routeChange(route: Route) {
+  gtag("set", "page_path", route.path);
+  gtag("set", "page_title", route.name || "Unknown");
+}
+
+export function pageView(route: Route) {
+  routeChange(route);
+  gtag("event", "page_view");
+}
diff --git a/app/src/router/index.ts b/app/src/router/index.ts
@@ -24,6 +24,7 @@ import Repo from "../views/Repo.vue";
 import Authors from "../views/Authors.vue";
 import Author from "../views/Author.vue";
 import FourOhFour from "../views/FourOhFour.vue";
+import { routeChange } from "@/plugins/gtag";
 
 Vue.use(VueRouter);
 
@@ -83,4 +84,11 @@ const router = new VueRouter({
   },
 });
 
+router.afterEach((to, from) => {
+  if (to.path !== from.path) {
+    console.log(`router: ${from.path} --> ${to.path}`);
+    routeChange(to);
+  }
+});
+
 export default router;
diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -13,7 +13,8 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "@types/gtag.js"
     ],
     "paths": {
       "@/*": [