fix(app): track pageviews in Google Analytics

#173
tomastrajan · Apr 24, 2018 · 3eb484a · 3eb484a
1 parent 3fb24c0
commit 3eb484a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 40 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Title } from '@angular/platform-browser';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { ActivationEnd, Router } from '@angular/router';
+import { ActivationEnd, Router, NavigationEnd } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -14,7 +14,7 @@ import {
 } from '@app/core';
 import { environment as env } from '@env/environment';
 
-import { NIGHT_MODE_THEME, selectorSettings } from './settings';
+import { NIGHT_MODE_THEME, selectorSettings, SettingsState } from './settings';
 
 @Component({
   selector: 'anms-root',
@@ -51,43 +51,9 @@ export class AppComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.store
-      .select(selectorSettings)
-      .pipe(takeUntil(this.unsubscribe$))
-      .subscribe(settings => {
-        const { theme, autoNightMode } = settings;
-        const hours = new Date().getHours();
-        const effectiveTheme = (autoNightMode && (hours >= 20 || hours <= 6)
-          ? NIGHT_MODE_THEME
-          : theme
-        ).toLowerCase();
-        this.componentCssClass = effectiveTheme;
-        const classList = this.overlayContainer.getContainerElement().classList;
-        const toRemove = Array.from(classList).filter((item: string) =>
-          item.includes('-theme')
-        );
-        classList.remove(...toRemove);
-        classList.add(effectiveTheme);
-      });
-    this.store
-      .select(selectorAuth)
-      .pipe(takeUntil(this.unsubscribe$))
-      .subscribe(auth => (this.isAuthenticated = auth.isAuthenticated));
-    this.router.events
-      .pipe(
-        takeUntil(this.unsubscribe$),
-        filter(event => event instanceof ActivationEnd)
-      )
-      .subscribe((event: ActivationEnd) => {
-        let lastChild = event.snapshot;
-        while (lastChild.children.length) {
-          lastChild = lastChild.children[0];
-        }
-        const { title } = lastChild.data;
-        this.titleService.setTitle(
-          title ? `${title} - ${env.appName}` : env.appName
-        );
-      });
+    this.subscribeToSettings();
+    this.subscribeToIsAuthenticated();
+    this.subscribeToRouterEvents();
   }
 
   ngOnDestroy(): void {
@@ -102,4 +68,67 @@ export class AppComponent implements OnInit, OnDestroy {
   onLogoutClick() {
     this.store.dispatch(new ActionAuthLogout());
   }
+
+  private subscribeToIsAuthenticated() {
+    this.store
+      .select(selectorAuth)
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe(auth => (this.isAuthenticated = auth.isAuthenticated));
+  }
+
+  private subscribeToSettings() {
+    this.store
+      .select(selectorSettings)
+      .pipe(takeUntil(this.unsubscribe$))
+      .subscribe(settings => this.setTheme(settings));
+  }
+
+  private setTheme(settings: SettingsState) {
+    const { theme, autoNightMode } = settings;
+    const hours = new Date().getHours();
+    const effectiveTheme = (autoNightMode && (hours >= 20 || hours <= 6)
+      ? NIGHT_MODE_THEME
+      : theme
+    ).toLowerCase();
+    this.componentCssClass = effectiveTheme;
+    const classList = this.overlayContainer.getContainerElement().classList;
+    const toRemove = Array.from(classList).filter((item: string) =>
+      item.includes('-theme')
+    );
+    classList.remove(...toRemove);
+    classList.add(effectiveTheme);
+  }
+
+  private subscribeToRouterEvents() {
+    this.router.events
+    .pipe(
+      takeUntil(this.unsubscribe$),
+      filter(event => event instanceof ActivationEnd || event instanceof NavigationEnd)
+    )
+    .subscribe((event: ActivationEnd) => {
+      if (event instanceof ActivationEnd) {
+        this.setPageTitle(event);
+      }
+
+      if (event instanceof NavigationEnd) {
+        this.trackPageView(event);
+      }
+    });
+  }
+
+  private setPageTitle(event: ActivationEnd) {
+    let lastChild = event.snapshot;
+    while (lastChild.children.length) {
+      lastChild = lastChild.children[0];
+    }
+    const { title } = lastChild.data;
+    this.titleService.setTitle(
+      title ? `${title} - ${env.appName}` : env.appName
+    );
+  }
+
+  private trackPageView(event: NavigationEnd) {
+    (<any>window).ga('set', 'page', event.urlAfterRedirects);
+    (<any>window).ga('send', 'pageview');
+  }
 }
diff --git a/src/index.html b/src/index.html
@@ -85,7 +85,6 @@
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
     ga('create', 'UA-53234284-5', 'auto');
-    ga('send', 'pageview');
   </script>
 </body>
 </html>