Using Google Analytics for tracking Multiple Steps of a Webflow

28 / Feb / 2011 by Vivek Krishna 0 comments

In one of our projects, we are using a webflow for an order wizard. We needed to track the number of users converting a draft to a confirmed order using Google Analytics. This would have been simple if the URLs were different for each step. However, that is not the way webflows work and a similar URL is generated for multiple steps. After some searching around, we found that we could call a trackPageView method in Google Analytics API and set a name for the page being tracked. This could be done using

<script type="text/javascript">
    try {
        var pageTracker = _gat._getTracker("<ANALYTICS-KEY>");
        pageTracker._trackPageview("/enterDetails.html");
    } catch(err) {
    }
</script>

Replacing “/enterDetails.html” in each page with the corresponding step name did the trick. However, this is an old version of the Google Analytics API. Our application uses a newer version of the JavaScript code provided by Google.

In this, we had to use Virtual Page Tracking, which is a method explained in the Google Analytics API Docs under the section, Virtual Page Views. We had to write something like


<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'ANALYTICS-KEY']);
_gaq.push(['_trackPageview', '/enterDetails.html']);
(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);
})();
</script>

For usage on grails, we used a template, which takes in the pageName and uses /${controllerName}/${actionName}/${pageName} to  generate the virtual page name which is tracked. Now we are successfully tracking the conversions.

Hope this helps.

Vivek

FOUND THIS USEFUL? SHARE IT

Leave a comment -