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
Caution: If you provide a parentID, the top and left properties must be relative to the parent's position.