googleAnalytics

src/app/_services/googleAnalytics.service.ts

@@ -1,57 +0,0 @@
-import { Injectable } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { environment } from '../../environments/environment';
-
-declare var gtag: Function;
-
-@Injectable({
-  providedIn: 'root',
-})
-export class GoogleAnalyticsService {
-  constructor(private router: Router) {}
-
-  public initialize() {
-    this.onRouteChange();
-
-    // dynamically add analytics scripts to document head
-    try {
-      const url = 'https://www.googletagmanager.com/gtag/js?id=';
-      const gTagScript = document.createElement('script');
-      gTagScript.async = true;
-      gTagScript.src = `${url}${environment.googleAnalyticsId}`;
-      document.head.appendChild(gTagScript);
-
-      const dataLayerScript = document.createElement('script');
-      dataLayerScript.innerHTML = `
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-        gtag('config', '${environment.googleAnalyticsId}', {'send_page_view': false});`;
-      document.head.appendChild(dataLayerScript);
-    } catch (e) {
-      console.error('Error adding Google Analytics', e);
-    }
-  }
-
-  // track visited routes
-  private onRouteChange() {
-    this.router.events.subscribe((event) => {
-      if (event instanceof NavigationEnd) {
-        gtag('config', environment.googleAnalyticsId, {
-          page_path: event.urlAfterRedirects,
-        });
-        console.log('Sending Google Analytics tracking for: ', event.urlAfterRedirects);
-        console.log('Google Analytics property ID: ', environment.googleAnalyticsId);
-      }
-    });
-  }
-
-  // use gtag.js to send Google Analytics Events
-  public event(action: string, eventCategory?: string, eventLabel?: string, value?: string) {
-    gtag('event', action, {
-      ...(eventCategory && { event_category: eventCategory }),
-      ...(eventLabel && { event_label: eventLabel }),
-      ...(value && { value: value }),
-    });
-  }
-}

src/app/app.component.ts

@@ -2,8 +2,6 @@ import {Component, OnInit} from '@angular/core';
 import { CommonModule, DatePipe, ViewportScroller } from '@angular/common';
 import { RouterOutlet, NavigationEnd, Router, RouterLink, RouterLinkActive  } from '@angular/router';
 import { RequestComponent } from './request/request.component';
-import {GoogleAnalyticsService} from "./_services/googleAnalytics.service";
-import {environment} from "../environments/environment";
 
 @Component({
   selector: 'app-root',
@@ -20,15 +18,11 @@ export class AppComponent implements OnInit{
 
   ngOnInit(){
     this.dateNow = new Date;
-    if (environment.production) {
-      this.googleAnalyticsService.initialize();
-    }
   }
 
   constructor(
     readonly router: Router,
     readonly viewportScroller: ViewportScroller,
-    private readonly googleAnalyticsService: GoogleAnalyticsService
   ) {
 
     router.events.subscribe((event) => {

src/app/request/request.component.ts

@@ -4,6 +4,7 @@ import {FormGroup, ReactiveFormsModule, FormBuilder, Validators} from "@angular/
 import {ActivatedRoute, Router} from "@angular/router";
 import {NgIf} from "@angular/common";
 import {Metrika} from "ng-yandex-metrika";
+declare var gtag
 
 @Component({
   selector: 'request',
@@ -57,6 +58,8 @@ export class RequestComponent implements OnInit {
     this.hidden = false;
     this.success = false;
     this.metrika.reachGoal('form-open').then();
+    gtag('event', 'form-open', {'event_name':'form-open',
+      'value': 'form-open'   })
     this.ngOnInit()
   }
 
@@ -71,6 +74,8 @@ export class RequestComponent implements OnInit {
     if (this.feedbackForm.valid)
       this.formsService.save('model', 'feedback-form-support', null, this.feedbackForm.value).subscribe(res => {
         this.metrika.reachGoal('form-sent').then();
+        gtag('event', 'form-sent', {'event_name':'form-sent',
+          'value': 'form-sent'   })
         this.success = true;
       }, error => {
         console.log(error);

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="assets/favicon.svg">
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-B8183299MH"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'G-B8183299MH');
+  </script>
 </head>
 <body>
   <app-root></app-root>