How to use Google Analytics with Ionic Framework?

  • Posted by Envision Ecommerce
  • /
  • January 27, 2017
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.