A virtual element is a rectangular region of the page that you define and track as if it were a regular page element.
Virtual elements might be employed to improve the tracking of clicks inside of an interactive Flash clip or <canvas> element. Suppose you had a Flash video clip with play, pause, and rewind buttons. Normally all clicks on that clip would just 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 normal HTML element. Click data specifically 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 position of the parent.