google analytics « Intelligrape Groovy & Grails Blogs

Posts Tagged ‘ google analytics ’

Using Google Analytics for tracking Multiple Steps of a Webflow

Posted by on February 28th, 2011

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

http://in.linkedin.com/in/svivekkrishna

What is Google Web Optimization, How to use or apply it in your project?

Posted by on August 12th, 2010

Recently as part of POC, I need to apply the google web optimizer on various parts of page to determine which content user respond to best and will be most effective in getting conversions. For this you need to keep track of the various conversions, but how? Thats where google web optimizer come handy, providing reports based on experiments specified by you on various parts of page and also suggesting action to optimize your site for better business results.

Steps to apply google web optimization in your project :

1. Create an account in google web optimizer and sign in.

2. Then take some time to determine which aspect or parts of page you want to test and how.(for more valuable and better results).

3. Create an experiment in google web optimizer :

  • 3.1 Choose algo for experiment: Multivariate test or A/B test.
    • 3.1.1 Multivariate test allow you to apply variations on various part of same page.
    • 3.1.2 A/B test allow you to apply conversion between two pages. (Not on various part of page).
    • **In my case i choose multivariate test.
  • 3.2 Fill in details : Give your experiment unique name, specify the tracking page public URL on which various parts optimization is to be done and also specify the conversion page public URL on which user will be directed after successful conversion.(Very useful in term of form submission).

4. Tag Pages -> Now the optimizer provide you several tags, How to apply scripts/tags on your page for that particular experiment :

  • 4.1 Control Script : Randomly control the variations on parts of page. (Must Applied in header tag of page)
    	<!-- Google Website Optimizer Control Script -->
    	<script>
    	function utmx_section(){}function utmx(){}
    	(some script......................................................
    	length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
    	d.write('<sc'+'ript src="'+
    	'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'...........
    	................................. some more script text here
    	</script>
    	<!-- End of Google Website Optimizer Control Script -->
  • 4.2 Tracking Script : Track the user behaviour. (Applied at bottom of the page within body tag).
    	<!-- Google Website Optimizer Tracking Script -->
    	<script type="text/javascript">
    	Some script text here...................................
    	........................................................
    	<script type="text/javascript">
    	try {
    	var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	gwoTracker._trackPageview("...tracker page.....");
    	}catch(err){}</script>
    	<!-- End of Google Website Optimizer Tracking Script -->
  • 4.3 How to apply Variation Script : Applied just before the part of code to be tested(headline, image, promotext, button) i.e. on which variation is to be applied and at the end of that code part “noscript” tag need to be applied to specify the region for variation and unique tag names for particular variation section.
    	<script>utmx_section("payment")</script>
    		Test Drive our product in <b>$10</b>
    	</noscript>
  • 4.4 Conversion Script : To be applied in body tag at bottom of converision page you specified.
    	<!-- Google Website Optimizer Conversion Script -->
    	    <script type="text/javascript">
    	    some script.....................................................
    	    '.google-analytics.com/ga.js"></sc'+'ript>')</script>
    	    <script type="text/javascript">
    	    try {
    	    var gwoTracker=_gat._getTracker("....some id for tracker..........");
    	    some script code here.....................................
    	    }catch(err){}</script>
    	<!-- End of Google Website Optimizer Conversion Script -->

5. Validate Pages -> First apply all the tags on your page as specified above and then validate the page with optimizer validate page link, that all the script are applied correctly.

  • 5.1 If you use validate pages button then it will use the public URL you specified for tracking and conversion page.
  • 5.2 To validate the pages offline, Optimizer provide option to manually provide pages that are to be validated.

Note : All the test need to be passed to apply optimization on your page.

6. Create a Variations -> After applying tags, create variations for the various part of page. Variation can include any type of string(it can be a html code, text, script etc).

Example : Within payment tag :

Original Variation : Test Drive our product in $10 (specified in your page)
Variation 1 named “Classic” :

		Test Drive our product in <b>$50</b>

Variation 2 named “Executive” :

		Test Drive our product in <b>$100</b> with additional privileges

7. Review and Launch the Experiment, in Google web optimizer.

Example :

	<html> 
	<head>   
	    <!-- Google Website Optimizer Control Script -->
		<script>
		function utmx_section(){}function utmx(){}
		some script.....................................................
		length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
		d.write('<sc'+'ript src="'+
		some code here ...............................................
		+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
		'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
		</script>
		<!-- End of Google Website Optimizer Control Script -->
	</head>
	<body>
             ............body code start here............................................................................
             ....................................................................................................................
	    <script>utmx_section("offer")</script>
			Secure your child future in <b>$10</b>
	    </noscript>
           ....................................................................................................................
           ....................................................................................................................
 
 
	    <!-- Google Website Optimizer Tracking Script -->
		<script type="text/javascript">
		some script.....................................................
		'.google-analytics.com/ga.js"></sc'+'ript>')</script>
		<script type="text/javascript">
		try {
		some code...................................................
		}catch(err){}</script>
		<!-- End of Google Website Optimizer Tracking Script -->
 
	</body>
	</html>

Hope this will help to improve your site business ;)

Regards,
Tarun Pareek
Intelligrape Software

Comments Off

Tracking Image Clicks using Google Analytics

Posted by on February 25th, 2010

In one of the projects, it was required to track the number of times an image (which linked to another page) was clicked using Google Analytics. We found a very informative article here. It talks about tracking external links and file downloads. This wasn’t exactly our purpose, but the javascript downloaded from there acted as a very good starting point.

What we did was to add a code block like this after line no. 13 of the javascript code from the link given above.

var imgs = document.getElementsByTagName("img");
for(var l=0; l <imgs.length; l++) {
       try {
               var path = imgs[l].getAttribute('src');
               var isDoc = path.match(/\.(?:jpg|png|gif|svg)($|\&|\?)/);
               startListening(imgs[l],"click", trackImageClicks);
       }
       catch(e){
           continue;
       }
    }

And a method before the Analytics script provided by Google for the site

function trackImageClicks(evnt) {
    var e = (evnt.srcElement) ? evnt.srcElement : this;
    var lnk = (e.getAttribute("src").charAt(0) == "/") ? e.getAttribute("src") : "/" + e.getAttribute("src");
    if (typeof(pageTracker) == "object") pageTracker._trackPageview(lnk);
    while (e.tagName != "A") {
        e = e.parentNode;
    }
     lnk = (e.pathname.charAt(0) == "/") ? e.pathname : "/" + e.pathname;
    if (e.search && e.pathname.indexOf(e.search) == -1) lnk += e.search;
    if (e.hostname != location.host) lnk = e.hostname + lnk;
    if (typeof(pageTracker) == "object") pageTracker._trackPageview(lnk);
}

Now, the clicks on each image were getting tracked.