-
Notifications
You must be signed in to change notification settings - Fork 8
Tracking in Web applications
WT1 tracks user event in web pages by sending requests to load a tracking GIF image. This method ensures proper cross-domain operation.
WT1 provides a Javascript snippet, exposing an API to perform the tracking requests and manage the Custom variables.
The two basic things that can be tracked are:
- Page loads
- Custom events in pages
The JavaScript snippet is designed for asynchronous loading. The advantage is that whatever the latency incurred by loading the snippet does not affect the user's experience.
While the snippet is loading:
- The rest of the Javascript code continues to run
- It is already possible to enqueue some tracking events.
When the snippet is loaded, the queued tracking events are processed. Further tracking events are sent as soon as they are emitted.
All interaction with the snippet is done via the _wt1Q.push method. _wt1Q acts as a queue of WT1 API calls.
To perform an API call, it must be pushed on the queue, encoded as a Javascript array.
For example:
- to track a page view:
_wt1Q.push(["trackPage"]); - to track a custom event:
_wt1Q.push(["trackEvent", { "myVariable1" : "myvalue1" }]);
_wt1Q is actually created as being a regular Javascript array. When WT1 is done loading, the _wt1Q array is replaced by a specific object which exposes the same push, and the commands already in the array are executed. This makes the switch from the "snippet-loading" to the "snippet-loaded" state transparent for the user of the Javascript API.
Calls to _wt1Q.push() can be done from an inline event-handler. For example:
<button id="mybutton" onclick="_wt1Q.push(['trackEvent', { 'type': 'click_on_button', 'clicked_btn' : 'mybutton'}])" />
Thanks to asynchronous loading, even if the user clicks on the button before the tracking code is loaded, the tracking event will be correctly recorded.
The following code should be inserted within the <head> tag.
/* If the tracker is already loaded, and the _wt1Q object already defined, use it, else use a regular array */
var _wt1Q = _wt1Q || [];
/* Insert dynamically the script loading tag. This will trigger
* asynchronous loading of the script, even on old browsers that did
* not support the async="true" flag
*/
(function() {
var script = document.createElement('script');
script.src = "track.js"; // FIXME
script.type = 'text/javascript';
script.async = "true";
var script0 = document.getElementsByTagName("script")[0];
script0.parentNode.insertBefore(script, script0);
})();
Inserting the snippet in the head tag allows you to use the _wt1Q queue anywhere in your code. Asynchronous loading avoids common performance issues with inserting script tags in header.
On each trackPage or trackEvent call, the following data is tracked and stored in the WT1 backend:
- timestamp of the page view
- IP address of the client
- Visitor ID of the client
- URL of the page (location)
- Referrer for the page
- Client's User Agent
- Visitor-scope parameters
- Session-scope parameters
- Page view custom parameters, if any
- Size of the client's browser window and screen, if available
- The client's browser language
- The client's browser timezone-offset
For more information on custom variables, see Custom variables
Please see Javascript reference