Improve Click Tracking with Virtual Elements

A virtual element is a rectangular page region you define and track as if it were a common page element.

Virtual elements might be employed to improve the tracking of clicks inside an interactive Flash clip or <canvas> element.  Suppose you had a Flash video clip with play, pause, and rewind buttons. Typically all clicks on that clip would be identified the same way; no distinction would be made between clicks on the different buttons it contained. If you were to set up an event handler so that, for instance, a click on the play button resulted in a call to CE2.click, Crazy Egg could track clicks on that button as if it were a standard HTML element. Click data for the video control buttons would appear in the overlay and list views.

The virtual element can be defined by passing a JavaScript object as the first argument to CE2.click.

var myElement = {
// required fields
left: 100,
top: 120,
width: 550,
height: 400,

// optional fields
id: "unique_id",
ceid: "unique_id",
name: "human-readable name",
data: "arbitrary string",
parentID: "id_of_containing_element"
}
			
  • left, top, width, and height properties specify the size and absolute position of the virtual element and are required.
  • id has the same meaning as the HTML attribute of the same name; it should be unique to the page
  • ceid forces Crazy Egg to identify an element using only the ceid, ignoring any other property
  • name specifies exactly the name of this element in the list view of your report
  • data is any arbitrary data you want to provide that might help distinguish this element from another similar element
  • parentID is the ID of the parent element if it has one

If you provide a parentID, the top and left properties must be relative to the parent’s position.

Was this article helpful?

Related Articles

Need Support?

Can’t find the answer you’re looking for? Don’t worry we’re here to help!

Submit a request