Note: This documentation is for Opentracker's events engine, please contact us if you think you need an upgrade.

Javascript Implementation inserting events

The javascript library/ SDK is designed to measure browser activity. With this technology you can send (write) 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.

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

Script installation

You will need to take a trial to start using the javascript. You will receive an email with installation instructions.

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

<script src="//script.opentracker.net/?site=api.opentracker.net"></script>

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

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="//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="//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="//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.

Basic event

Send us a basic event with this javascript call:

<script type="text/javascript" src="//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("", map, false);
OTLogService.sendEvent(undefined, map, 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:

map.put insert event into an object (map) as a property name/ value pair.
map.get read a previous value set with map.put
map.clear used to clear a map's data
map.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", map); : This function will send (submit) the data to our log servers.

Example

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

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.

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); 
Info For more details on the state properties ots and otui please review reserved properties

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.

Cookies:

Click for details on reading Opentracker cookie data

Full example

<!-- note: you can remove the defer attribute from the script tag to avoid issues with load on ready functionality -->
<script src="//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 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="//cdn.opentracker.net/ot.20130905.js?site=ot3.opentracker.net&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.

We would love to hear your feedback. Please use the facebook comment box below