Autocapture Raw Events

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.

Important Notes to keep in mind:

The ability to 'Label' Raw Events is ONLY allowed on Growth and Enterprise plans
Changing the configuration/targeting settings of a Labeled Event doesn't affect historical data collected but only will affect later/future evaluation of it
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