The Javascript Snippet is a small function placed on your webpage to initialize the Woopra tracking object and to asynchronously load the Woopra tracker code. It's typically placed in the <head> of your document. It's important to keep in mind that the Woopra tracking code runs asynchronously. This means that Woopra will load in the background while your page elements load, therefore it will not slow down the performance of your website or application.
It Snippet also defines the tracker's methods so that you can immediately set the configuration and call track() and identify(), and it will queue those calls and run them when the tracker loads.
Using the Snippet
The Pure Snippet Function
There are multiple ways in which you can customize the Javascript Snippet. Here we'll go over some general best practices.
Below is the raw javascript snippet:
!function(){var t,o,c,e=window,n=document,r=arguments,a="script",i=["call","cancelAction","config","identify","push","track","trackClick","trackForm","update","visit"],s=function(){var t,o=this,c=function(t){o[t]=function(){return o._e.push([t].concat(Array.prototype.slice.call(arguments,0))),o}};for(o._e=[],t=0;t<i.length;t++)c(i[t])};for(e.__woo=e.__woo||{},t=0;t<r.length;t++)e.__woo[r[t]]=e[r[t]]=e[r[t]]||new s;(o=n.createElement(a)).async=1,o.src="https://static.woopra.com/w.js",(c=n.getElementsByTagName(a)[0]).parentNode.insertBefore(o,c)}("woopra");
The snippet is an immediately-invoked function expression that asynchronously loads the javascript tracking SDK code in the browser. It also prepares some queueing so that you can make calls to the methods before the tracking code finishes loading, and will evaluate those calls when it finishes loading.
This is the minimum requirement to add to the webpage code in order to make the Woopra tracker function, however, adding this will not track any events. Rather, it will expose the config(), track(), identify(), push(), call(), trackClick(), trackForm(), update(), and visit() functions for you to use in your client-side javascript.
To see any data in Woopra, you need to make a call to woopra.config() to tell the tracker object the name of your project, and a call to woopra.track() to actually track an event in Woopra.
A Common Snippet and Tracking Implementation
Below is an example of installation inside the <head> of a website. It will install the tracker on every page load and track a standard built-in pageview. (See woopra.track() for more on sending the default pageview event, and Built-in Events for more on built-in events in general.)
One thing to note is that if you have a Single Page Application, the <head> section of the page may only be rendered once, thus only tracking a single pageview when in fact your visitor may perform many different app views in your web app. See our SPAs for more info on this.
<head>
<!-- ... Your head code -->
<script>
/*
* Initialize tracker object on page and create queues for function calls
* and async load tracker.
*/
!function(){var t,o,c,e=window,n=document,r=arguments,a="script",i=["call","cancelAction","config","identify","push","track","trackClick","trackForm","update","visit"],s=function(){var t,o=this,c=function(t){o[t]=function(){return o._e.push([t].concat(Array.prototype.slice.call(arguments,0))),o}};for(o._e=[],t=0;t<i.length;t++)c(i[t])};for(e.__woo=e.__woo||{},t=0;t<r.length;t++)e.__woo[r[t]]=e[r[t]]=e[r[t]]||new s;(o=n.createElement(a)).async=1,o.src="https://static.woopra.com/w.js",(c=n.getElementsByTagName(a)[0]).parentNode.insertBefore(o,c)}("woopra"); /*This function is invoked with the tracker object name. You can change this if you like. See below*/
/*
* - There are many options you can pass here to configure the tracker.
* - The only required option to set is your project name
* in the "domain" property
*/
woopra.config({
domain: "mybusiness.com" // This is the minimum required config
});
// track pageview
woopra.track(); // With no arguments, the track funciton will track a default pageview event. See docs for woopra.track() function
</script>
<!-- ... More of Your head code ... -->
</head>
Remember, the snippet on line six above is what loads the Woopra object onto the window. The calls to woopra.track() etc. are using the woopra object that the snippet loaded.
What's the difference between the snippet and the tracker?
It's important to understand the difference between the Snippet and the Tracker. The Snippet is a short simple function that loads the Tracker. The Tracker Object itself is the javascript code that sends events into Woopra.
Once installed, the snippet should never need to be changed or be updated. The snippet loads the Tracker code itself from the Woopra servers. The Tracker code may change at times based on new security concerns on the web, or new features that we may add. But when this happens, you don't have to change anything in your page to get the new tracker and features, because the snippet code loads the newest version of the tracker every time the web page is loaded on a visitor's browser.
Changing the name of the tracker object
The Snippet function takes one parameter: a string which will be the name of the tracker object on the window object. In the examples above, the string "woopra" is passed as the argument. This means that your tracker will be available on the browser at window.woopra. You can alter this if you wish. You can pass any valid javascript object parameter key string here. For example, if you want to access the tracker at window.tracker, you can invoke your snippet with `"tracker" as the argument.
When Can I Call woopra.track()?
woopra.track()?The snippet begins the asynchronous task of downloading the latest Woopra tracker object, and installing it onto the window object. Because this is asynchronous, the next line that runs after the snippet is guaranteed to be executed before the tracker is loaded. That is why part of what the snippet does is prepare a set of task queues to be run once the tracker loads.
So you can call woopra.track() immediately after the line in which you place the snippet. But the tracking data will not be sent before the Woopra tracker is loaded.
If you need a callback to know when the tracker has actually completed loading, you should put a callback in your first call to woopra.track(). See the woopra.track() docs for more info.