Apache Cordova Netbeans Android Google Analytics Plugin

After researching on many different sites and troubleshooting many different errors and show stoppers, I was finally able to piece together a Google Analytics plugin for my Cordova Android Netbeans project.

First, here is the location of the plugin we shall use today.

Cordova Android GAPlugin @ GIT

First I had to add the git location of the plugin to my projects nbproject/plugins.properties file. I made sure to add the org.apache.cordova.network-information, org.apache.cordova.geolocation, com.google.playservices, and finally the com.phonegap.plugins.gaplugin addresses. I also place the GAPlugin address at the bottom of the list in case there are some dependency issues associated with the plugin installations during the build.

001-EditPluginsProperties

I also, manually ran the install of the GAPlugin from the command line. I’m not sure if this makes a difference, yet better safe than sorry.

002-ManualGAPluginInstallViaCLI

Also, edit platforms/android/AndroidManifest.xml and make sure that all the proper permissions are available in order for Google Analytics to make all the outbound calls it needs to.

003-AndroidManifestPermissions

In addition, edit the config.xml file and add the appropriate features associated with the GAPlugin installation.

004-Config-xmlFeatureAdditions

Next, after verifying that the GAPlugin has been installed locate the intrinsic GAPlugin.js script file.

005-GAPluginJSFileLocation

Copy that bad boy over to your project’s Site Root in the location of your choice. I just popped it in the default Site Root/js directory.

006-GAPluginJSFileCopyToSiteRoot

Now that the files are in place, we need to load the GAPlugin.js file into our page. Since I will be calling the GAPlugin.js code from my own js/index.js file, I need to make sure that GAPlugin.js is loaded first. So, here is the order I put it in.

007-IndexHTMLJSScriptFileOrderWithPlugin

Now, let’s look at app.initialize();

I took the basic index.js code that my initial NetBeans Cordova HTML5 project cam with and added the Google Analytics code to the onDeviceReady routine. I added plenty of logging so I could tell from the Android emulator logs that the code is working and completing successfully with error.


var gaPlugin;

var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {

console.info("CALLING Gooble Analytics");
gaPlugin = window.plugins.gaPlugin;
console.log("CALLING INIT")
gaPlugin.init(successHandler, errorHandler, "UA-********-*", 1);
gaPlugin.trackPage( nativePluginResultHandler, nativePluginErrorHandler, "index.html");
gaPlugin.trackEvent( nativePluginResultHandler, nativePluginErrorHandler, "Button", "Click", "event only", 1);
gaPlugin.exit(nativePluginResultHandler, nativePluginErrorHandler);
}

};

function successHandler()
{
console.log("INIT SUCCESS");
}

function errorHandler()
{
console.log("INIT FAILED");
}

function nativePluginResultHandler()
{
console.log("TRACKING SUCCESS");
}

function nativePluginErrorHandler()
{
console.log("TRACKING FAILED");
}

Clean, Build, and Run the Cordova project. Verify that all the plugins have been installed and are available in the final deployment otherwise there will some Class Not Found errors.

Upon deployment the logs pumped out the info I was looking for.


D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 41 : CALLING Go
oble Analytics
I/Web Console( 2727): CALLING Gooble Analytics at file:///android_asset/www/js/i
ndex.js:41
D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 43 : CALLING IN
IT
I/Web Console( 2727): CALLING INIT at file:///android_asset/www/js/index.js:43
I/Choreographer( 2727): Skipped 68 frames! The application may be doing too muc
h work on its main thread.
D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 66 : INIT SUCCE
SS
I/Web Console( 2727): INIT SUCCESS at file:///android_asset/www/js/index.js:66
D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 76 : TRACKING S
UCCESS
I/Web Console( 2727): TRACKING SUCCESS at file:///android_asset/www/js/index.js:
76
D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 76 : TRACKING S
UCCESS
I/Web Console( 2727): TRACKING SUCCESS at file:///android_asset/www/js/index.js:
76
D/CordovaLog( 2727): file:///android_asset/www/js/index.js: Line 76 : TRACKING S
UCCESS
I/Web Console( 2727): TRACKING SUCCESS at file:///android_asset/www/js/index.js:
76

Seeing that there were plenty of success messages. I immediately surfed over to Google Analytics and lo and behold I was amazed to see that my my mobile app in the android emulator had indeed been tracked as can be seen in my Google Analytics Real-Time DashBoard.

008-GoogleAnalyticsRealTimeUser

Well, it took a couple of days to get this far and I believe those are the steps involved. I blogged about it quickly so I wouldn’t forget the finer points. After all, i will probably have to set up a new environment in the near future and instead of scanning through other blogs, GIT documentation, and stackoverflow.com I have put all that research into 1 place.

Now, time to figure out how to get the sinister Cordova Android AdMob/AdSense plugin working, LOL.

Advertisements

About javaclaus

Java Programmer, Code master, mountain biker, snowboarder, etc.
This entry was posted in Analytics, Android, Cordova, Google, Mobile, NetBeans and tagged , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s