Versions Compared

Old Version 3

changes.mady.by.user Hainzenreder, Diego

Saved on

compared with

New Version Current

changes.mady.by.user Rodrigues da Silva, Manuel

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

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:

Label

Name (All events)

While the event defines the component, e.g. Button, the

label

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

  • Name

  • Path

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".

Name action should always be fixed in English.

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

  • Name

  • Path

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

  • Name

  • Path

Image AddedImage AddedImage Added

Content Rendered

  • Name

  • Path

Dropdown

  • Name

  • Path

Image AddedImage AddedImage Added

Dropdown Item

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage Added

Error

  • Path

  • Error Code

  • Response Title

  • Response Description

  • Name

Image AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage Added

Image AddedImage AddedImage AddedImage Added

Name is the English name of the error

Input

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage AddedImage Added

Name for input groups can be combined like "Date of Birth (Year)", "Date of Birth (Month)", etc.

Link

  • Name

  • Path

  • Destination Path

Image AddedImage AddedImage 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 AddedImage 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

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage Added

Number Input

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage Added

Name for number inputs need to have a reference of the context they’re in, such as "Whopper (Cart Item)".

Paginate

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage Added

Name would be used to provide context, e.g. "Rewards (Tier 1)".

Page View

  • Name

  • Path

  • Source Path

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

  • Name

  • Path

Image AddedImage AddedImage Added

Segmented Button

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage 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

  • Name

  • Path

Image Added

Image Added

Image Added

Snackbar

  • Name

  • Path

Image AddedImage AddedImage Added

Switch

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage AddedImage Added

Tab

  • Name

  • Path

Image AddedImage AddedImage Added

Text Area

  • Name

  • Path

Image AddedImage AddedImage AddedImage AddedImage 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

...