Google Analytics: How to track hits to mobile site

Question

We are developing a completely new mobile version of our site, it is a HTML5 site written using Sencha Touch 2 (Ext JS, JavaScript).

We are using Google Analytics on our main site, and we would like to use GA on the mobile site as well. However our desired use case is a little special: We would like hits to articles on the mobile site to be tracked as hits to the corresponding article on the main site. The reasoning behind this is the desire to aggregate the statistics, and not have the data tracked separately.

The domains and URL structure is different for the two sites, although the site hierarchy is somewhat similar (they both get content from a Sharepoint backend), and herein lies the challenge. We cannot only change the domain using something like 'setDomainName'.

On every page in the mobile version, we have available the full URL to the original page/article on the main site. What we would like to do is tell Google to track the view as a hit to that URL instead of the one we are actually on.

I've seen some threads (f ex here) regarding 'trackPageView' and it may be sufficient for our needs, however I am not entirely sure. It sounds a little too simple, but it may also be that I am not seeing the obvious solution here. Could we provide this method with the desired hit URL and that's it? Would it work then to have a script in the header that checks for a set variable with this URL, and if it exists call 'trackPageView' with it as a parameter, if not just track a regular hit? Any help with syntax for this approach is welcome.

All help & suggestions appreciated here! I've scoured GA docs without much helping information on this special case.

Answer 1

Yes it is that simple use the track page view event and pass the corresponding URL parameters. In sencha all your views are going to exist in the same HTML page so you need to call this programmatically.

Include the same tracking code as you use in your live site with the same ID... This should work as you expect... Very good question...Hope it helps...

Answer 2

Here's GA Tracking spelled out and made simple for ST2+. I've included how to initialise, set up basic navigation tracking, and several alternatives including custom variable & event tracking.

/*
Standard method to init GA tracking.
These can be fired from launch.
*/

initialiseGoogleAnalytics : function() {
    //Add Google Analytics Key
    window._gaq = window._gaq || [];
    window._gaq.push(['_setAccount', MyApp.config.googleAnalytics.code]);
    window._gaq.push(['_setDomainName', MyApp.config.googleAnalytics.domain]);
    window._gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
},

/* 
    This method can be set to a globally accessable reference.
    For instance:
        MyApp.Util = {}; // reference for common utility functions
        MyApp.Util.gaTrackEvent = function(data) {};

    Thus allowing MyApp.Util.gaTrackEvent(data) from anywhere in app.

    Alternatively, add as function to Application for 
        this.getApplication().gaTrackEvent(data);
*/
gaTrackEvent : function(data) {
    //Push data to Google Analytics

    // optional prefix for mobile devices - unnecessary for your interest
    var prefix = 'mobile/';

    // don't track homepage/default hits
    if (data == 'home') {
        //Ignore Home
        return;
    }

    // basic tracking
    _gaq.push(['_trackPageview', prefix + data]);

    // OPTIONAL ALTERNATIVES FOR DETAILED TRACKING
    // detailed tracking - condensed
    _gaq.push(['_setCustomVar',
        1,                      // custom variable slot
        'customEventName',      // custom variable name
        'value1|value2|value3', // multiple values using 1 slot
        2                       // sets scope to session-level
    ]);
    _gaq.push(['_trackEvent',
        'ParentEventName',
        'SomeValue'
    ]);

    // detailed tracking - each variable using own slot
    _gaq.push(['_setCustomVar',
        1,
        'stage1',
        'value1',
        2
    ]);
    _gaq.push(['_setCustomVar',
        2,
        'stage2',
        'value2',
        2
    ]);
    _gaq.push(['_setCustomVar',
        3,
        'stage3',
        'value3',
        2
    ]);
    _gaq.push(['_trackEvent',
        'ParentEventName',
        'SomeValue'
    ]);

}


/*
Set up a controller to handle GA tracking.
This way you can keep the unique events you wish to track central,
while also handling default tracking and SEO.

For example, a controller for Registration might want tracking on success.
this.getRegistration().fireEvent('registrationsuccess');
*/
    config: {
        control: {
                "navigationview": {
                    activeitemchange: 'generalSEOhandler'
                },
                "#registration": {
                    registrationsuccess: 'onRegistrationSuccess'
                },
                ...
        },
    },

    generalSEOhandler: function(container, value, oldValue, eOpts) {
        if (value === 0) {
            return false;
        }

        // ignoreDefaultSeo - boolean custom config that can be applied to views.
        var ignoreDefaultSeo = value.getInitialConfig('ignoreDefaultSeo');

        if (Ext.isDefined(ignoreDefaultSeo) && ignoreDefaultSeo == 1) {
            // optional handler for special cases...
        } else {
            // Use default
            var itemId = value.getItemId();
            itemId = itemId.replace(/^ext-/,'');    // Remove the prefix ext-
            itemId = itemId.replace(/-[0-9]?$/,''); // Remove the suffix -1,-2...

            // Alternatively use xtype of the view (my preference)
            // This will require the xtypes of your views to match the main site pages.
            var itemId = value.config.xtype;

            this.trackEvent(itemId);
            //console.log('USE DEFAULT', value.getId(), value.getItemId(), value);
        }
    },

    onRegistrationSuccess: function(eventOptions) {
        var app = this.getApplication(),
            trackUrl;

        trackUrl = 'new-member';

        if (Ext.isDefined(app.accountReactivated) && app.accountReactivated == 1) {
            trackUrl = 'reactivated-member';
        }

        if (Ext.isDefined(app.registeredUsingFacebook) && app.registeredUsingFacebook == 1) {
            trackUrl += '/facebook';
        } else {
            trackUrl += '/non-facebook';
        }

        // console.log('onRegistrationSuccess', trackUrl);
        this.trackEvent(trackUrl);
    },

    trackEvent: function(data) {
        // if using MyApp.Util.gaTrackEvent() technique
        MyApp.Util.gaTrackEvent(data);

        // if gaTrackEvent() an application method
        this.getApplication().gaTrackEvent(data);
    }
}

Answer 3

I found this article talking about Google Analytics and Sencha Touch

http://wtcindia.wordpress.com/2013/03/21/using-google-analytics-in-sencha-touch-based-mobile-website/