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.