Home Notes Web development jQuery Woopra plugin part 2: Usage
Pranshuarya.com

Sponsored Links


jQuery Woopra plugin part 2: Usage E-mail
Monday, 14 December 2009 18:11

I will document here how I am using this plugin, through which you can determine how best to use it for yourself.

pthesis.com

I tested the jQuery Woopra plugin on my own portfolio website, p()thesis.  I'll present the index.html code in bits and explain as I go along.

<head>

<head>
<title>Web developer and designer in Boulder, Colorado</title>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="http://www.google.com/jsapi?key={your key}" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery","1.2");</script>
<script type="text/javascript" src="includes/jquery.livequery.js">script> 
<script type="text/javascript" src="includes/jquery.google-analytics.js"></script>
<script type="text/javascript" src="includes/jquery.woopra-analytics-min.js"></script>
<script type="text/javascript" src="includes/webtoolkit.cookies.js"></script>
<script type="text/javascript" src="functions.js" mce_src="functions.js"></script>
<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
$.trackPage('UA-xxxxxxx-xx');
</script></head>

Pretty standard stuff:

  1. Declare meta content
  2. Load jQuery - I load it via GoogleAJAX APIs
  3. Load jQuery Livequery plugin, which I will be using for this plugin
  4. Load functions.js which contains the JavaScript functions used in the site
  5. Load jQuery Woopra plugin, either the standard or the minified version (I've also left in the jQuery Google Analytics plugin for demonstration purposes)
  6. Load the Webtoolkit Cookies script - this is only necessary if you want to exclude visits by cookies (See here for how to set a cookie using either PHP or this simple script)
  7. Initialize jQuery Woopra plugin with the cookie parameter to exclude visits from all visitors who have the cookie woopraExclude set:

<script type="text/javascript">
$.trackWoopra({cookie : 'woopraExclude'});
</script>

<body> part 1

The next step is to load the page HTML content as usual.  At the bottom of the document is where all my JavaScript is:

<script type="text/javascript">
$(document).ready(function(){
...
   $('#pfolio').click(function(){
        $('#portfolio').show('slow')
...
   })
// location for analytics code
})
</script>

<body> part 2

Here are the few lines that enable Woopra analytics on my site via the jQuery Woopra plugin.  I've left in the jQuery Google Analytics plugin code so you can see the similarities and differences in syntax between the two.

$('#refine_by').livequery(function(){$('#refine_by').track({
category : 'refine_by',
action : 'click'})})
    $('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').track({
category : 'site',
action : 'click',
label : function(element) {return element.text()}}
    )})
    $('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').track({
category : 'category',
action : 'click',
label : function(element) {return element.text()}
})})
    $('#categories ul li').livequery(function(){$('#categories ul li').trackEvent({
title : 'category',
label : function(element) {return element.text()}
})})

 

Let's go over a couple of these lines. 

$('#refine_by').livequery(function(){$('#refine_by').trackEvent({
title : 'refine_by'})
})

refine_by

  1. $('#refine_by') - the element being tracked
  2. .livequery(function()($('#refine_by') - because the element is not created when the DOM is ready, I am using the livequery plugin to actively apply the tracking rule each time the #refine_by element gets created via AJAX.  If you're using jQuery 1.3 you can use the built-in live method to achieve the same purpose.
  3.  .trackEvent({title : 'refine_by'}) - the only parameter I'm passing through in this example is the title of the event

Now let's look at one of the more complex examples, where I'll be tracking the sites in the list in #sites ul li:

sites_ul_li

$('#sites ul li').livequery(function(){$('#sites ul li').not('#reset_sites').trackEvent({
title : 'site',
label  : function(element) {return element.text()}})
})

The main difference here is that I'm passing a function to the label property.  This particular function evaluates the text of the li element that is clicked on and stores it in Woopra.  This lets me track which site in the list the visitor has clicked on.

To track an a element I might use something like this:

$('div#site_details a').trackEvent({
title : 'site_details',
label : function(element) {return element.attr('href')}
})

I didn't use livequery in this statement because of where it was placed in my code.  I placed it where the a elements are created, so there's no need to apply the code to any elements that haven't yet been created.  The label property is now storing the URL of the a element being tracked.

Note that all a elements are being tracked, and whichever particular one is clicked, that one's URL will be returned.  So for example, in the example below, there are three a elements (in red).

site_details_a



< Prev   Next >