Add Google Analytics in Ionic 3 Application using Cordova and Ionic Native Plugin

Google Analytics is a tried and tested tool which helps to track user activity in a number of ways. We can get information on wide variety of categories like most pages a user entered or left, how much time they spent, from where they came, by which means they landed etc, not only this but we can now also get gender percentage and age group of people visiting.

Similar to a website it’s important to keep track of such activity in mobile applications. We can use this analytical data to optimize user interface and make better SEO strategies.

In this article, we will go through a few steps which will add the power of Google Analytics in your Ionic 3 Application. Using Google Analytics we get information of the most version of application used, the location of users, pages most used and we can also track events which are triggered by users.

Also See: Ionic 4 | Adding Google Analytics in Ionic 4 Application

Let’s begin!

First, we will create a new Ionic 3 Application with Sidebar template to test Google Analytics in with different pages.

Make sure you have the latest version of Ionic CLI installed

$ npm install -g [email protected]

Create a new application

$ ionic start Ionic3GA sidebar
$ cd Ionic3GA

Now as our application is ready, Next we will install Google Analytics Plugin

Install the Cordova and Ionic Native plugins

$ ionic cordova plugin add cordova-plugin-google-analytics
$ npm install --save @ionic-native/google-analytics

How to Get Google Analytics Tracking ID for Mobile Device Tracking

You need to follow these steps to Tracking ID for mobile devices otherwise tracking will not work for trackViews method. A normal Tracking ID is only for WebPages.

Step 1) Visit Google Analytics here then Sign In

Step 2) Select “Website” fill information then click “Get Tracking ID”. If first time then you need to accept term & conditions.

Step 3) Now You will already have a property “IonicGADemo”,

Step 4) Now click on “+ Create View” to create new Track ID for mobile. Then Select “Mobile app” fill a name then click “Create View”

Step 5) Now click on “Tracking code” under property to get a Tracking ID

Use this Tracking ID in the code below and replace it with UA-XXXXXXXXX-X

Now as you have Tracking ID you can proceed with further steps

Add this plugin to your app’s module

open app.module.ts file then import these plugins and add in providers array

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { GoogleAnalytics } from '@ionic-native/google-analytics';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    GoogleAnalytics,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Implementation of Google Analytics Methods in Application

Next, we will add GA code in the application to track Views a user visited and we will also add an event which will be triggered by user tap.

In app.component.ts file add the following code to start tracking with the provided Tracking ID

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { GoogleAnalytics } from '@ionic-native/google-analytics';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar, 
    public splashScreen: SplashScreen,
    private ga: GoogleAnalytics
  ) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      this.ga.startTrackerWithId('UA-XXXXXXXXX-X')
      .then(() => {}).catch(e => alert('Error starting GoogleAnalytics == '+ e));

    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

The method startTrackerWithId will start tracking in the application and you will start seeing your device in the Google Analytics dashboard.

Add trackView method in Home and List pages or any other pages you have in the following way. Here we have a list.ts file.

Using trackView method we can send the current page in Google Analytics dashboard. We have also added trackEvent method to record tap event.

// list.ts file in default sidebar template 

...
...

  ionViewDidLoad(){
    this.ga.trackView('List Page')
    .then(() => {})
    .catch(e => console.log(e));
  }


  itemTapped(event, item) {
    this.ga.trackEvent('Category', 'Tapped Action', 'Item Tapped is '+item, 0);
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(ListPage, {
      item: item
    });
  }

...
...

you can check more event on documentation here 

So now you can track live visitors in your application using the Google Analytics plugin in Ionic 3