Javascript

Default Script installation

If you have not done so already, you will need to open a (trial) account to start using our javascript. Once a trial has been opened, you will receive an email with relevant installation instructions. Please read these installation instructions specific to your website/ webpages.

The received script will look something like this (the site parameter will differ per site):

<script src="https://script.opentracker.net/?site=mysite.com"></script>

This javascript will load into the browser and execute and collect data and send it to Opentracker's logging servers (log.opentracker.net).

For more information on installing the default javascript, see our Frequently Asked Questions or download our User's Guide

W3C Compliant script version. W3C Compliancy

In order to have a W3C-compliant version of the script, please use this script version.

Note: replace "mysite.com" with your registered site name.

<script language="JavaScript" type="text/javascript" defer="defer"
src="http://server1.opentracker.net/?site=www.mysite.com"></script>

Events

Before proceeding, be sure to read our basic introduction page about inserting events

With the Opentracker javascript in place, you can track (log) any action or event in your web app or website.

The Opentracker javascript contains functions and listeners that facilitate the insertion of events into Opentracker's events engine.

Basic event

Send us a basic event with this javascript call:

<script type="text/javascript" src="https://script.opentracker.net/?site=api.opentracker.net"></script>
<script>
OTLogService.sendEvent("your event title")
</script>

This will add an event to user's session with a clickstream title, ti: your event title

Example

You can add this anywhere you like. In this example, a button is pressed on a form:

<input 
   type="button" 
   id="myButton" 
   value="myButton label" 
   onclick='OTLogService.sendEvent("myButton was clicked")'
/>

NO TITLE for an event

If you decide to give no title for a event, the following can be done:

OTLogService.sendEvent("", _otmap, false);
OTLogService.sendEvent(undefined, _otmap, false);

both give a line in the event stream with title: NO TITLE

Events with properties

By default, sending a javascript event always sends a title. Adding events with more properties is very straightforward. Simply add the properties you wish to submit by using Opentracker's map javascript object:

_otmap.put insert event into an object (map) as a property name/ value pair.
_otmap.get read a previous value set with map.put
_otmap.clear used to clear a map's data
_otmap.remove use to remove specific property from a map

Once your map has been defined, you can send it to us with a simple javascript function:

OTLogService.sendEvent("your event title", _otmap); : This function will send (submit) the data to our log servers.

Example

var _otmap = new OTMap();
_otmap.put("name", "Brad Shaw");
_otmap.put("email", "bshaw@domain.com");   
OTLogService.sendEvent("User signup", _otmap);

Reserved or pre-defined properties

There are pre-defined properties that trigger certain behavior in a) the way an event is processed and b) displayed in the reporting interface. For example, the property called "email" will add the value of that property to clickstream user-profiles and appear in the Top Emails report, which is a list of all known email addresses on your site or app.

Info For more details on the state properties ots and otui please review reserved properties

Script modifications

For advanced use, you can change the default way our javascript behaves. You can do so by adding script options:

Script option: onload=false

Under certain circumstances, you might not want to send the event after the page loads. You can add parameters to the script to manipulate its behavior. To make the Opentracker javascript not collect any data on page-load you can add the onload=false option:

<!-- OPENTRACKER HTML START -->
<script src="https://script.opentracker.net/?site=mysite.com&onload=false"></script>
<!-- OPENTRACKER HTML END -->

Script option: onload=map

Frequently you want the script to collect default data (for instance screen colors, browser, etc.) but wait before sending the data to the logging servers. The following script shows how to turn off the default behavior, setup the data for sending, manipulate the data, and then send it. This will enable you to add extra data and trigger the sending of the data at a later stage. The script will define a variable (_otmap) with all data already filled. The following example illustrates a use case for segments:

<!-- OPENTRACKER HTML START -->
<script src="https://script.opentracker.net/?site=mysite.com&onload=map"></script>
<!-- OPENTRACKER HTML END -->
<script>
_otmap.put("salesChannel!", "West coast ads"); // define a variable called salesChannel, which is a segment (!)
OTLogService.sendEvent(_otmap); // send the map
</script>

