Merge pull request #560 from openjck/issue-554-google-analytics

Fix #554: Add Google Analytics support
mozilla · Jun 9, 2020 · a738a1c · a738a1c
2 parents f8dbb18 + 61587a6
commit a738a1c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 2 deletions.
diff --git a/.env-dist b/.env-dist
@@ -11,3 +11,4 @@ AUTH0_FRONTEND_CLIENT_ID=
 AUTH0_ORIGIN=
 AUTH0_AUDIENCE_ID=
 AUTH0_API_SCOPE=
+GA_TRACKING_ID=
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,9 @@ module.exports = {
     es6: true,
   },
   extends: ['airbnb-base'],
+  globals: {
+    gtag: 'readonly',
+  },
   plugins: ['jest', 'svelte3'],
   rules: {
     'import/prefer-default-export': 'off',

diff --git a/glam/settings.py b/glam/settings.py
@@ -120,6 +120,9 @@ class Core(Configuration):
         ],
     }
 
+    GA_TRACKING_ID = values.Value("", environ_name="GA_TRACKING_ID",
+        environ_prefix=None)
+
 
 class Base(Core):
     """Configuration that may change per-environment, some with defaults."""

diff --git a/glam/urls.py b/glam/urls.py
@@ -1,3 +1,4 @@
+from django.conf import settings
 from django.urls import path
 from django.views.generic.base import TemplateView
 
@@ -6,7 +7,16 @@
 
 
 urlpatterns = [
-    path("", TemplateView.as_view(template_name="index.html"), name="index"),
+    path(
+        "",
+        TemplateView.as_view(
+            template_name="index.html",
+            extra_context={
+                "GA_TRACKING_ID": settings.GA_TRACKING_ID,
+            }
+        ),
+        name="index"
+    ),
     path("api/v1/data/", api_views.aggregations, name="v1-data"),
     path("api/v1/probes/", api_views.probes, name="v1-probes"),
     path("api/v1/probes/random/", api_views.random_probes, name="v1-random-probes"),

diff --git a/public/index.html b/public/index.html
@@ -1,6 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id={{ GA_TRACKING_ID }}"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', '{{ GA_TRACKING_ID }}');
+    </script>
+
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
 

diff --git a/rollup.config.js b/rollup.config.js
@@ -19,7 +19,10 @@ export default {
   },
   plugins: [
     json(),
-    replace({ __BASE_DOMAIN__: production ? '' : 'http://localhost:8000' }),
+    replace({
+      __BASE_DOMAIN__: production ? '' : 'http://localhost:8000',
+      __GA_TRACKING_ID__: process.env.GA_TRACKING_ID,
+    }),
     svelte({
       // enable run-time checks when not in production
       dev: !production,

diff --git a/src/routing/Router.svelte b/src/routing/Router.svelte
@@ -71,6 +71,14 @@
     };
   }
 
+  // Google Analytics middleware
+  page((ctx, next) => {
+    gtag('config', '__GA_TRACKING_ID__', {
+      page_path: ctx.pathname,
+    });
+    next();
+  });
+
   page('/', useComponent(Home));
   page('/:product/:section/:probeName/explore', useComponent(ProbeExplore, 'explore'));
   page('/:product/:section/:probeName/table', useComponent(ProbeTable, 'table'));