How can I track usage metrics in an Angular2 app?

Question

How can things like click events, pages visited, time spent on a specific page, etc be tracked in an Angular2 app? Are there any packages that do this or must I reinvent the wheel by using a lot of manual logging.

Answer 1

Tracking and analytics aren't a core responsibility of AngularJS. Usage analytics is a pretty broad subject and depends greatly on use-case, so there's no simple and correct answer to your question. However, there are plenty of open source and paid tools that do this.

I would recommend looking into Google Analytics, Mixpanel, and Heap which offer some free usage depending on the amount of traffic you have. If you're looking for more customization and to full "own" the data, you might want to check out Snowplow, which is a free solution but requires more work to setup and manage.

Answer 2

I'd go with Google Tag Manager plus whatever you want. GTM is the cleanest and best solution to separate your applications source code and tracking codes. Also it comes with many useful features that will boost your workflow. A cookie opt-out for all of your tracking code is set up in no longer than 5 minutes.

As tracking tool I prefer Google Analytics. The combination is pretty simple. To send data from Angular 2 to Google Tag Manager / Analytics / Anything else see this example for a page view:

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

@Component({
    selector: 'my-app',
    templateUrl: './app.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [],
})

declare let ga:Function;
export class AppComponent {
    constructor(public router:Router) {
        this.router.events.subscribe(
            (event:Event) => {
                if (event instanceof NavigationEnd) {
                    ga('send', 'pageview', event.urlAfterRedirects);
                }
            });
    }
}

from: http://blog.thecodecampus.de/angular-2-google-analytics-google-tag-manager