...
User Interface (UI) events, also called User Interactions, are triggered by the web, iOS and Android apps. They correspond to, in In most cases, they correspond to interactive UI components or patterns that are visible in the application. These allow us to:
Keep the list of events limited and intuitive.
Create micro funnels based on component-to-component interaction.
Quantify the application's overall error rate of the application and also the breakdown per flow, page, and component.
...
Typically, user interaction events are named as follows:
...
Bottom Sheet
...
Button | The user clicks/taps on a button. |
Card | The user clicks/taps on a card. |
Checkbox | The user checks/unchecks a checkbox. |
Chip | The user clicks/taps on a chip. |
Content Rendered | A module or content is displayed to the user. |
Dropdown | The user clicks/taps on a dropdown. |
Dropdown Item | The user clicks/taps on a dropdown item. |
Error | An error is triggered after a user action. |
Input | The input field gets focused. |
Link | The user clicks/taps on a link. |
List Item | The user clicks/taps on an item in a list. |
Modal | A modal is displayed to the user. |
Navigation | The user clicks/taps on a navigation item. |
Number Input | The user clicks/taps on one of the interactive elements of the number input component: the minus button, the plus button, or the number field. |
Paginate | The user clicks/taps on the pagination button. |
Page View | The user lands on a page (URL). |
Radio Button | The user clicks/taps on a radio button. |
Segmented Button | The user clicks/taps on a segmented button. |
Sheet | A sheet is displayed to the user. |
Snackbar | A snackbar is displayed after a user action. |
Switch | The user clicks/taps on a switch. |
Tab | The user clicks/taps on a tab. |
Text Area | The text area gets focused. |
...
See Attributes and properties to understand what event properties are. User interaction events typically contain the following standard properties:
Name (All events ) | While the event defines the component, e.g. Button , the name property specifies which button, e.g. Save |
Path (All events ) | The path URL after the domain, e.g. / (home), /menu , /store-locator/service-mode , etc. |
Type (Card and List Item ) | Exclusive propertyExclusive for lists to help better differentiate content like different reward cards by tier, or pages where we might have offers mixed with rewards. |
...
Category (Card and List Item ) | If Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then would be "All Offers", "External Offers", etc. |
Status (Card and List Item ) | It can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example. |
Destination Path (Card , List Item , and Link ) | The path URL where clicking/tapping the component will lead the user. |
Sanity ID (Card and List Item ) | Relates to the ID of the content in Sanity. |
Engine ID (Card and List Item ) | Relates to the ID of the recommendations engine if there's one. |
Reward ID (Card and List Item ) | Only applicable to Rewards Card types. |
Favorited (Card and List Item ) | It is to determine if the user interacted with a product that he had previously favorited, values should be “Yes” or “No”. |
Error Code (Error ) | The alphanumeric code of an error. It specifies the error cause. |
Response Title (Error and Modal ) | The title of an error or modal that is displayed to the user. |
Response Description (Error and Modal ) | The description of an error or modal that is displayed to the user. |
Source Path (Page View ) | The path URL of the page from which the user came. |
Events Catalog
Event | Properties | Component | Notes |
---|
Burger King | Popeyes | Firehouse Subs |
---|
Button | | Image Added Image Added | Image Added Image Added | Image Added Image Added | Icon buttons should have the Name as the action they perform, e.g. "Favorite". |
---|
Card | Name Type Category Status Path Destination Path Sanity ID Engine ID Reward ID Favorited
| Image Added | Image Added | Image Added | Type can be used to specify the card, e.g. "Rewards", “Marketing Tile”, “Upsell”, etc.
Category if Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then Category would be "All Offers", "External Offers", etc.
Status can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example.
Engine ID relates to the ID of the recommendations engine if there's one.
Reward ID is only applicable to Rewards Card types.
Favorited is to determine if the user interacted with a product that he had previously favorited, values should be “Yes” or “No”.
Not all Card types will have Category , Status , Engine ID or Reward ID , in those cases the values for these properties should be "NA". |
---|
Checkbox | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | If there isn’t a clear short label that can used as the Name property, it must be created one that summarizes the interaction, e.g. “Terms Agreement”. |
---|
Chip | | Image Added | Image Added | Image Added | |
---|
Content Rendered | | | | | |
---|
Dropdown | | Image Added | Image Added | Image Added | |
---|
Dropdown Item | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | |
---|
Error | Path Error Code Response Title Response Description
| Image AddedImage AddedImage AddedImage Added | Image AddedImage AddedImage AddedImage Added | Image AddedImage AddedImage AddedImage Added | |
---|
Input | | Image AddedImage AddedImage Added | Image AddedImage AddedImage Added | Image AddedImage AddedImage Added | Name for input groups can be combined like "Date of Birth (Year)", "Date of Birth (Month)", etc.
|
---|
Link | | Image Added | Image Added | Image Added | |
---|
List Item | Name Type Category Status Path Destination Path Sanity ID Engine ID Reward ID Favorited
| Image Added | Image Added | Image Added | Type can be used to specify the list item, e.g. "Menu", or "Offer".
Category if Rewards relates to the tier the reward belongs to, e.g. "100", "200", "300", etc, if Offers then Category would be "All Offers", "External Offers", etc.
Status can used to determine if a Reward is “Locked” or “Unlocked”, or if an Offer is “Coming Soon” for example.
Engine ID relates to the ID of the recommendations engine if there's one.
Reward ID is only applicable to Rewards List Item types.
Favorited is to determine if the user interacted with a product that he had previously favorited, values should “Yes” or “No”.
Not all List Item types will have Category , Status , Engine ID or Reward ID , in those cases the values for these properties should be "NA". |
---|
Modal | Name Path Response Title Response Description
| Image Added | Image Added | Image Added | Name would be the short name (in english) of the modal such as “Cancel Order”.
Response Title is the actual title of the modal, this is a dynamic text as it's going to vary by market and by language.
Response Description is the actual secondary copy of the modal, this is a dynamic text as it's going to vary by market and by language.
|
---|
Navigation | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | |
---|
Number Input | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | Name for number inputs need to have a reference of the context they’re in, such as "Whopper (Cart Item)".
|
---|
Paginate | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | Name would be used to provide context, e.g. "Rewards (Tier 1)".
|
---|
Page View | | Image Added Image Added Image Added | Image Added Image Added Image Added | Image Added Image Added Image Added | Name would be the name of the page, e.g. "Home", "Sign Up", "Sign In", etc.
|
---|
Radio Button | | Image Added | Image Added | Image Added | |
---|
Segmented Button | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | Name for segmented buttons that have a group label can have the group label and the button label combined such as “Donate (£0.00)”, “Donate (£0.50)”, etc.
|
---|
Sheet | | Image Added | Image Added | Image Added | |
---|
Snackbar | | Image Added | Image Added | Image Added | |
---|
Switch | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | |
---|
Tab | | Image Added | Image Added | Image Added | |
---|
Text Area | | Image AddedImage Added | Image AddedImage Added | Image AddedImage Added | |
---|
Pages' events and properties
Note |
---|
This section is a work in progress. We are currently re-structuring the client-side event documentation to make it clearer and more complete |
...