feat(docs): Track events for interaction

fixes #38

Author: Airblader

projects/ngqp-demo/src/app/demo.component.html

@@ -14,7 +14,7 @@
             <a class="nav-item" routerLink="/docs" routerLinkActive="active">
                 <span class="nav-link">Documentation</span>
             </a>
-            <a class="nav-item" href="/api-docs">
+            <a class="nav-item" href="/api-docs" (click)="onSwitchToApiDocs()">
                 <span class="nav-link">API</span>
             </a>
         </div>

projects/ngqp-demo/src/app/demo.component.ts

@@ -27,4 +27,8 @@ export class DemoComponent {
         analytics.startTracking(router);
     }
 
+    public onSwitchToApiDocs() {
+        this.analytics.trackEvent(`Switched to API Docs`);
+    }
+
 }

projects/ngqp-demo/src/app/shared/analytics.service.ts

@@ -23,7 +23,12 @@ export class AnalyticsService {
             map(event => event as NavigationEnd),
         ).subscribe(event => {
             const url = event.urlAfterRedirects;
-            gtag('config', 'UA-131508204-1', { 'page_path': url });
+
+            try {
+                gtag('config', 'UA-131508204-1', { 'page_path': url });
+            } catch (ignored) {
+                // Ignored
+            }
         });
     }
 
@@ -32,7 +37,11 @@ export class AnalyticsService {
             return;
         }
 
-        gtag('event', action);
+        try {
+            gtag('event', action);
+        } catch (ignored) {
+            // Ignored
+        }
     }
 
 }

projects/ngqp-demo/src/app/shared/demo-browser/demo-browser.component.html

@@ -1,7 +1,7 @@
 <div class="demo-browser__toolbar">
     <div class="demo-browser__buttons">
         <button class="demo-browser__button" title="{{ routerAdapter.history.length }} previous route(s)"
-                (click)="routerAdapter.goBack()" [disabled]="routerAdapter.history.length === 0">
+                (click)="goBack()" [disabled]="routerAdapter.history.length === 0">
             <fa-icon [icon]="faArrowLeft" size="1x"></fa-icon>
         </button>
     </div>
@@ -12,7 +12,7 @@
             <span>app.io</span>
         </span>
         <input #urlInput type="text" class="demo-browser__url__input"
-               [ngModel]="routerAdapter.url" (keyup.enter)="routerAdapter.navigateToQueryParamString($event.target.value)" />
+               [ngModel]="routerAdapter.url" (keyup.enter)="routeTo($event.target.value)" />
     </div>
 </div>
 

projects/ngqp-demo/src/app/shared/demo-browser/demo-browser.component.ts

@@ -1,10 +1,10 @@
 import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { Params } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { NGQP_ROUTER_ADAPTER, QueryParamGroup } from '@ngqp/core';
 import { TestRouterAdapter } from '../../test-router-adapter.service';
+import { AnalyticsService } from '../analytics.service';
 
 @Component({
     selector: 'demo-browser',
@@ -29,7 +29,10 @@ export class DemoBrowserComponent implements OnInit, OnDestroy {
 
     private destroy$ = new Subject<void>();
 
-    constructor(@Inject(NGQP_ROUTER_ADAPTER) public routerAdapter: TestRouterAdapter) {
+    constructor(
+        @Inject(NGQP_ROUTER_ADAPTER) public routerAdapter: TestRouterAdapter,
+        private analytics: AnalyticsService,
+    ) {
     }
 
     public ngOnInit() {
@@ -48,4 +51,14 @@ export class DemoBrowserComponent implements OnInit, OnDestroy {
         this.destroy$.complete();
     }
 
+    public goBack(): void {
+        this.routerAdapter.goBack();
+        this.analytics.trackEvent('Pressed back button in demo browser');
+    }
+
+    public routeTo(url: string) {
+        this.routerAdapter.navigateToQueryParamString(url);
+        this.analytics.trackEvent('Changed URL in demo browser');
+    }
+
 }

projects/ngqp-demo/src/app/shared/demo-example/demo-example.component.html

@@ -1,17 +1,17 @@
-<ngb-tabset [destroyOnHide]="false" class="bordered no-padding">
-    <ngb-tab title="Demo">
+<ngb-tabset [destroyOnHide]="false" (tabChange)="onTabChange($event)" class="bordered no-padding">
+    <ngb-tab id="Demo" title="Demo">
         <ng-template ngbTabContent>
             <ng-content></ng-content>
         </ng-template>
     </ngb-tab>
 
-    <ngb-tab *ngIf="markup" title="HTML">
+    <ngb-tab *ngIf="markup" id="HTML" title="HTML">
         <ng-template ngbTabContent>
             <demo-snippet type="html" [code]="markup" class="m-0"></demo-snippet>
         </ng-template>
     </ngb-tab>
 
-    <ngb-tab *ngIf="typescript" title="Typescript">
+    <ngb-tab *ngIf="typescript" id="Typescript" title="Typescript">
         <ng-template ngbTabContent>
             <demo-snippet type="typescript" [code]="typescript" class="m-0"></demo-snippet>
         </ng-template>

projects/ngqp-demo/src/app/shared/demo-example/demo-example.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input } from '@angular/core';
+import { NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap';
+import { AnalyticsService } from '../analytics.service';
 
 @Component({
     selector: 'demo-example',
@@ -13,4 +15,10 @@ export class DemoExampleComponent {
     @Input()
     public typescript: string;
 
+    constructor(private analytics: AnalyticsService) {}
+
+    public onTabChange(event: NgbTabChangeEvent) {
+        this.analytics.trackEvent(`Switched to ${event.nextId} tab`);
+    }
+
 }

projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.html

@@ -19,7 +19,8 @@
 
                 <ul class="nav flex-column text-muted pt-1">
                     <li *ngFor="let fragment of fragmentService.fragments" class="nav-item">
-                        <a class="nav-link" [attr.data-indent]="fragment.indent" routerLink="." [fragment]="fragment.id">
+                        <a class="nav-link" [attr.data-indent]="fragment.indent"
+                           routerLink="." [fragment]="fragment.id" (click)="onTocClick(fragment.name)">
                             {{ fragment.name }}
                         </a>
                     </li>

projects/ngqp-demo/src/app/shared/docs-item/docs-item.component.ts

@@ -4,6 +4,7 @@ import { FragmentsService } from '../docs-fragment/fragments.service';
 import { ActivatedRoute } from '@angular/router';
 import { getPageForRoute } from '../../demo-docs.routes';
 import { DocsPage } from '../../docs-page';
+import { AnalyticsService } from '../analytics.service';
 
 @Component({
     selector: 'docs-item',
@@ -19,8 +20,13 @@ export class DocsItemComponent {
     public navigationCollapsed = true;
 
     constructor(public fragmentService: FragmentsService,
+                private analytics: AnalyticsService,
                 private route: ActivatedRoute) {
         this.docsPage = getPageForRoute(this.route.snapshot.url[0]);
     }
 
+    public onTocClick(name: string): void {
+        this.analytics.trackEvent(`Clicked TOC Link: ${this.docsPage}:${name}`);
+    }
+
 }