Sometimes you want an element to be identified based on its position relative to other elements rather than its content. For example, you might have three rotating or randomized images on a page that you want to identify in your reports based on which of the three was clicked rather than based on the image URL. You use the ceid attribute to track in this manner.

Using the ceid attribute

The ceid attribute forces Crazy Egg to identify an element using whatever you provided as the attribute value rather than the element's content.

Here's an example:

<img src="image_23894723.jpg" ceid="random_image_1″ />
<img src="image_38947234.jpg" ceid="random_image_2″ />
<img src="image_09834343.jpg" ceid="random_image_3″ />

No matter what the value of the src attribute is for the first image, it will always be identified asrandom_image_1. The same goes for the second and third images; regardless of what their src is, they will always be identified as random_image_2 and random_image_3, respectively.

This approach works just as well with any other element type as it does with images. Use the ceidattribute whenever you need to override Crazy Egg's default element identification procedure.

Using the -ce-capture CSS class

Sometimes using ceid is not practical or desirable. For instance, if you have a very large number of elements which you want to track based on click position, you would have to assign unique ceidattributes to each of them. There is another option to consider if you are more interested in the click position than you are with knowing the precise element that was clicked.

By giving an element the CSS class -ce-capture, you force all clicks within that element to be "captured" by it. This means that all clicks will be tracked as if they occurred on the element with the class -ce-capture, even if they actually occurred on a sub-element. This way clicks within that part of the page will always appear in your reports, regardless of whether or not the actual clicked element could be matched with an element in your snapshot.

To modify the example above to use -ce-capture instead, it is necessary to wrap the images in a containing element. In this case we will use a <div>. Notice that no ceid attributes were added:

<div class="-ce-capture">
<img src="image_23894723.jpg">
<img src="image_38947234.jpg">
<img src="image_09834343.jpg">
</div>

With this markup, any clicks on the images will be reported as if they occurred in the <div>. In addition, those clicks will be positioned in your report relative to the <div> rather than relative to the clicked image.

There is a trade-off with this approach. While your reports will always show the precise position of clicks within the <div>, the list and overlay views of your reports would not include any click data for the images themselves.