Using Google Analytics With Ionic Framework

Apple and Google don’t offer much in terms of analytics after an app has been downloaded. Google will take it a step further than Apple and show how many devices have the app installed rather than just downloads, but nothing in terms of usage. To use Google Analytics with Ionic Framework, not much is required.

There is a convenient plugin created for Apache Cordova by Dan Wilson called simply Google Analytics Plugin. With a bit of adjusting we can easily use it with AngularJS.

In your project make sure that you’ve added iOS and Android as platforms. This can be done by running the following from a command line:

ionic platform add ios
ionic platform add android

Remember that you’ll need a Mac with Xcode installed in order to build for iOS.

When your project is set up, you need to install the analytics plugin into your project. From the command line run the following:

cordova plugin add https://github.com/danwilson/google-analytics-plugin.git

The Google Analytics plugin is actually very simple to use with Ionic Framework. The initialization code will go in the $ionicPlatform.ready() function as seen below:

var googleanalyticsApp = angular.module('googleanalytics', ['ionic'])
    .run(function($ionicPlatform, $ionicPopup) {
        $ionicPlatform.ready(function() {
            if(typeof analytics !== undefined) {
                analytics.startTrackerWithId("UA-XXXXXXXX-XX");
            } else {
                console.log("Google Analytics Unavailable");
            }
        });
    });

The analytics plugin won’t exist for platforms other than iOS and Android so we must make sure the analytics object exists first otherwise we’ll get an error. Remember to replace the tracking id in the above snippet with your own.

googleanalyticsApp.controller('AwesomeController', function($scope) {
    if(typeof analytics !== undefined) { analytics.trackView("Awesome Controller"); }

    $scope.initEvent = function() {
        if(typeof analytics !== undefined) { analytics.trackEvent("Category", "Action", "Label", 25); }
    }
});

Now that the Google Analytics plugin is initialized, it won’t report data until we tell it to. Above we have a controller and when called it will immediately report as a view / screen. When something calls the initEvent method set up in the controller it will report an event. Events can be button clicks, gestures, or whatever you want them to be.

According to Dan Wilson’s documentation, the following methods are available for use with this plugin:

analytics.startTrackerWithId('UA-XXXX-YY')
analytics.trackView('Screen Title')
analytics.trackEvent('Category', 'Action', 'Label', Value)
analytics.addTransaction('ID', 'Affiliation', Revenue, Tax, Shipping, 'Currency Code')
analytics.addTransactionItem('ID', 'Name', 'SKU', 'Category', Price, Quantity, 'Currency Code')
analytics.setUserId('my-user-id')
analytics.debugMode()

The API methods were copied directly from the plugin repository documentation.

A video version of this article can be seen below.

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.