• Documentation >
• Guide >
• Personalization >
• Developer guide >
• Track with yct.js

Tracking with yct.js

This is yet another example of how to integrate the tracking with a Google-style JavaScript in your site. It is a very generic approach and should be evaluated if this meets your requirements and security policy!

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

Tracking Code Quickstart

The YOOCHOOSE JavaScript is a Google-like tracking API (ga.js) that you can paste into your pages. It activates the YOOCHOOSE tracking by inserting https://cdn.yoochoose.net/yct.js into the page.

In order to use this on your pages, copy the code snippet below, replacing <YOUR_MANDATOR_ID> with your mandator ID, <PAGE_ID> with your 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.

<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.yoochoose.net/yct.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 yct.js is ready to execute 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 simply JavaScript arrays that conform to a certain format. The first element in a command array is the name of the tracker object method 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 via the push(...) method. 

_ycq object methods

push

push(commandArray)

Executes the given command array, which is simply 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:

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 4 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 5 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 2 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:

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

Even if this button is clicked before the browser has finished loading yct.js, the event will be captured and eventually executed.