Welcome to the DEMO & EXAMPLES web site for Open Web Analytics. The data contained in the demos and examples comes from the live usage of this site. Historical data is truncated periodically.

Tracking a web page using OWA's Javascript Tracker

Consult the OWA wiki for more information and documentation on OWA's Javascript tracker.

Tracking a web page using OWA's Javascript tracker is as easy as cut and pasting the Javascript code into your web page.

The Code

Here's what the tracker code looks like:

<link rel="preconnect" href="//yourdomain">
<link rel="dns-prefetch" href="//yourdomain">
<!-- Start Open Web Analytics Tracker -->
<script type="text/javascript">
//<![CDATA[
var owa_baseUrl = 'https://yourdomain/path/to/owa/';
var owa_cmds = owa_cmds || [];
owa_cmds.push(['setSiteId', 'yoursiteidgoeshere']);
owa_cmds.push(['trackPageView']);
owa_cmds.push(['trackClicks']);
owa_cmds.push(['trackDomStream']);

(function() {
    var _owa = document.createElement('script'); _owa.async = true;
    owa_baseUrl = ('https:' == document.location.protocol ? window.owa_baseSecUrl || owa_baseUrl.replace(/http:/, 'https:') : owa_baseUrl );
    _owa.src = owa_baseUrl + 'public/base/dist/owa.tracker.js';
    var _owa_p = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
    _owa_p.appendChild(_owa);
}());
//]]>
</script>
<!-- End Open Web Analytics Code -->

Fill in the path to your OWA server and your site ID, then paste the block into the <head> of your pages — as early as you can. The tracker is loaded asynchronously and never blocks rendering, so putting it early costs you nothing and starts the download sooner.

What the pieces do

owa_cmds is the whole interface. You push commands onto an ordinary array and the tracker runs them once it loads. That is what makes the snippet safe to place before the tracker has arrived: commands issued early are queued, not lost, so nothing depends on the script having finished downloading. The tracker declares no global of its own — owa_cmds is the only name it takes.

The two link tags are a latency hint. They tell the browser to resolve DNS and open the TLS connection to your OWA server while it is still parsing the page, instead of starting that work later when the script is actually requested. On a cold connection that is three round trips removed from the critical path. They are hints: a browser that ignores them loads exactly as before. Note there is deliberately no crossorigin attribute — the tracker script and its beacons are ordinary same-origin-agnostic requests, and adding it would open a second connection that nothing uses.

The owa_baseUrl line inside the function switches to HTTPS when the page itself is HTTPS, so one snippet works on both.

To save you the trouble, OWA's admin interface will generate this block for you with the right base URL and site ID already filled in. Log in, go to the Sites page, and use Get Tracking Code for the site you want to track.

You can also do a lot of customization of the tracker Javascript. See the OWA Wiki or some of the other examples for more detail.