add google analytics

src/app/app.component.ts

@@ -1,4 +1,7 @@
 import { Component } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+
+declare let gtag: Function;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -6,5 +9,13 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
 
-  constructor() { }
+  constructor(public router: Router) {
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        gtag('config', 'G-48B6CKS0V6',{
+            'page_path': event.urlAfterRedirects
+          });
+      }
+    })
+  }
 }

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { TimezoneListComponent } from './timezone/components/timezone-list/timezone-list.component';
 import { FiveoclockComponent } from './fiveoclock/fiveoclock.component';
 import { TimezoneSingleComponent } from './timezone/components/timezone-single/timezone-single.component';
+import { GoogleAnalyticsService } from './services/google-analytics.service';
 @NgModule({
   declarations: [
     AppComponent,
@@ -20,7 +21,10 @@ import { TimezoneSingleComponent } from './timezone/components/timezone-single/t
     BrowserAnimationsModule,
     AppRoutingModule,
   ],
-  providers: [TimezoneService],
+  providers: [
+    TimezoneService,
+    GoogleAnalyticsService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/fiveoclock/fiveoclock.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { interval, startWith } from 'rxjs';
+import { GoogleAnalyticsService } from '../services/google-analytics.service';
 import { GetClosestTimezoneFrom, Timezone, TimezoneCompare, TimezoneList } from '../timezone/models/timezone.model';
 import { TimezoneService } from '../timezone/services/timezone.service';
 
@@ -17,7 +18,10 @@ export class FiveoclockComponent implements OnInit {
 
   timezones: string[] =[]
 
-  constructor(private timezoneService: TimezoneService){
+  constructor(
+    private timezoneService: TimezoneService,
+    private googleAnalyticsService: GoogleAnalyticsService
+    ){
     this.timezones = this.timezoneService.getTimezones()
     var second = interval(1000).pipe(startWith(0))
 
@@ -36,7 +40,17 @@ export class FiveoclockComponent implements OnInit {
   ngOnInit(): void { }
 
   toggleView(){
+    if(this.showAll){
+      this.googleAnalyticsService.emitEvent('select_content', {
+        'event_label' : 'timezone_closest',
+      })
+    }else{
+      this.googleAnalyticsService.emitEvent('select_content', {
+        'event_label' : 'timezone_list',
+      })
+    }
     this.showAll = !this.showAll
+
   }
 
 }

src/app/services/google-analytics.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GoogleAnalyticsService } from './google-analytics.service';
+
+describe('GoogleAnalyticsService', () => {
+  let service: GoogleAnalyticsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GoogleAnalyticsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/google-analytics.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+declare let gtag: Function;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GoogleAnalyticsService {
+
+  constructor() { }
+
+  public emitEvent(name: string, event: any) {
+    
+    gtag('event', name, event)
+  }
+
+}

src/index.html

@@ -6,6 +6,15 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- <link rel="icon" type="image/x-icon" href="favicon.ico">ng serv -->
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-48B6CKS0V6"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-48B6CKS0V6');
+  </script>
 </head>
 <body>
   <app-root></app-root>