Home Notes Web development jQuery Woopra plugin part 1: Introduction

jQuery Woopra plugin part 1: Introduction E-mail
Monday, 14 December 2009 16:04

Taking inspiration from Christian Hellsten's jQuery Google Analytics plugin, and using it as a starting point, I have developed a jQuery plugin to implement Woopra analytics in your application (download).  Right now, in version 1.1.5:

It adds the following methods to jQuery:

  • $.trackWoopra(options) - Adds Woopra tracking on the page from which it's called.  This is the only required method to enable Woopra tracking.
  • $.woopraEvent(options) - Tracks an event using the given parameters
  • $('a').trackEvent(options) - Adds event tracking to element(s)

This method is required, and can be used simply as:

<script type="text/javascript">
$.trackWoopra();
</script>

or:

<script type="text/javascript">
$.trackWoopra({
domain : 'http://www.mydomain.com',
url : 'http://www.myurl.com',
title : 'My page',
cookie: 'someCookie'});
</script>

All parameters in example above are optional:

  • domain - use it to specify root domain (to enable tracking of sub-domains)
  • url and title parameters must be passed in together as a pair; use them to give pages custom names in Woopra
  • cookie allows you to exclude visitors who have the cookie set (someCookie in this case)

See here for more information on using these optional parameters.  (The cookie feature is not yet built into Woopra, so you won't see any information on that on the Woopra site.  Once they implement it into the core, I will remove this add-on feature and incorporate their implementation.  You can learn more about how to use my current implementation here.)

Used like:

<script type="text/javascript">
$.woopraEvent({
title : 'category_click',
label : 'Category1',
url : 'url1'
event_name : 'click'});
</script>

This method is best called from the next one, $.trackEvent(options).

Takes the following parameters:

  • title - required.  Name for the event being tracked.
  • event_name - optional.  Name of event you want to bind to.  Default is 'click'.
  • as many (key,value) pairs as you want your event to have

Example usage:

<script type="text/javascript">
$('#content #links a').trackEvent({
title : 'Links_hover',
label : function(element) {return element.text()},
url : function(element) {return element.attr('href')},
event_name : 'mouseover'});
</script>

Similar to the jQuery Google Analytics plugin, you can enter functions as property values, and they will be evaluated for the element that is the target of the event triggered.  However, whereas Google Analytics takes a specified number of parameters in its event tracking object, Woopra lets you specify custom properties and values, so this plugin was modified to accomodate for that.

In this example, everytime a visitor hovers over a link (<a> element) inside #content #links, a 'mouseover' event will be registered in Woopra, with the following properties:

  1. title: Links_hover
  2. label: the text between the <a> and </a> tags
  3. url: the url in the href attribute of the link clicked

Version 1.1.5 - added ability to exclude visits with cookies, similar to Google Analytics.

Version 1.1 - removed setTracker property which is no longer supported by Woopra.  To download older releases, visit the official jQuery plugin page.


View jQuery Woopra plugin part 2: Usage

Download

Download jQuery Woopra plugin