chore: send analytics data on all navigation ends to both material and ng ids. (#401)

josephperrott · web-flow · commit 6747c77fdf13 · 2018-02-22T10:55:52.000-08:00
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
@@ -35,6 +35,7 @@ import {
 import {HttpClientModule} from '@angular/common/http';
 import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
+import {GaService} from './shared/ga/ga';
 
 @NgModule({
   imports: [
@@ -66,6 +67,7 @@ import {environment} from '../environments/environment';
   providers: [
     ComponentPageTitle,
     DocumentationItems,
+    GaService,
     GuideItems,
     StyleManager,
     ThemeStorage,
diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts
@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 import {Router, NavigationEnd} from '@angular/router';
 import {filter} from 'rxjs/operators/filter';
 
+import {GaService} from './shared/ga/ga';
 
 @Component({
   selector: 'material-docs-app',
@@ -11,7 +12,7 @@ import {filter} from 'rxjs/operators/filter';
 })
 export class MaterialDocsApp {
 
-  constructor(router: Router) {
+  constructor(router: Router, ga: GaService) {
     let previousRoute = router.routerState.snapshot.url;
 
     router.events
@@ -24,6 +25,7 @@ export class MaterialDocsApp {
         }
 
         previousRoute = data.urlAfterRedirects;
+        ga.locationChanged(data.urlAfterRedirects);
       });
   }
 }
diff --git a/src/app/shared/ga/ga.ts b/src/app/shared/ga/ga.ts
@@ -0,0 +1,41 @@
+import {Injectable} from '@angular/core';
+
+import {environment} from '../../../environments/environment';
+
+@Injectable()
+/**
+ * Google Analytics Service - captures app behaviors and sends them to Google Analytics (GA).
+ * Presupposes that GA script has been loaded from a script on the host web page.
+ * Associates data with a GA "property" from the environment (`gaId`).
+ */
+export class GaService {
+
+  private previousUrl: string;
+
+  constructor() {
+    this.ga('create', environment['matGaId'] , 'auto', 'mat');
+    this.ga('create', environment['ngGaId'] , 'auto', 'ng');
+  }
+
+  locationChanged(url: string) {
+    this.sendPage(url);
+  }
+
+  sendPage(url: string) {
+    // Won't re-send if the url hasn't changed.
+    if (url === this.previousUrl || !environment.production) {
+      return;
+    }
+    this.previousUrl = url;
+    this.ga('set', 'page', '/' + url);
+    this.ga('mat.send', 'pageview');
+    this.ga('ng.send', 'pageview');
+  }
+
+  ga(...args: any[]) {
+    const gaFn = (window as any)['ga'];
+    if (gaFn) {
+      gaFn(...args);
+    }
+  }
+}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  matGaId: 'UA-8594346-24', // Production id
+  ngGaId: 'UA-8594346-15', // Production id
+  production: true,
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -4,5 +4,7 @@
 // The list of which env maps to which file can be found in `angular-cli.json`.
 
 export const environment = {
-  production: false
+  matGaId: '', // No development id for Material
+  ngGaId: 'UA-8594346-26', // Development id
+  production: false,
 };
diff --git a/src/index.html b/src/index.html
@@ -24,16 +24,20 @@
 <body class="docs-app-background">
   <material-docs-app></material-docs-app>
   <script>
-    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-    ga('create', 'UA-8594346-24', 'auto');
-    ga('send', 'pageview');
+  // Note this is a customised version of the GA tracking snippet
+  // See the comments below for more info
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
+  ~i.name.indexOf('NG_DEFER_BOOTSTRAP')|| // only load library if not running e2e tests
+  m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   </script>
   <script>
     // This hides the address bar on mobile browsers
     // https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
     window.addEventListener('load',function() { window.scrollTo(0, 1); });
   </script>
-  <script async src='https://www.google-analytics.com/analytics.js'></script>
   <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
 </body>

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';`
`2`	`2`	`import {Router, NavigationEnd} from '@angular/router';`
`3`	`3`	`import {filter} from 'rxjs/operators/filter';`
`4`	`4`
	`5`	`+import {GaService} from './shared/ga/ga';`
`5`	`6`
`6`	`7`	`@Component({`
`7`	`8`	`selector: 'material-docs-app',`
`@@ -11,7 +12,7 @@ import {filter} from 'rxjs/operators/filter';`
`11`	`12`	`})`
`12`	`13`	`export class MaterialDocsApp {`
`13`	`14`
`14`		`- constructor(router: Router) {`
	`15`	`+ constructor(router: Router, ga: GaService) {`
`15`	`16`	`let previousRoute = router.routerState.snapshot.url;`
`16`	`17`
`17`	`18`	`router.events`
`@@ -24,6 +25,7 @@ export class MaterialDocsApp {`
`24`	`25`	`}`
`25`	`26`
`26`	`27`	`previousRoute = data.urlAfterRedirects;`
	`28`	`+ ga.locationChanged(data.urlAfterRedirects);`
`27`	`29`	`});`
`28`	`30`	`}`
`29`	`31`	`}`