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
- Examples:
- Nth-child:
- Example:
div.MuiPaper-root.MuiPaper-rounded:nth-child(3)
- Example:
- Attribute Selectors:
- Specific Value
[attr="V"]
- Select elements that have attributeattr
with a specific value ofV
.- Example:
div[role="button"][aria-haspopup="true"][aria-disabled="false"]
- The Attribute Value Starts With
[attr^="V"]
- Select elements that have attributeattr
with a value starting withV
.- Example:
div[tabindex="0"][role="button"][aria-labelledby^="period"]
- The Attribute Value Ends With
[attr$="V"]
- Select elements that have attributeattr
with a value ending inV
.
- The Attribute Value Contains
[attr*="V"]
- Select elements that have attributeattr
with a value containingV
.
- The Attribute Starts With a Value Followed by Hyphen
[attr|="V"]
- Select elements that have attributeattr
with an exact value ofV
or start withV
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 attributeattr
for which the value is a space-separated list of words, one of which is the whole wordV
.- Example:
[role~="dialog"][aria-describedby|="alert-dialog"]
- Specific Value
- 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"]
- Example:
- 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
- Example:
- Child Combinator
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