feat(docs): Added Google Analytics

Airblader · Airblader · commit aea857a377dc · 2018-12-30T04:49:04.000+01:00
fixes #35
diff --git a/projects/ngqp-demo/src/app/demo.component.ts b/projects/ngqp-demo/src/app/demo.component.ts
@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { FragmentScrollService } from './shared/fragment-scroll.service';
-import { Router } from '@angular/router';
+import { AnalyticsService } from './shared/analytics.service';
 
 @Component({
     selector: 'demo-root',
@@ -10,6 +11,7 @@ import { Router } from '@angular/router';
     providers: [
         // This cannot be provided in root
         FragmentScrollService,
+        AnalyticsService,
     ],
 })
 export class DemoComponent {
@@ -19,9 +21,11 @@ export class DemoComponent {
 
     constructor(
         private fragmentScroller: FragmentScrollService,
+        private analytics: AnalyticsService,
         private router: Router,
     ) {
         fragmentScroller.startFragmentScroller(router);
+        analytics.startTracking(router);
     }
 
     public closeNav() {
diff --git a/projects/ngqp-demo/src/app/shared/analytics.service.ts b/projects/ngqp-demo/src/app/shared/analytics.service.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+
+declare const gtag: Function;
+
+@Injectable()
+export class AnalyticsService {
+
+    private readonly enabled: boolean;
+
+    constructor() {
+        this.enabled = window && window.location && window.location.href.includes('ngqp.io');
+    }
+
+    public startTracking(router: Router): void {
+        if (!this.enabled) {
+            return;
+        }
+
+        router.events.pipe(
+            filter(event => event instanceof NavigationEnd),
+            map(event => event as NavigationEnd),
+        ).subscribe(event => {
+            const url = event.urlAfterRedirects;
+            gtag('config', 'UA-131508204-1', { 'page_path': url });
+        });
+    }
+
+    public trackEvent(action: string): void {
+        if (!this.enabled) {
+            return;
+        }
+
+        gtag('event', action);
+    }
+
+}
diff --git a/projects/ngqp-demo/src/index.html b/projects/ngqp-demo/src/index.html
@@ -28,10 +28,19 @@
         <meta property="og:image:type" content="image/svg+xml"/>
 
         <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+        <script async defer src="https://buttons.github.io/buttons.js"></script>
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-131508204-1"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() {
+                dataLayer.push(arguments);
+            }
+
+            gtag('js', new Date());
+        </script>
     </head>
     <body>
         <demo-root></demo-root>
     </body>
-
-    <script async defer src="https://buttons.github.io/buttons.js"></script>
 </html>
