Let's learn how to create a smart event! 

Watch the summarized video or continue reading this article. 

 

 

• Conditions to create a smart event → 
• Steps to create a smart event → 
• 3 methods to find sessions with desired UI Element → 
• Use rules to tag mulitple events at once→ 

What are the conditions to create a smart event? 

You can create smart events from gestures on specific UI elements directly from a session replay. In order to create events on your own, two conditions must be met : 

1. A user must have interacted with a UI element through the following gestures : Single tap or Swipes. 
2. The UI element must be visible on screen

Step-by-step guide to create a smart event 

1 » Find a session that contains the UI Element you wish to track.  →  Read to learn ways to find relevant sessions 

2 » Play the session and access the activity timeline to the right

3 » Choose the interaction you wish to capture as a smart event

4 » Click on the ‘+’ button or expand the card to see the details and click on ‘Create event’ button

5 » Name your event and provide a description. 

6 » Set the different rules for each event property → Learn more about this here

 

How to find relevant sessions with the UI element to create an event? 

Before creating a smart event, it's essential to find relevant sessions where the specific UI element you're interested in is. Depending on the scenario, there are three general methods to find the right UI element to tag and turn into a smart event.

Method 1: Watching sessions

The first method involves watching sessions and is a straightforward way to identify UI elements. This is great if you come across something you would like to tag while you are already watching some sessions. 

You can watch sessions from various pages : Sessions list, User, Event List and Screens. 

Once you click on a session replay, you can see the activity timeline in the right hand side. The activity timeline displays all interactions. The activity section displays the following information:

 

• Gesture (eg.single tap)
• The UI Element’s name (in italics)
• The Element type ( e.g Button, text view, view group)

If you click on the arrow to expand, you can also get the screen name and all the essential details before creating a smart event. To create smart events, you can either click the plus button or click on the arrow to expand then "Create Event" button, 

Method 2: Click and drag to highlight an element in heatmaps

You can select the element you are interested in heatmaps and find session replays where users interacted with the element. 

1 » Head over to the Screens Page where all your app's screens are listed. Choose the screen where the UI element exists. 

2 » View the heatmap & highlight the element : Suppose you're a product manager interested in creating a Smart Event whenever users interact with the add to cart element. Using the area select feature, you can easily highlight the add to cart button. 

3 »See Screen Visits: Clicking on “See Screen Replay” will take you to the Screen Visits page, where you'll see all the sessions where users interacted within the selected area. You can play any of these sessions to see the exact moment when the interaction occurred. A blue dot indicates where the gesture was made, and the corresponding activity card is highlighted. Click on the "+" sign to create a smart event. 

Best Practices for Area Select Feature:

• Static UI Elements: The area select feature works exceptionally well for UI elements that remain static on a page. Elements at the top, like search bars or menu items, and those at the bottom, such as shortcuts or persistent elements, are ideal.
• UI elements with few interactions : Works great when the particular element doesn’t occur often, it’s an easy way to find rare interactions. 
• Not Suitable for Scrolling Pages: Elements whose positions change based on user scrolling are not well-suited for the area select feature. When users scroll, the position of these elements can shift and might not be inside the drawn selected box
• Not suitable if the screen tagging and heatmaps displayed are not of good quality. 

Method 3: Using gesture filters from the screens page 

The gesture filters present on ‘Screens’ page can be used to find the sessions with UI elements you are interested in analyzing. Gesture filters are designed to help you identify screen visits that involve specific types of gestures. These filters make it possible to set criteria based on 3 UI element attributes :

• UI element name 
• UI element type  
• UI element ID 

→ Read explanations of elements here 

By doing this, you can pinpoint screen visits where a particular gesture occurred on a specific UI element.

1 » Go to the Screens Page: You'll see alll your screens listed.

2 » Access Gesture Filters: Click on add filter > Gestures > Screen visits with gestures 

3 » Choose the Right Attribute:  Click on add condition and depending on what you want to track, select the appropriate attribute (UI Element Name, Element Type, or Element ID).

• We'll focus on using the UI Element Name as an example. If you're interested in tracking user interactions with the “login button” you could search for login or scroll to find that element  "Login" into the Element Name filter.

4 » Apply the Filter: Click on "Apply" to list all the screens with the UI elements that match the criteria. 

5 » View Screen Visits: Click on any screen and then on the tab screen visits next to heatmap. You will see a list of all sessions where a user interacted with the element you filtered for. Click on any of the sessions to see the exact moment when the interaction occurred. A blue dot indicates where the gesture was made, and the corresponding activity card is highlighted. Click on the "+" sign to create a smart event. 

 

Best Practices for Gesture Filters:

• Knowledge of attributes : You know the name, type, or ID of the element you want to analyze.
• Static & Scrollable Screens: Gesture filters are effective for both static and scrollable screens, regardless of where the UI element is positioned. This makes it more accurate than the heatmap area select tool.

What are smart event property rules and how to use them? 

When creating smart events, you have the option to set rules for screen name, UI element name, and element ID. These rules affect how smart events are captured and tagged. They will help you to tag multiple events at once. For example, you can tag an element across different screen. 

 

Screen Name Rule

The screen name rule determines whether an event is tagged only in a specific screen (the one you currently create the smart event from) or across all screens where the UI element exists.

Let's look at an example when the screen name rule matters. 

In some apps, a particular UI element may appear on multiple screens. E-commerce apps often have the 'Add to cart' button on various screens such as the product listing page, product details page, and the checkout page. 

• If you would like to create only 1 event on that one particular screen, then you would select the screen name. 
• If you would like to tag all interactions with the 'add to cart button' across all screens, you can tick 'All' rule to create a single smart event that captures this element across all screens in your app. 
• This single smart event will tag the same element from multiple screens at once. 

UI Element Name Rule

The UI element name rule is important if you want to tag multiple similar elements of the same type on a particular screen as a single event. In an e-commerce, a product page may list many products, each with a different product name but the same element ID. 

 

The yellow squares represent the elements tagged. 

• To create an event when a user clicks on a specific product such as Levis 578 Baggy, then choose Levis 578 as the element name. This will only tag interactions when a user taps on Levis 578, as you can see in option B. 
• To tag all interactions on products in the jean category irrespective of the name of the element, use the 'All' rule for UI element name as you can see in Option A. 
• This creates a single smart event that tags all elements on the screen sharing the default element ID.

 UI Element ID Rule

The element ID rule is crucial when elements appear identical on different platforms (e.g., Android and iOS) but have varying element IDs. 

 

•  In cases where the element IDs differs but the element name is the same, you can set the element ID rule to 'All.'
• This tags all elements with the default element name, regardless of their element ID.
• This combination ensures that both Android and iOS sessions are tagged, eliminating the need to create separate smart events for each platform.

To check if the element IDs are different in an IOS vs. Android for a UI element : 

• Find the session within the UI element you are interested in 
• Identify the element ID by using the arrow to expand the view
• Click on the session info tab and look for device class to identify which platform it is (Android vs. IOS)
• Compare with the element id with a session from the alternative platform 

Next » How to manage smart event →