Skip to content
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
Home Define & Analyze Data Management QA Events with Live View
Getting Started Administration Define & Analyze Analysis Examples Heap Plays Integrations Heap Connect Data Privacy

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

QA Events with Live View

In this article you'll learn:

  • How to QA your Heap installation and event definitions in live view
  • How to filter for specific events in live view
  • How to define raw events in live view for standard and React Native installations

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.

Events flowing into live view in chronological order

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:

  1. 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
  2. Click Define Event
  3. Name your event and define it as a personal or shared event
  4. Add your event to a Category; you can also add a source, apply filters, and set Snapshot categories
  5. 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.

The event visualizer with an arrow pointed at the 'Debug in Live View' button

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.

The Live view page with a filter of User ID = a string of numbers applied

3. On this page, take the action corresponding to the event that you just created.

A mouse clicking the Sign Up button in Live View

4. Confirm in Live View that the name of the event you just created appears under the Definition column.

The Live View page with a red box around the Click Sign Up event

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.

Filtering for Mobile Sessions in Live View

To filter for mobile sessions in Live View, complete these steps: 

  1. Geolocation (Region and City) 
  2. IP address (even better than geolocation)
  3. Device information (Platform and Device Type)

Source (will be either Android or iOS, NOT advised when using Live View for a React Native installation)

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 in Managing React Native Event Definitions.

Was this article helpful?

Yes No

Thank you for your feedback!

Last updated February 17, 2022.

live viewQA event definitionsQA events
  • Blog
  • Partners
  • Security
  • Terms
  • About
  • Careers
  • Privacy
  • Contact Us

© 2022 Heap, Inc.