woopra

Since Woopra is installed on a wide range of Web sites, desktop applications, mobile apps, eCommerce platforms and more, one standard method of passing data to the service is simply not adequate. As a result, the Woopra JavaScript is infinitely customizable in order to accommodate the wide variety of uses.

The Basic Tracking Code

First of all, let’s look at the most basic implementation of the Woopra tracking code. This code tracks the current page being loaded without overwriting its URL or Title. Nothing fancy.

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track();
</script>
<!-- Woopra Code End -->

Custom Page URL & Title

Let’s say you want to overwrite the URL and Title, all you need to do is add parameters to the woopraTracker.track() function as follows:

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track("/my-url.html", "My Page Title");
</script>
<!-- Woopra Code End -->

This customization method is used mostly with AJAX and Flash based websites where you load some pages without having to reload the whole page. So, you can simply call the woopraTracker.track(url, title) function as many times as you want after the page loads.

Custom Page Options

Beside the page title and url, Woopra allows you to customize extra options for your page like Author, Category etc.. All you need is to do is to append an options parameter to woopraTracker.track() as follows:

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track(window.location.pathname, document.title, {
    author: 'Author Name',
    category: 'Category Name'
});
</script>
<!-- Woopra Code End -->

Automating Dynamic URL & Title Customization

If you have a page which does not have pretty permalinks, such as a WordPress blog without permalinks enabled, or an online shopping cart site which uses Dynamic URLs, you can use the following JavaScript to pass the specific URL and the TITLE of each page to Woopra.

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track(window.location.pathname+window.location.search,document.title);
</script>
<!-- Woopra Code End -->

Custom Visitor Data

Another really cool way to integrate Woopra with your application is by using Custom Visitor Variables. If you have some information about a user visiting your page you can attach it to the woopraTracker. You will be able to view the information in real time and analyze it afterward as well. Let’s take a look at how this is accomplished:

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.addVisitorProperty("name", "John Doe");
woopraTracker.addVisitorProperty("email", "johndoe@email.com");
woopraTracker.addVisitorProperty("avatar", "http://www.mywebsite.com/avatars/john.jpg");
woopraTracker.addVisitorProperty("sex", "Male");
woopraTracker.track();
</script>
<!-- Woopra Code End -->

As you see, in the last example, we’ve added 4 visitor variables: name, email, avatar and Sex. The name property is a reserved word for Woopra and it’s used to “Auto-Tag” a visitor. The Woopra desktop application also renders “email” and “avatar” as special properties.

Custom Events

Woopra also allows you to track Custom Events in addition to simple pageviews. Let’s say you are running a website that allows a user to perform an action without having to reload the whole page. You can track these actions using Woopra’s Custom Events. Here’s how:

var myEvent = new WoopraEvent("Play"); // Initialize event and give it a name
myEvent.addProperty("title", "Ain't no sunshine");
myEvent.addProperty("artist", "Bill Withers");
myEvent.fire();

The code above will track a custom event titled “Play”, and provides some more information like the Title and Artist of the song being played. Just imagine all of the custom events that can be tracked on your website: comments added, advertisements clicked, etc….

What’s even more important about custom events is that you can always run custom reports about the data you pass to Woopra, so for the example given above, you could get the number of songs being played by “Artist”.

Tracking Subdomains

In order to track sub-domains, you need to slightly modify your code to define your root domain, here’s how to do so:

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.setDomain("mymaindomain.com"); // define your root domain.
woopraTracker.track();
</script>
<!-- Woopra Code End -->

Tracking Flash Events in Woopra

In order to track Flash with Woopra, you need to add the following to the Woopra JavaScript.

If your site is using Flash extensively as content, place the Woopra JavaScript in the page’s HTML header, per the instructions from Macromedia Flash Support.

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track();
</script>
<!-- Woopra Code End -->

For the occasional use of Flash, you can set the Woopra JavaScript to track a specific page:

<!-- Woopra Code Start -->
<script type="text/javascript" src="//static.woopra.com/js/woopra.v2.js"></script>
<script type="text/javascript">
woopraTracker.track("/directory/page1.html", "My Page Title");
</script>
<!-- Woopra Code End -->

NOTE: Keep in mind that all of this JavaScript customization is often done in conjunction with our API so that clients can gain access to the raw data and feed it into their own internal systems for use beside other information.