Googleanalytics-angular NPM

googleanalytics-angular

Google Analytics for your Angular application

Install

$ npm install --save googleanalytics-angular

Usage

Configuration

The Google Analytics tracking script is not included in this module. Make sure to add it to your page.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GoogleAnalyticsModule, GA_TOKEN } from 'googleanalytics-angular';

import { AppComponent } from './app.component';

@NgModule({
	imports: [
		BrowserModule,
		GoogleAnalyticsModule.forRoot()
	],
	declarations: [
		AppComponent
	],
	bootstrap: [AppComponent],
	providers: [
		{ provide: GA_TOKEN, useValue: 'UA-TOKEN-1' }
	]
})
export class AppModule { }

It's also possible to leave the configuration empty and configure the library later on through the service.

@NgModule({
	imports: [
		BrowserModule,
		GoogleAnalyticsModule.forRoot()
	],
	declarations: [
		AppComponent
	],
	bootstrap: [AppComponent]
})
export class AppModule { }

Service

Inject the GoogleAnalyticsService into your components or services.

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from 'googleanalytics-angular';

@Component({
	templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

	constructor(
		private gaService: GoogleAnalyticsService
	) { }

	ngOnInit() {
		this.gaService.event.emit({
			category: 'app',
			action: 'bootstrap'
		});
	}
}

Configuration

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from 'googleanalytics-angular';

@Component({
	templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

	constructor(
		private gaService: GoogleAnalyticsService
	) { }

	ngOnInit() {
		this.gaService.configure('UA-TOKEN-1');
	}
}

Named Tracker

More information about named trackers can be found here.

import { Component, OnInit } from '@angular/core';
import { GoogleAnalyticsService } from 'googleanalytics-angular';

@Component({
	templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

	constructor(
		private gaService: GoogleAnalyticsService
	) { }

	ngOnInit() {
		var options = { 
			clientId: 'clientId',
			cookieDomain: 'auto',
			name: 'trackerName',
			namedTracker: true
		}

		this.gaService.configure('UA-TOKEN-1', options);
	}
}