From 8c49fc7f3dbac603b47e9349e5d7ebf8dd2d656a Mon Sep 17 00:00:00 2001
From: Joel Wetzell <jwetzell@yahoo.com>
Date: Fri, 17 Dec 2021 22:27:55 -0600
Subject: [PATCH] add google analytics

---
 src/app/app.component.ts                        | 13 ++++++++++++-
 src/app/app.module.ts                           |  6 +++++-
 src/app/fiveoclock/fiveoclock.component.ts      | 16 +++++++++++++++-
 .../services/google-analytics.service.spec.ts   | 16 ++++++++++++++++
 src/app/services/google-analytics.service.ts    | 17 +++++++++++++++++
 src/index.html                                  |  9 +++++++++
 6 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/app/services/google-analytics.service.spec.ts
 create mode 100644 src/app/services/google-analytics.service.ts

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index b13f2e1..5916a01 100644
--- a/src/app/app.component.ts
+++ b/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
+          });
+      }
+    })
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 791f938..2a94c1f 100644
--- a/src/app/app.module.ts
+++ b/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 { }
diff --git a/src/app/fiveoclock/fiveoclock.component.ts b/src/app/fiveoclock/fiveoclock.component.ts
index 54c9ea0..f8826bb 100644
--- a/src/app/fiveoclock/fiveoclock.component.ts
+++ b/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
+
   }
 
 }
diff --git a/src/app/services/google-analytics.service.spec.ts b/src/app/services/google-analytics.service.spec.ts
new file mode 100644
index 0000000..3329024
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/services/google-analytics.service.ts b/src/app/services/google-analytics.service.ts
new file mode 100644
index 0000000..c16bfd2
--- /dev/null
+++ b/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)
+  }
+
+}
diff --git a/src/index.html b/src/index.html
index f31b605..2f33622 100644
--- a/src/index.html
+++ b/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>