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

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);
    }
  }
}

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;
  }
}

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() { }

}

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);
    });
  }

}

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