notice the ! after the property-name, this needs to be added to make a property a segment. The OTLogService.sendEvent() method is called to send events. This can have several forms:

<!-- OPENTRACKER HTML START -->
<script src="https://script.opentracker.net/?site=mysite.com"></script>
<!-- OPENTRACKER HTML END -->
<script>

_otmap.put("salesChannel!", "West coast ads"); // define a segment (!) called salesChannel
OTLogService.sendEvent(_otmap); // send the preloaded (_otmap)

OTLogService.sendEvent("Just a simple event"); // send a title event

OTLogService.sendEvent("Just a simple event", _otmap); // send a title and a map

OTLogService.sendEvent("Just a simple event", _otmap, false); // send a title and a map, don't update the session state

</script>

The above script actually sends five events. Once when the page loads, and four coded events. Sending events will be discussed further underneath.

Opentracker Cookies

Amongst others, Opentracker utilizes first-party cookies to keep track of things.

Update the session and user state cookies

The state of a session/ user includes information on how many pages have been viewed and when the last activity took place. Sending events to Opentracker's events engine with javascript automatically updates the state of the session and the users with the OTLogService.sendEvent() function. The state is updated in the user interface for the user and the sessions. In most cases this is what you want, the sendEvent() function will automatically update a cookie holding state information, in the same way a normal page-view does.

For some events you may want to turn off this default functionality, which is accomplished by adding a false value to the OTLogService.sendEvent() function:

OTLogService.sendEvent("title", map, false); 

Reading the cookie

You can retrieve the session id and/or user id from the cookie

there are three cookies set by the Opentracker JavaScript:

  1. A cookie orientated to keeping user data:
    _otui <random number client site>. <first visit start unix timestamp>. <previous visit start unix timestamp>. <current visit start unix timestamp>. <session count>. <life time event view count>
    

    _otui 1247376984.1279273569088.1279273569088.1279273569088.1.13
     

  2. A cookie orientated to keeping session data:
    _ots <session event view count>. <current visit start unix timestamp>. <previous event view unix timestamp>. <current event view unix timestamp
    

    _ots 13.1279273569088.1279273785569.1279273833718
     

  3. A cookie orientated to keeping referrer data:
    _otr <session first referrer event view unix timestamp>.<referrer url>
    

    _otr 1279273431384.http%3A//www.example.com/an/example/referrer.html

Pass the cookies

You have to read the cookie to pass us the sid and uid

sid= <current visit start unix timestamp>.<random number client site>
sid = 1279273569088.1247376984

uid= <first visit start unix timestamp>.<random number client site>
uid = 1279273569088. 1247376984

Reading a cookie using Javascript

You can read the content of a Opentracker cookie with the following functions:

_ot_uid()to get the user id

_ot_sid()to get the session id

Example

<!-- note: you can remove the defer attribute from the script tag to not worry about load on ready stuff -->
<script src="http://script.opentracker.net/?site=www.opentracker.net">
<script type="text/javascript">

//alert the user id
alert(_ot_uid());

//alert the session id
alert(_ot_sid());

</script>

Counting

Opentracker's events engine includes counting functionality with segmentation within the API calls.

Info Please see inserting events with a url for more details on the mechanics

A javascript example

var map = new OTMap();
map.put("item", "Panasonic Lumix DMC-TZ30");
map.put("brand!", "Panasonic");
map.put("price", "257");
map.put("item-type", "camera[+257]");
OTLogService.sendEvent("Checkout complete", map);

Requirements:

  • The Opentracker tracking javascript needs to be in the page and loaded before you submit the custom events.

Full examples

Adding, deleting, clearing values in OTMap

