Using Ti.Google.Analytics in Titanium Mobile

In previous post "Titanium Javascript Execution Context", we know that different javascript execution context == different scopes. When implementing the Google Analytics, we will meet this problem.

The Ti.Google.Analytics project has been converted to use CommonJS. [1]

var gaModule = require('Ti.Google.Analytics');
var analytics = new gaModule('UA-XXXXXX-X');
// Call the next function if you want to reset the analytics to a new first time visit.
// This is useful for development only and should not go into a production app.
//analytics.reset();
// The analytics object functions must be called on app.js otherwise it will loose it's context
Ti.App.addEventListener('analytics_trackPageview', function(e){

    analytics.trackPageview('/iPad' + e.pageUrl);
});
Ti.App.addEventListener('analytics_trackEvent', function(e){
    analytics.trackEvent(e.category, e.action, e.label, e.value);
});

// Starts a new session as long as analytics.enabled = true
// Function takes an integer which is the dispatch interval in seconds
analytics.start(10,true);

// You don't need to call stop on application close, but this is just to show you can callstop at any time (Basically sets enabled = false)
Titanium.App.addEventListener('close', function(e){
    analytics.stop();
});

By using commonJS, all of our windows are in same context, we can simply call analytics.trackPageview directly inside windows.

However, for windows created by window.url property, the global variable "analytics" is not available.  For compatible reason, in window created by "url" property, we can still fire a global event to track.  Like this,

    Ti.App.fireEvent("analytics_trackPageview", {pageUrl:'myhomepage'});

The old style Ti.Google.Analytics [2]

1. /* analytics */  
2. Titanium.include('analytics.js');  
3. var analytics = new Analytics('UA-XXXXXX-XX');  
4. Titanium.App.addEventListener('analytics_trackPageview', function(e){  
5.     var path = "/app/" + Titanium.Platform.name;  
6.     analytics.trackPageview(path + e.pageUrl);  
7. });  
8. Titanium.App.addEventListener('analytics_trackEvent', function(e){  
9.     analytics.trackEvent(e.category, e.action, e.label, e.value);  
10. });  
11. Titanium.App.Analytics = {  
12.     trackPageview:function(pageUrl){  
13.         Titanium.App.fireEvent('analytics_trackPageview', {pageUrl:pageUrl});  
14.     },  
15.     trackEvent:function(category, action, label, value){  
16.         Titanium.App.fireEvent('analytics_trackEvent', {category:category, action:action, label:label, value:value});  
17.     }  
18. }  
19. analytics.start(10);  
20. /* analytics end */  

Then we can use the global Titanium.App.Analytics to track event.

1. // 传递参数：page名  
2. Titanium.App.Analytics.trackPageview('/hogePage');  
3. // 传递参数：分类名，动作名，标示，值  
4. Titanium.App.Analytics.trackEvent('Category','mogeAction','hoge',1);  

For compatible reason, if you want to "include" the new GA in your old style window created by window.url property,
One trick to define a variable in app.js, like

    var newGA = true;

And  check if newGA is defined in Ti.Google.Analytics.js

if (typeof newGA != 'undefined'){

    module.exports = commonJSWrapper;

} else {

    Ti.API.warn('Google Analytics Used in Old Style Window');}

Then you can still use "include" in your old style window.

Titanium.include('Ti.Google.Analytics.js');var analytics = new Analytics('XX-XXXXXXXXX');

Reference 
[1] https://github.com/rogchap/Titanium-Google-Analytics
[2] http://rensanning.iteye.com/blog/1315134