Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Use Google Analytics In An Ionic Android And iOS App

TwitterFacebookRedditLinkedInHacker News

If you’re making a great app chances are you’re going to want to know who else thinks its great. This an be determined by how many people are using your application, what they are doing within the application, or how long they are using your application for. This data can be tracked in iOS and Android using Google Analytics. We are lucky enough to be able to use Google Analytics within an Ionic 2 mobile application.

If you’ve been keeping up with my blog you’ll know I wrote about using Google Analytics in an Ionic Framework 1 application. This time we’re going to see how to use Google Analytics in an Ionic 2 application with Angular.

To get the best idea on how to use Google Analytics within our application we’re going to create a new project. From a Command Prompt (Windows) or Terminal (Linux and Mac), execute the following:

ionic start AnalyticsProject blank --v2
cd AnalyticsProject
ionic platform add ios
ionic platform add android

We need to note two things here. First, you must be using the Ionic CLI that supports Ionic 2 applications. Second, if you wish to add and build for the iOS platform you need to be using a Mac.

To use Google Analytics in our project we’re going to make use of the Apache Cordova plugin by Dan Wilson. It can be installed by executing the following:

ionic plugin add cordova-plugin-google-analytics

This will install the plugin for both Android and iOS, assuming of course you’re on a Mac if you’re shooting for iOS.

We’re going to spend our time in three different files. We’re first going to initialize the plugin in the project’s app/app.js file and then apply page specific tracking in the app/pages/home/home.js and app/pages/home/home.html files.

Starting with app/app.js we want to add the following code:

import {App, Platform} from 'ionic-angular';
import {HomePage} from './pages/home/home';


@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
    config: {} // https://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.rootPage = HomePage;
        platform.ready().then(() => {
            window.analytics.startTrackerWithId("UA-XXXXX-YY");
        });
    }
}

Specifically we’re looking at the following:

platform.ready().then(() => {
    window.analytics.startTrackerWithId("UA-XXXXX-YY");
});

Because the plugin for Google Analytics uses native code, we must first make sure the Apache Cordova application is ready to use it. Once the application is ready we can start tracking. Make sure you replace UA-XXXXX-YY with your actual tracking code.

Now we want to add page specific tracking. Starting with the logic file, open your project’s app/pages/home/home.js file and include the following code:

import {Page, Platform} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
    static get parameters() {
        return [[Platform]];
    }

    constructor(platform) {
        this.platform = platform;
        this.platform.ready().then(() => {
            window.analytics.trackView("Home Page");
        });
    }

    trackEvent() {
        this.platform.ready().then(() => {
            window.analytics.trackEvent("Category", "Action", "Label", 25);
        });
    }
}

When the page loads we want to tell Google Analytics where we are. This is why we call trackView from the constructor method. You can label the view whatever you’d like. I chose Home Page because that is the specific page we’re on.

We also have a trackEvent method. When this method is executed we will tell Google about it. This function could be useful if a user attempts to log in, or some other action by the user.

Finally let’s look at our project’s app/pages/home/home.html file which will contain all our UI data:

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button primary (click)="trackEvent()">Track Event</button>
</ion-content>

This is our most simplistic file. We essentially only have a button. When the user clicks the button, it will trigger that event based tracking function that we designed.

Now there are many more types of tracking that can be performed, but for the most part they can be used in the same fashion that we’ve just seen. For this reason, I’ll leave the rest to your imagination. If you want to see the other functions, you can visit the official plugin documentation.

Conclusion

Tracking Android and iOS application usage is not only important in the success of an application, but it really isn’t difficult to do using Ionic 2. In fact, it really isn’t too different than what we saw in the Ionic Framework 1 writeup I did a few years back. The only difference is in the use of Angular rather than AngularJS.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.