<!-- note: you can remove the defer attribute from the script tag to avoid issues with load on ready functionality -->
<script src="http://script.opentracker.net/?site=www.opentracker.net"></script>
<script type="text/javascript">

        // Example of Sending data to the opentracker server
        // define the function that does the work
        function DoStuffFunction() {
        
                // define an empty variable called 'map'
                var map = new OTMap();
                
                //define the properties to be logged to Opentracker
                map.put("color", "red");
                map.put("email", "john.doe@example.com");
                
                //send (submit) the data to Opentracker
                OTLogService.sendEvent("first event", map);
                
                //clear map data to send new event data
                map.clear();
                
                //define the new properties to be logged to Opentracker
                map.put("shape", "circle");
                map.put("location", "home");
                
                //send the data to Opentracker again
                OTLogService.sendEvent("second event", map);
                
                //remove some data from the map object
                map.remove("location");
                
                //alert the user id
                alert(_ot_uid());
                
                //alert the session id
                alert(_ot_sid());
                
                //example functions
                alert(map.get("shape"));
                alert(map.size());
                alert(map.get("location"));
        }
</script>

Using javascript to send a event on page-load

Note: to submit the event on document ready, you can use either a existing library like jQuery or construct your own.

<!-- Load the jQuery library in order to submit the event after the document is ready -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">            
                                
<!-- Load the Opentracker javascript before you define the custom variable -->
<script src="https://script.opentracker.net/?site=test.opentracker.net"></script>

<script type="text/javascript">

        $(document).ready(function() {
                var map = new OTMap();
                map.put("firstName", "John");
                map.put("lastName", "Doe");
                OTLogService.sendEvent("Name captured", map);
        });
</script>

Using javascript to send a form event

You can auto-capture form data with a small adjustment to the script. 
Please refer here for documentation: www.opentracker.net/docs/automatic-form-tracking

An alternative is to do the work with javascript and use maps, this is for the more advanced javascript programmer:

Lets create a form text field with a submit button.

<form id="form1" name="form1" method="post" action="">
    <label>
      Send an event from a text box:
        </label>
    <input name="textbox" type="text" id="exampleTextbox" value="enter a test message" size="50" />
    <input type="button" name="seeActivityStream" id="seeActivityStream" value="Click to send text" onclick="sendTextForm()" />
</form>

And then you can submit the event with the filled in form value to Opentracker's event engine like this:

                           
<!-- Load the Opentracker javascript before you define the custom variable -->
<script src="https://script.opentracker.net/?site=test.opentracker.net"></script>

<script type="text/javascript">

function sendTextForm() {

  // create a new Opentracker events object called "map"
  var map = new OTMap();

  // fill the map objects with values 
  map.put("ti", "Send Text button clicked");

  // with getElementById you can get the data from all the form events
  var exampleTextbox = document.getElementById("exampleTextbox").value;

  // add the form field to the map  
  map.put("myFormTextbox", exampleTextbox);

  // send the data
  OTLogService.sendEvent("Send Text button clicked", map);
  
}       
</script>

For a complete example on how to submit form fields go here

 

Using javascript to track a download link

To measure a click on a link that downloads a file, you can add a small piece of javascript to track this download:

<!-- Load the Opentracker javascript before you define the custom variable -->
<script src="https://script.opentracker.net/?site=test.opentracker.net"></script>
<script type="text/javascript">

function downloadlink(file) {
    _otmap.put("PDF", file);
    OTLogService.sendEvent("Download", _otmap, false); 
    setTimeout(function() {      // we add a delay of 1 second to make sure the event registers before downloading the pdf
         window.location=file;
    },1000); 
}; 
</script>


<p><a href="#" onclick="downloadlink('mypdf.pdf');">Download PDF</a></p>

<p><input onclick="downloadlink('mypdf.pdf');" type="button" value="Download PDF" /></p>

 

Using a static script

Opentracker also provides a static script. Legacy sites (prior to January 2013) need to specify a server parameter. The following javascript implements the above examples using a static script:

<script type="text/javascript" src="http://cdn.opentracker.net/ot.20130905.js?site=myscript.com&server=atc01.opentracker.net&onload=map"></script>

Notice the domain and script name have changed and the server parameter has been added (for sites added prior to January 2013). 

Static scripts need to be updated when a new version of the script is introduced.

Static scripts need to be loaded only once by the browser, and are geographically located close to the user. 

Browser Power

Explore the Opentracker javascript library, that has been intensively used and tested for more than 10 years.