Defining Events with Hierarchical CSS Selectors

Today, we’re introducing a new capability in Heap: defining web events with hierarchical CSS selectors. This makes it much easier for you to retroactively analyze user interactions, all without shipping code and without waiting for data.

Suppose you need to know whether customers interact with a gallery of images. The gallery is represented as a div.gallery with nested img elements.

Oh no – you forgot to assign classnames to these image tags! Not an issue with Heap. Just open the Define Event view, and define the “Click on Gallery Image” event like so:

This works exactly like a normal CSS selector. Just add spaces between each element to specify levels in the hierarchy.

And that’s it! Now you have retroactive data on this interaction computed instantly. You can segment on this event and use it to construct cohorts, as if you had been tracking it from the very beginning.

We updated Heap to start tracking hierarchical data on November 17, 2013. Thus, any query involving hierarchical events will extend back in time until this date. All non-hierarchical events will work the same as before (they’ll go back in time further and will only match the child-most element in the hierarchy).

How else should we let you define events? Let us know @heap!