web-ui: Integrate analytics

6 years ago · 29dae2177e
4 changed files with 53 additions and 3 deletions
--- a/web-ui/src/app/app.component.ts
+++ b/web-ui/src/app/app.component.ts
@ -1,19 +1,26 @@
-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 { DEFAULT_LANG, LanguageService } from './services/language.service';

+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 {

  constructor(
    private translate: TranslateService,
-    private languageService: LanguageService) {
+    private languageService: LanguageService,
+    private router: Router) {

    translate.setDefaultLang(DEFAULT_LANG);
    translate.use(languageService.getLang());
@ -22,6 +29,32 @@ 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) => {
+      const dirtyUrl: string = x.url || '';
+      const url = this.removeQueryParams(dirtyUrl);
+      console.log('reporting: ' + url);
+      (<any>window).gtag('config', environment.gtag.id, { 'page_path': url });
+    });
+  }
+
+  private removeQueryParams(url: string): string {
+    const index = url.indexOf('?');
+    if (index >= 0) {
+      return url.substring(0, index);
+    } else {
+      return url;
+    }
+  }
+
  englishLang(): Object {
    return {
      // default messages from angular
--- a/web-ui/src/environments/environment.prod.ts
+++ b/web-ui/src/environments/environment.prod.ts
@ -2,5 +2,8 @@ export const environment = {
  production: true,
  api: {
    url: 'https://xsnexplorer.io/api'
+  },
+  gtag: {
+    id: 'UA-65008315-3'
  }
 };
--- a/web-ui/src/environments/environment.ts
+++ b/web-ui/src/environments/environment.ts
@ -7,5 +7,9 @@ export const environment = {
  production: false,
  api: {
    url: 'http://localhost:9000'
+  },
+  gtag: {
+    // don't track events on dev
+    id: 'UA-XXXXXXXXX-X'
  }
 };
--- a/web-ui/src/index.html
+++ b/web-ui/src/index.html
@ -7,6 +7,16 @@

  <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-65008315-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-65008315-3');
+  </script>
 </head>
 <body>
  <app-root></app-root>