Overview
The Live View provides you with a streaming, chronological, real-time view of all your raw and defined Heap events. This is a great tool for QAing that your Heap SDK is installed correctly and that your event definitions are working properly.
To see your Live View, navigate to the Live page in Heap. When you first launch the page, you’ll start to see events scrolling automatically. You can pause and unpause the live stream by clicking the Pause/Resume button.
You can also clear your feed for testing by clicking the Clear Feed button.
If you attempt to run the Event Visualizer and the Live View at the same time, then the Event Visualizer will ignore Heap and prevent it from capturing your actions in the Event Visualizer. Accordingly, the Live View won’t show any actions. This is to protect your data from getting muddled.
To use the Live View to debug the Event Visualizer, see the QA Events with Live View section below.
Defining Raw Events in Live View
For each raw event, the Definition column will either show the name of a matching virtual event, or show undefined if the event is not yet defined as a virtual event.
To define new events from the Live View:
- Click on the row of the raw event that you want to define to open up the Event Detail Pane on the right-hand side of the screen
- Click Define Event
- Name your event and define it as a personal or shared event
- Add your event to a Category; you can also add a source, apply filters, and set Snapshot categories
- Click Define Event to save your event definition
Filtering Events
You can filter raw events by User ID, or by Session, Pageview, and Event properties. To add a filter, click the + icon and choose the property, operator, and value you want to filter on, then click Apply Filters to start viewing the filtered live event stream.
Filtering by device type can be helpful to make sure your mobile Heap SDK is implemented correctly.
Filtering by event properties can be helpful for understanding if the CSS selector you are using for your event definition is working properly (i.e. that it’s not too specific or too broad).
QA Events with Live View
To QA event definitions in the Live View:
1. Navigate to the Event Visualizer page, then from the page you want to QA events for, click the Debug in Live View button at the top. This will take you to the Live View page and automatically filter based on actions taken only on your computer.
2. Click Launch your website. This takes you to a window where you can click around your site, and only the events coming from your machine will appear in your Live View tab.
3. On this page, take the action corresponding to the event that you just created.
4. Confirm in Live View that the name of the event you just created appears under the Definition column.
5. As an additional QA, we recommend taking some actions that you want to make sure do not get counted as your event. Confirm that these actions do not show up with your event name under the Definition column.
If you are using IP exclusions and filtering out events from your office’s IP address range, you will not see live events when you filter for your User ID from your office.
One workaround to this is to connect to a Virtual Private Network using an IP address outside your company’s IP address range, then repeat the steps above.
React Native
For apps on SDK versions below 0.9.0, you can define React Native events in Live View.
To use Live View effectively for event definition, you’ll need to identify your own User ID and use that as a filter to isolate events that you are triggering. The easiest way to find your User ID is to query in the Users view for your identity if you’ve implemented Heap.identify(), or to filter for an initial device and location to isolate yourself. This is most easily done in a development environment.
Once events are filtered appropriately, you can click around in a simulator/emulator or on a live device. Events may take up to 15 seconds to propagate to the Heap UI, so it’s helpful to be deliberate and patient to avoid generating too many events at a time.
The Live View enables you to see the set of properties associated with a particular event (except for the hierarchy) and to identify defining characteristics of that event. As an example, when you select the ‘Touch on Barbecue’ property, click the ‘View All Properties’ button in the right pane, and scroll down, you’ll see a captured ‘Target Text’ property with the text ‘Barbecue’.
To define a new event with this event property, Click the ‘Define Event’ button at the top of the right pane. The filters for Target Text = Barbecue will be prepopulated for your event definition. Simply enter a name and click ‘Define Event’ to save it.
Information about how to use hierarchies in event definitions is available Managing React Native Event Definitions.