a11smiles

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
ga('create', 'UA-173474946-1', 'auto');
ga('send', 'pageview');

a11smiles

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-173474946-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-173474946-1');
</script>

a11smiles

import { Injectable } from '@angular/core';
import { Router, RouterEvent, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { environment } from '../environments/environment';

declare var gtag: any;

@Injectable({
  providedIn: 'root'
})

a11smiles

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { GoogleAnalyticsService } from './google-analytics.service';

@NgModule({
  declarations: [

a11smiles

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from './google-analytics.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Google Analytics Service';

a11smiles

logEvent(event, category, label, value) {
  gtag('event', event, {
    event_category: category,
    event_label: label,
    value: value
  });

  console.log('gtag event captured...');
}

a11smiles

<button (click)="click()">Click Me!</button>

a11smiles

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from '../google-analytics.service';

@Component({
  selector: 'app-first-page',
  templateUrl: './first-page.component.html',
  styleUrls: ['./first-page.component.scss']
})
export class FirstPageComponent implements OnInit {
  private _clickCnt = 0;

a11smiles

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from '../google-analytics.service';

@Component({
  template: '',
})
export class BasePageComponent implements OnInit {

  constructor(protected $gaService: GoogleAnalyticsService) { }

a11smiles

import { Component, OnInit } from '@angular/core';
import { BasePageComponent } from '../base-page/base-page.component';

@Component({
  selector: 'app-first-page',
  templateUrl: './first-page.component.html',
  styleUrls: ['./first-page.component.scss']
})
export class FirstPageComponent extends BasePageComponent implements OnInit {
  private _clickCnt = 0;