Analytics in Ionic 3: Easily Track Page Views with a Custom Decorator

This post was originally posted on Medium.

If you develop a production Ionic app chances are you also want to integrate some kind of analytics to analyse how your app is being used. There are a lot of different options available like Google Analytics, Firebase or Flurry Analytics, but all they have in common: you have to implement to implement the tracking of your individual views.

I am usually using @ionic-native/google-analytics in my apps and since I did not really want to add this.googleAnalytics.trackView(‘SomePage’) manually to every page I tried different approaches to implement automatic view tracking. What I ended up using is a custom decorator I just need to add to any page I want to track.

How does this decorator look like?

Glad you asked. Like this:

	import { Events } from 'ionic-angular';
	import { CoreModule } from '../core/core.module';
	export function PageTrack(): ClassDecorator {
	return function (constructor: any) {
	const ionViewDidEnter = constructor.prototype.ionViewDidEnter;
	constructor.prototype.ionViewDidEnter = function (...args: any[]) {
	const events = CoreModule.injector.get(Events);
	events.publish('view:enter', this.constructor.name);
	ionViewDidEnter && ionViewDidEnter.apply(this, args);
	}
	}
	}

view raw page-track.decorator.ts hosted with ❤ by GitHub

To use it you have to modify your core module as well. If you don’t have a core module you can just do the same in your app.module.ts. (Don’t forget to change line 3 in page-track.decorator.ts in that case!)

Core module example:

	import { Injector } from '@angular/core';
	import { NgModule } from '@angular/core';
	@NgModule({
	declarations: [],
	imports: [],
	exports: [],
	providers: [],
	})
	export class CoreModule {
	public static injector: Injector;
	constructor(injector: Injector) {
	CoreModule.injector = injector;
	}
	}

view raw core.module.ts hosted with ❤ by GitHub

And now you just have to import and add the PageTrack() decorator to your page component:

	import { Component } from '@angular/core';
	import { IonicPage } from 'ionic-angular';
	import { PageTrack } from '../shared/page-track.decorator';
	@PageTrack()
	@IonicPage()
	@Component({
	selector: 'page-example',
	templateUrl: './example.page.html',
	})
	export class EventLocationPage {
	constructor() { }
	}

view raw page-track-example.page.ts hosted with ❤ by GitHub

That’s it!

So how does this work?

What the page track decorator basically does is publish a ‘view:enter’ event every time a view is being entered which also passes the page name (the name of the page component to be exact).
I am using the ionViewDidEnter life cycle event of Ionic to achieve that, but you could also use other events depending on when you want the event to be published.

So all I have to do is listen to the ‘view:enter’ event in an analytics service for example and do the actual view tracking there:

	import { Injectable } from '@angular/core';
	import { GoogleAnalytics } from '@ionic-native/google-analytics';
	import { Events } from 'ionic-angular';
	@Injectable()
	export class AnalyticsService {
	constructor(
	private events: Events,
	private googleAnalytics: GoogleAnalytics,
	) {
	// subscribe to the view:enter event
	this.events.subscribe('view:enter', (view: string) => {
	// do the actual tracking
	this.googleAnalytics.trackPage(view);
	});
	}
	}

view raw analytics-example.service.ts hosted with ❤ by GitHub

I think this is a pretty neat way to add page tracking to an Ionic app. What do you think?

Comments

[Petr Filipchyk]

this is a great approach!
thank you