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

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

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

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

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

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

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"

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

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

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

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

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

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

...
...

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

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

Subscribe
Notify of
guest
5 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
usmansaleh

if you still using ionic3 then follow
https://ionicframework.com/docs/v3/native/google-analytics/

Kamlesh

wonderful article….

Satya Chowdary

for ios ttracing result showig null

Adam

Hi, what’s your version of “cordova-plugin-google-analytics” and “@ionic-native/google-analytics” ?