From 9b4c6e893911d7f77069b92bd61b4a1542a0ad14 Mon Sep 17 00:00:00 2001 From: Alexis Hernandez Date: Tue, 16 Jan 2018 23:17:27 -0600 Subject: [PATCH] alerts-ui: integrate google analytics via gtag --- alerts-ui/src/app/app.component.ts | 29 +++++++++++++++++-- .../src/environments/environment.prod.ts | 3 ++ alerts-ui/src/environments/environment.ts | 4 +++ alerts-ui/src/index.html | 9 ++++++ 4 files changed, 42 insertions(+), 3 deletions(-) diff --git a/alerts-ui/src/app/app.component.ts b/alerts-ui/src/app/app.component.ts index d2f48c9..38af98f 100644 --- 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) => { + (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 index b772ee5..88910dc 100644 --- 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 index 7fa0ec7..1d6e0a1 100644 --- 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 index dedac24..aa639e2 100644 --- a/alerts-ui/src/index.html +++ b/alerts-ui/src/index.html @@ -7,6 +7,15 @@ + + + + +