How to use Google Analytics with Ionic Framework?

  • author-img Nidhi Arora
  • 5 years
  • 546 views
how-to-use-google-analytics-with-ionic-framework

After an app has been downloaded on your phone, Apple and Google won’t support much in terms of analytics to analyze app performance and to keep track of user’s use cases.

Dan Wilson has introduced one of the most convenient plugins for Apache Cordova namely Google Analytics Plugin for an easy integration with Ionic.

However, if you are ensured that your project has added iOS and Android as platforms, then you can use Google Analytics with Ionic Framework with the following command line:

ionic platform add ios
ionic platform add android

If you want to build for iOS, remember that you will require a Mac along with installed Xcode.

Once you all set up with your project, you should install the analytics plugin into your particular project with the following the command line:

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

Google Analytics plugin is quite simple to use with Ionic Framework.  The initialization code will go in the $ionicPlatform.ready() function as given 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");

}

});

});

Google analytics plugin will not support any other platforms than Android and iOS. So be sure that the analytics object should exist first in your project to get rid of errors.

Note: Don’t forget to replace or change the tracking id in the above snippet on 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 you are successfully installed with the Google Analytics plugin. Though it will not report or show any data until we tell it to do. Above we have a controller, once we called or ordered, it will immediately report as a view/screen. If you call the initEvent method set up in the controller, then it will report an event.  Events can be anything, for example gestures, button clicks, or whatever you want them to be.

The following methods are available for use with this Google analytics plugin as per Dan Wilson’s documentation:

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.

Download Blog

ENQUIRY

Ready to Get started

Communication is the key for us to understand each other. Allow us to understand
your requirements or queries. Present us with an opportunity to serve you.

Fill out the form and out team will get back to you
within 24 hours

    Head Office

    1250 Pittsford Victor Road Ste 310
    Pittsford, NY 14534

    Development Center

    Plot no. 10, Rajiv Gandhi
    Chandigarh Technology Park