Skip to content
  • Documentation >
  • Personalization >
  • Track with ibexa-tracker.js

Track events with ibexa-tracker.js

This is another example of how you can integrate the tracking with a Google-style JavaScript in your site. The approach is very generic and evaluate it if it meets your requirements and security policy.

If you want the userid to be generated automatically, leave out the user params in the _ycq.push calls. If a predefined cookie already exists, it is used. Otherwise a new one is created.

Tracking code quickstart

The Personalization JavaScript is a Google-like tracking API (ga.js) that you can paste into your pages. It activates the tracking by inserting https://cdn.perso.ibexa.co/ibexa-tracker.js into the page.

To use this mechanism on your pages, copy the code snippet below, and replace <YOUR_MANDATOR_ID> with the customer ID, <PAGE_ID> with the page/item identifier  and <USER_ID> with the one generated by your user identifier. All identifiers can be any form of string. Paste this snippet into your website template page so that it appears before the closing </head> tag.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script type="text/javascript">
  var _ycq = _ycq || [];
  _ycq.push(['_setMandator', '<YOUR_MANDATOR_ID>']);
  _ycq.push(['_trackEvent', '1', 'click', '<PAGE_ID>', '<USER_ID>']);

  (function() {
    var yc = document.createElement('script'); 
    yc.type = 'text/javascript'; 
    yc.async = true;
    yc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.perso.ibexa.co/ibexa-tracker.js';
    var ycs = document.getElementsByTagName('script')[0];
    ycs.parentNode.insertBefore(yc, ycs);
  })();

</script>

Asynchronous syntax

The _ycq object is what makes the asynchronous syntax possible. It acts as a queue, which is a "first-in, first-out" (FIFO) data structure that collects API calls until ibexa-tracker.js is ready to run them. To add to the queue, use the _ycq.push method.

To push an API call into the queue, you must convert it from the traditional JavaScript syntax to a command array. Command arrays are JavaScript arrays that conform to a certain format. The first element in a command array is the name of the tracker object method that you want to call. It must be a string. The remaining elements are the arguments you want to pass to the tracker object method. These can be any JavaScript value.

Tracking code

The _ycq global object can be used directly for asynchronous page tracking with the push(...) method. 

_ycq object methods

push

push(commandArray)

Executes the command array, which is a JavaScript array that conforms to the following format.  The first element of the array must be the name of a tracker object method passed as a string.  The rest of the array elements are the values to be passed in as arguments to the function. 

Here is an example of typical usage of the method:

1
2
3
var _ycq = _ycq || [];
_ycq.push(['_setMandator', '<YOUR_MANDATOR_ID>']);
_ycq.push(['_trackEvent', '1', 'click', 'https://mydoc.pdf', 'user1234']);

Tracker object names

Object Description Example
_setMandator - Executed with one additional parameter: MandatorId _ycq.push (['_setMandator' , '<YOUR_MANDATOR_ID>']);
_trackEvent - Executed with four additional parameters: ItemType, EventType, ItemId, UserId.
- EventType can be any of the described types		 capturing an event: _ycq.push(['_trackEvent', '1', 'buy', 'https://mydoc.pdf', 'user1234x']);
_trackTimedEvent - Executed with five additional parameters: ItemType, EventType, ItemId, Timeout, UserId.
- EventType can be any of the described types.
- Timeout can be any integer greater than than 0 representing time in ms		 consume event sent after 20s: _ycq.push(['_trackTimedEvent', '1', 'consume', 'https://mydoc.pdf', '20000', 'user1234x']);
_login - Executed with two additional parameters: anonymous userId, pseudonymous userId.
- It is to be triggered when a user logs in and the tracking identity is changed.
 -
ycreco=true - If you want to send a click recommended event you can append the following parameter to the recommended item URLs: https://mydomain.com/mypage.html?ycreco=true or
https://mydomain.com/mypage.html?myparameter=x&ycreco=true

Tracking with HTML event handlers

The asynchronous tracking syntax should also be used from within DOM event handlers. For example, the following button generates an event when it is clicked:

1
<button onclick = "_ycq.push(['_trackEvent', '2', 'click', 'itemId1', 'user1234x'])"/><button>

Even if this button is clicked before the browser has finished loading ibexa-tracker.js, the event is captured and eventually executed.