Custom Tracking: CE2 Functions

The Crazy Egg tracking script provides a few utility functions that you can employ to help you implement custom tracking behaviors.

Utility Functions

window.CE_READY

As soon as Crazy Egg is initialized, it calls the Javascript function  CE_READY, if it has been defined. Like the above examples, you should define a function named CE_READY and put your custom Crazy Egg code inside. This ensures that your code does not try to use the CE2 object before it has been defined, which would cause errors that would prevent your custom variables from being tracked.

window.CE_READY = function () {
  console.log('Crazy Egg tracking script loaded');
};

CE2.getBox(element)  
element: A DOM element

Returns an object describing the size and absolute position of the element. Example: 
> CE2.getBox(element);
{ left: 353, top: 1114, width: 426, height: 36 };
CE2.listen(target, event, function) 
target: A DOM element
event: Name of the event to listen for, e.g. “click”, “keyup”, “load”, etc. 
function: The function to call when the event occurs
CE2.listen(bodyElement, 'mousemove', function (event) {
  console.log('mouse movement');});

This is a very simple method of registering event handlers. Unlike a full-featured JavaScript framework, this function passes only native event objects to the hander. Do not expect your event handlers to receive wrapped, normalized event objects. Use a full-featured JavaScript framework if you require that feature. This function should suffice, however, if all you want to do is pass the event object to CE2.click.

The CE2.click function can be used to send click data to Crazy Egg. This function can be called in a number of ways:

CE2.click(element, x, y)
element: Either a DOM element or a virtual element
x: The x-coordinate of the click, relative to the element
y: The y-coordinate of the click, relative to the element
CE2.click(element, event)
element: Either a DOM element or a virtual element
event: A mouse event from the element or one of its sub-elements; the x and y coordinates of the click will be derived from the event object
CE2.click(element) element:
Either a DOM element or a virtual element
(The click will be placed in the center of the element.)

Recording Identifier

Sets an identifier for the current session being recorded. The value passed in can be any value. It could be an email address, username, or numerical user ID. On the customer dashboard, you can filter recordings by the identifier. Keep in mind that the identifier will be set only if the visitor session is being recorded.

CE2.identify(identifier)
identifier: A String

// Crazy Egg Script is already loaded 
if (window.CE2) {
  CE2.identify('userID'); 
} else {   
  // if not loaded yet, set the recording identifier once the script loads   
  window.CE_READY = function() {
    CE2.identify('userID');   
  } 
}

Custom User Variables

You may have noticed the menu items called  User Var 1, User Var 2 (and so on) in the confetti, and overlay views of your reports. By default, no data is attached to these menu options. If you were to select User Var 1 from one of your own reports, you’d see that every click on confetti under that option is marked Unknown.

These variables are purposely left undefined so that you can fill them with your own custom data. For example, you could track clicks by logged-in users vs. clicks by unregistered visitors, or segment your visitors’ clicks by the number of previous clicks they made on the page. With a little Javascript code, you can categorize clicks on your pages just about any way you might want.

CE2.set(userVar, value)
userVar: A number from 1 to 5
value: Any string value (it may be truncated if it is over 100 characters)

You set the value of a user variable with the CE2.set Javascript function:

CE2.set(1, 'some string');

Any clicks on the page will include the custom values you specified with CE2.set. Those values will appear in the confetti and overlay views of your reports.  You are not restricted to just calling set once, of course. You could fill up all 5 user vars.

window.CE_READY = function () {
  CE2.set(1, 'some string');
  CE2.set(2, 'another value');
  CE2.set(3, 'yet another value');
  CE2.set(4, 'more');
  CE2.set(5, 'and more');
}

You can also change a variable after it was initially set. In the sample code below, each click will have User Var 1 set to initial value. However, after a visitor clicks the image button.png, any subsequent clicks on that page will have User Var 1 set to the clicked button:

<script type="text/javascript"> 
  window.CE_READY = function () { 
    CE2.set(1, "initial value"); 
  } 
</script>  

<a href="javascript:void(CE2 && CE2.set(1, 'clicked link'))"> link </a>

Still need help? Contact Us Contact Us