Raw Events and Visual Labeler

Userpilot can capture front-end events automatically using the raw events auto-capturing feature. This feature captures events like Clicks, Text input changes, and Form submissions. It eliminates the need for manually adding trackable events or setting up feature tags for individual components such as links, buttons, divs, spans, or other parts of your product.

The automatic capturing of users' interactions on your platforms can be later used in Advanced Segmentation, Analytics (Reporting) thus enabling stakeholders to take data-driven actions/decisions.

Enabling/Disabling Raw Events Auto-Capturing

Under Configure - Settings, you can simply enable/disable the autocaptuing of raw events by Userpilot

Types of interactions captured

• Meaningful Clicks - Clicking buttons with underlying mutations (i.e. actions) or links (anchor HTLM elements with href)

  You'll also notice click on different elements <div>, <span>, etc.. each with a descriptive title

• Changing an entry on an input/text area:

  We tie those particular elements with their relevant placeholder of form input name and thus you'll see the description of those interactions either containing a placeholder text, an input name, or neither

• Form Submissions

Labeling a Raw Event

You can create a Labeled Event by clicking on the button "Label Event" next to the captured event, then you can set the desired settings (Name, Description, Category under Details and Domain, Path, Event (CSS selectors, text contains) under Targeting), most settings will be automatically filled by the way they were captured in the first place, but when labeling them you can customize them to your needs.

After the event has been labeled successfully, it will show as Labeled Event under Overview with the rest of the tagged/sent events (Feature tags, Tracked events, and Custom events), and can be used in Segmentation, Content triggering settings (Event-Occurrence, Audience Settings), and in creating Analytical Reports.

Visual Labeler

• Visual labeler allows you to label certain events in your web app that you would like to track, without any interference with your dev team.
• you can seamlessly label events visually (through the Chrome Extension) or label immediately within Userpilot by inputting the desired CSS selector of the desired element.

This will be an improvement to Userpilot’s feature tagging as it will provide historical data for all events labeled through the Chrome Extension, with the CSS Selector or through the Raw Events table. 

Additionally, you will be able to get better clarity on the events that are being called out in the raw events table by choosing to ‘Visually Label’ the event which will take you to the Chrome Extension builder and highlight the specified element. At this stage, you can choose to reselect the element if it’s not targeting exactly what you are looking for.

Common use cases

• Identify where your users are spending their time on your product.
• Get an intuitive view of your feature usage.
• Trigger Flows based on user behavior
• Track users' activity and understand what features they are interacting with.
• Defining a goal using a feature tag to measure the impact of your in-flows on user behavior.

How to Label events visually ? 

Once you've successfully installed the Userpilot builder, you can head over to the Events tab and follow the below steps -

• Click on the 'Create event' button at the top-right. 
• Select “Label event visually” and paste the url of the page where you would to label the events.
• Click on “Visual Labeler”.
• It then takes you to your application and the builder will popup at the bottom of your screen. 
• Select an element and a sidebar will be displayed that has the interaction types. You can choose to track users' clicks, hovers, form submissions or even text input.
• Once you are done with adding a name, description and other details, you can click save.

How to Label Events with CSS ?

• After you click on ‘Create Event’ in the Events page, select “Label Event with CSS”.
• Add a name and select the interaction type.
• Click next or on the targeting tab and add the CSS selector of the element. 
• Click Label at the bottom right of the page. 

How to Label Raw events

You can also label the raw events by choosing to either visually label them or using a CSS selector through the two options available against the respective raw event in your Userpilot dashboard.

Important Notes to keep in mind:

1. The ability to 'Label' Raw Events is ONLY allowed on Growth and Enterprise plans
2. Changing the configuration/targeting settings of a Labeled Event doesn't affect historical data collected but only will affect later/future evaluation of it
3. Search can show results for specific event interactions by typing (clicked on, submitted form on, or changed text on), the title or pathname/URL to narrow down raw events results. In addition to the Advanced search option that allows:
   • Adding the interaction type (clicked on, submitted form on, or changed text on)
   • CSS Selector or Text Content
   • Path/Tagged Page Filtration: Target events occurring at a specific URL/Path or Tagged Page

Supported CSS Selector(s) for the Autocapture Raw Events:

• Tag Name (e.g., div , span , button , a form , font , path , svg , input , ...)
• Tag Name with Classes and/or ID
  • Examples:
    • a.MuiButtonBase-root.MuiListItem-button.MuiListItem-gutters
    • #main-container-id, #table-container-id
    • div#root
• Nth-child:
  • Example: div.MuiPaper-root.MuiPaper-rounded:nth-child(3)
• Attribute Selectors:
  • Specific Value
    • [attr="V"] - Select elements that have attribute attr with a specific value of V .
    • Example: div[role="button"][aria-haspopup="true"][aria-disabled="false"]
  • The Attribute Value Starts With
    • [attr^="V"] - Select elements that have attribute attr with a value starting with V .
    • Example: div[tabindex="0"][role="button"][aria-labelledby^="period"]
  • The Attribute Value Ends With
    • [attr$="V"] - Select elements that have attribute attr with a value ending in V .
  • The Attribute Value Contains
    • [attr*="V"] - Select elements that have attribute attr with a value containing V .
  • The Attribute Starts With a Value Followed by Hyphen
    • [attr|="V"] - Select elements that have attribute attr with an exact value of V or start with V followed by a hyphen (V- ).
    • Example: [role~="dialog"][aria-describedby|="alert-dialog"]
  • The Attribute Value is a Space-Separated List of Words
    • [attr~="V"] - Select elements that have attribute attr for which the value is a space-separated list of words, one of which is the whole word V .
    • Example: [role~="dialog"][aria-describedby|="alert-dialog"]
• Combinators:
  • Child Combinator
    • Example: #main-container-id > div.MuiPaper-root.jss1058.jss1046.MuiPaper-elevation0 > div.MuiTabs-root > div > div > a:nth-child(2)[href="/flows/ordering"]
    • Example: body > div.MuiDrawer-root.jss84.MuiDrawer-modal > div.MuiPaper-root.MuiDrawer-paper.jss85.MuiDrawer-paperAnchorLeft.MuiPaper-elevation16 > div > ul > span:nth-child(1) > a[tabindex="-1"][role="button"][href="/users"]
  • Descendant Combinator
    • Example: div#menu-segment_id li > div
    • Example: div#root button p
    • Example: #main-container-id button > span p
    • Example: id=["main-container-id"] button div

This feature is still in Beta, we highly appreciate you're feedback/input on what we can improve further to make the experience better. If you'd like to send general feedback or suggestions for this feature, please reach out to us at support@userpilot.co