This post is a part 47 of Intel XDK Complete Tutorial post series.
Google Analytics is the World’s best website analytics platform. You can also integrate Google Analytics in Intel XDK apps to find usage information of your app.
In this tutorial I will show you how to integrate Google Analytics in an Intel XDK app.
Cordova GAPlugin
You need to install third party GAPlugin plugin to send app usage information to Google Analytics account.
Legacy Hybrid apps don’t support third party plugins therefore you cannot use this plugin in legacy hybrid apps.
Sending Usage Information
Here is the code you need to run to send basic usage information to Google Analytics account
<script type="text/javascript">
document.addEventListener("deviceready", function(){
/*
Parameters:
1. Success Callback
2. Failure Callback
3. Google Analytics Account ID to which information will be sent to. Ex: UA-12345678-1
4. This plugins splits the data into chunks. This parameter represents seconds within which all the chunks will be send to the account
*/
window.plugins.gaPlugin.init(function(){/* Success */}, function(e){ /* Failed */ }, "UA-XXXXXXXX-X", 10);
}, false);
</script>
document.addEventListener("deviceready", function(){
/*
Parameters:
1. Success Callback
2. Failure Callback
3. Google Analytics Account ID to which information will be sent to. Ex: UA-12345678-1
4. This plugins splits the data into chunks. This parameter represents seconds within which all the chunks will be send to the account
*/
window.plugins.gaPlugin.init(function(){/* Success */}, function(e){ /* Failed */ }, "UA-XXXXXXXX-X", 10);
}, false);
</script>
Tracking Pages
If you app consists of multiple pages then the above code will log visits in your GA account. But if you are using App Framework then your app is actually a single page app with multiple panels.
Panels behave like pages from user perspective. Therefore to track panel’s you need to call window.plugins.gaPlugin.trackPage on panel change.
Here is example code
window.plugins.gaPlugin.trackPage(function(){/* Success */}, function(e){ /* Failed */ }, "some.url.com");
Exiting App
While exiting app always call window.plugins.gaPlugin.exit function.
Here is example code
This finishes the pending tasks before exiting.
Tracking Events
Event Tracking is a method that you can use to record user interaction with website elements
Here is how to track events using this plugin.
/*
Parameters:
1) resultHandler - a function that will be called on success
2) errorHandler - a function that will be called on error.
3) category - This is the type of event you are sending such as "Button", "Menu", etc.
4) eventAction - This is the type of event you are sending such as "Click", "Select". etc.
5) eventLabel - A label that describes the event such as Button title or Menu Item name.
6) eventValue - An application defined integer value that can mean whatever you want it to mean.
*/
window.plugins.gaPlugin.trackEvent(function(){}, function(){}, "Button", "Click", "event only", 1);
Parameters:
1) resultHandler - a function that will be called on success
2) errorHandler - a function that will be called on error.
3) category - This is the type of event you are sending such as "Button", "Menu", etc.
4) eventAction - This is the type of event you are sending such as "Click", "Select". etc.
5) eventLabel - A label that describes the event such as Button title or Menu Item name.
6) eventValue - An application defined integer value that can mean whatever you want it to mean.
*/
window.plugins.gaPlugin.trackEvent(function(){}, function(){}, "Button", "Click", "event only", 1);
