alerts-ui: integrate google analytics via gtag

AlexITC · Jan 17, 2018 · 9b4c6e8 · 9b4c6e8
1 parent 8e27bb6
commit 9b4c6e8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 3 deletions.
diff --git a/alerts-ui/src/app/app.component.ts b/alerts-ui/src/app/app.component.ts
@@ -1,15 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+
+import 'rxjs/add/operator/distinctUntilChanged';
+
 import { TranslateService } from '@ngx-translate/core';
 
+import { environment } from '../environments/environment';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'Crypto Coin Alerts';
 
-  constructor(translate: TranslateService) {
+  constructor(
+      translate: TranslateService,
+      private router: Router) {
+
     translate.setDefaultLang('en');
 
     // TODO: choose lang based on the user preferences
@@ -19,6 +28,20 @@ export class AppComponent {
     translate.setTranslation('en', this.englishLang());
   }
 
+  ngOnInit() {
+    // integrate google analytics via gtag - based on https://stackoverflow.com/a/47658214/3211175
+    this.router.events.distinctUntilChanged((previous: any, current: any) => {
+      // Subscribe to any `NavigationEnd` events where the url has changed
+      if (current instanceof NavigationEnd) {
+        return previous.url === current.url;
+      }
+
+      return true;
+    }).subscribe((x: any) => {
+      (<any>window).gtag('config', environment.gtag.id, { 'page_path': x.url });
+    });
+  }
+
   englishLang(): Object {
     return {
       // default messages from angular

diff --git a/alerts-ui/src/environments/environment.prod.ts b/alerts-ui/src/environments/environment.prod.ts
@@ -5,5 +5,8 @@ export const environment = {
   },
   recaptcha: {
     siteKey: '6LewFT8UAAAAAIBai79H-KQH37pk83YRC5scVGdj'
+  },
+  gtag: {
+    id: 'UA-112495411-1'
   }
 };
diff --git a/alerts-ui/src/environments/environment.ts b/alerts-ui/src/environments/environment.ts
@@ -10,5 +10,9 @@ export const environment = {
   },
   recaptcha: {
     siteKey: '6Lesrz8UAAAAAEJT7iYUhWJfq04v8uTB-lFgFyOY'
+  },
+  gtag: {
+    // don't track events on dev
+    id: 'UA-XXXXXXXXX-X'
   }
 };
diff --git a/alerts-ui/src/index.html b/alerts-ui/src/index.html
@@ -7,6 +7,15 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-112495411-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+  </script>
+
 </head>
 <body>
   <app-root></app-root>