Contents

Overview

User Interface (UI) events, also called User Interactions, are triggered by the web, iOS and Android apps. 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 and the breakdown per flow, page, and component.

Standard events

Typically, user interaction events are named as follows:

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.

Standard properties

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 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
Event	Properties	Burger King	Popeyes	Firehouse Subs	Notes
Button	Name Path				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				`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	Name Path				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	Name Path
Content Rendered	Name Path
Dropdown	Name Path
Dropdown Item	Name Path
Error	Path Error Code Response Title Response Description Name				`Name` is the English name of the error
Input	Name Path				`Name` for input groups can be combined like "Date of Birth (Year)", "Date of Birth (Month)", etc.
Link	Name Path Destination Path
List Item	Name Type Category Status Path Destination Path Sanity ID Engine ID Reward ID Favorited				`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				`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	Name Path
Number Input	Name Path				`Name` for number inputs need to have a reference of the context they’re in, such as "Whopper (Cart Item)".
Paginate	Name Path				`Name` would be used to provide context, e.g. "Rewards (Tier 1)".
Page View	Name Path Source Path				`Name` would be the name of the page, e.g. "Home", "Sign Up", "Sign In", etc.
Radio Button	Name Path
Segmented Button	Name Path				`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	Name Path
Snackbar	Name Path
Switch	Name Path
Tab	Name Path
Text Area	Name Path