feat: add google analytics

nikosanif · Jan 16, 2022 · 6857211 · 6857211
1 parent 68b4811
commit 6857211
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 2 deletions.
diff --git a/src/app/app/app.component.ts b/src/app/app/app.component.ts
@@ -1,9 +1,35 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+import { ConfigService, GoogleAnalyticsService } from '../core/services';
 
 @Component({
   selector: 'aa-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(
+    private router: Router,
+    private configService: ConfigService,
+    private googleAnalyticsService: GoogleAnalyticsService
+  ) {}
+
+  ngOnInit() {
+    if (this.configService.isProd()) {
+      this.setupGoogleAnalytics();
+    }
+  }
+
+  private setupGoogleAnalytics() {
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(navigationEndEvent => {
+        this.googleAnalyticsService.sendPageView(
+          (navigationEndEvent as NavigationEnd).urlAfterRedirects
+        );
+      });
+  }
+}
diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts
@@ -13,6 +13,15 @@ export class ConfigService {
     return environment;
   }
 
+  /**
+   * Indicates whether the apps is running in production mode
+   *
+   * @return {*}  {boolean}
+   */
+  isProd(): boolean {
+    return environment.production;
+  }
+
   /**
    * Returns app's version
    */

diff --git a/src/app/core/services/google-analytics.service.ts b/src/app/core/services/google-analytics.service.ts
@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+
+declare const gtag: any;
+const GOOGLE_ANALYTICS_ID = 'UA-217340656-1';
+
+@Injectable({ providedIn: 'root' })
+export class GoogleAnalyticsService {
+  protected gtag: any;
+
+  constructor() {
+    if (typeof gtag !== 'undefined') {
+      this.gtag = gtag;
+    }
+  }
+
+  sendEvent = (
+    eventName: string,
+    eventCategory: string,
+    eventAction: string,
+    eventLabel: string | null = null,
+    eventValue: number | null = null
+  ) => {
+    if (!this.gtag) {
+      return;
+    }
+
+    this.gtag('event', eventName, {
+      eventCategory,
+      eventLabel,
+      eventAction,
+      eventValue,
+    });
+  };
+
+  sendPageView(url: string) {
+    if (!this.gtag) {
+      return;
+    }
+
+    this.gtag('config', GOOGLE_ANALYTICS_ID, { page_path: url });
+  }
+}
diff --git a/src/app/core/services/index.ts b/src/app/core/services/index.ts
@@ -1,3 +1,4 @@
 export * from './config.service';
+export * from './google-analytics.service';
 export * from './local-storage.service';
 export * from './token-storage.service';
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#5b0fff" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+
+    <!-- BEGIN: Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-217340656-1"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+    </script>
+    <!-- END: Google Analytics -->
   </head>
   <body>
     <aa-root></aa-root>