Have you ever wanted to track the performance of a new feature on your website? Only to get frustrated when tracking for that feature wasn’t configured prior to launch? Enter Heap, and their Autocapture feature!

 

Autocapture collects every page view, click, form fill, and form change, so you can analyze features without involving a developer. Let’s review three ways we can create an event in Heap based on data from Autocapture.

 

The Task

Let’s say a ‘Contact Us' form was added to the website last week, and you want to analyze performance. The first step in this process is to create an event, and we’ll review three ways to create an event.

 

Creating events without a developer

Creating events using ‘Live’

In ‘Live’, you see every interaction with your website, as it happens. Here’s what we see when we open Live:

From there, we can toggle ‘Show Only My Events’, which filters out events from all other users except you. Once I click the ‘Get In Touch' button, I see it in Live, and then can define the event directly from there:

Creating events using ‘Event Visualizer’

‘Event Visualizer’ overlays Heap on top of your website, so you can click on elements you’d like to track. When I click on the ‘Get in touch’ button, Heap automatically comes up with a definition for the event:

We immediately get some helpful information to QA the recommended definition:

• How many clicks it received in the last week

• How many times that definition occurs on the page

• What other pages the definition appears on

Heap’s definition of a click on the .contact-alt class shows up on the /solution and /audit pages. A review of those pages confirms there is a contact us form present.

 

Creating events manually

For the more experienced users, you can also define an event manually in Heap using CSS selectors. In this example, we’ll create an event that captures all form-submissions and look at the data:

 

QA an event immediately

Now that our event is created, we don’t have to wait for data to flow in to do a QA. In the image below, notice the following:

1. This event was created on 2022-04-01 but we have historical data from March we can use to instantly QA the event.

2. In the ‘Analysis Preview’, there are unexpected paths from users applying to jobs, which means the definition should be revised.

 

Revise the event and immediately understand the impact

By revising the definition to include the class .contact-alt, we now see the event is showing paths that include our form, and the definition is ready to be used!