Source: https://scotch.io/

Date: 2019-11-16

You now have an Angular app with two components that you can navigate easily between. It is now time to add our Google Analytics code to track the user activity. We do this by adding the tracking code into our index.html file. However, since we are building a single page application, we must send our page views manually and therefore, we remove the ga('send', 'pageview');line, which is responsible for transmitting the page views, from our code.

<script>    (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-xxxxx-xxx', 'auto');  // Change the UA-ID to the one you got from Google Analytics</script>

To manually send our page views to Google Analytics, we import the Router and NavigationEnd from @angular/router into our app.component.ts. We then subscribe to the router.events property to trigger a page view when we move from one route to another.

import { Component } from '@angular/core';
import {Router, NavigationEnd} from '@angular/router'; // import Router and NavigationEnd

    // declare ga as a function to set and sent the events
    declare let ga: Function;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    title = 'app';

    constructor(public router: Router) {

    // subscribe to router events and send page views to Google Analytics
    this.router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');

        }

    });
    }

}

Now we need to create links to navigate between our components. Add the following router link to your component-1.component.html file to navigate to component-2.

<p>    component-1 works!</p><button type="button" class="btn btn-primary" routerLink="/component-2">Go To Component 2</button>

Add another router link to component-2.component.html to navigate back to component-1.

<button type="button" class="btn btn-primary" routerLink="/">Go To Component 1</button>

Now serve your application, go to http://localhost:4200 and move fromcomponent-1 to component-2.

Congratulations, you can now track the different pages a user visits when he accesses your website.

Add Event Tracking

We may want to do more than just track a users page visits on a site. Using a real world example of a picture sharing app, we may want to track when a user clicks the like button on a particular photo and why. We do this by creating a service with an event emitter that takes in the eventCategory, eventAction, eventLabel as well as eventValue and submits it to Google Analytics.

import { Injectable } from '@angular/core';

declare let ga:Function; // Declare ga as a function

@Injectable()
export class GoogleAnalyticsService {

    constructor() { }

    //create our event emitter to send our data to Google Analytics
    public eventEmitter(eventCategory: string,
                    eventAction: string,
                    eventLabel: string = null,
                    eventValue: number = null) {
        ga('send', 'event', {
            eventCategory: eventCategory,
            eventLabel: eventLabel,
            eventAction: eventAction,
            eventValue: eventValue
        });

    }

}

We then import our service to the app.module.ts file and add it as a provider.

import {GoogleAnalyticsService} from "./google-analytics.service"; // import our Google Analytics service

providers: [GoogleAnalyticsService], //add it as a provider

Assuming that our component-2 is a page where a user has shared a picture, we add an image and a like button to the component-2.component.html. Our like button, will have a click event that triggers the sendLikeEvent() function.

<div class = "row" style="padding-top:150px;">    <div class = "col-md-5 offset-3 text-center">    <img src="assets/man-1352025_960_720.png" width="500px" height="300px" style="padding-bottom:30px;"><br/>    <button type="button" class="btn btn-primary btn-lg center" (click)="SendLikeEvent()">Like</button>    </div></div>