Skip to main content

Design System Components

The design system is the central UI component library for You can find it at Many components have been updated to automatically insert events into Google Analytics for certain interactions. These auto-tracked design system components will cut down on the amount of time VFS and Platform teams spend during implementation. Also, these interactions are automatically visualized on several KPI dashboards in Domo.

Implementation Notes

This document includes dataLayer specifications for these interactions, but rarely should developers manually create these events. The components themselves should handle the process.

This implementation comprises of two main components:

  1. The component itself which creates a CustomEvent indicating the component name, action, and any additional metadata.

  2. An event listener attached to that listens for the custom events and routes them to the dataLayer.

If a component isn’t tracking an interaction or is missing certain parameters, please enter a /support ticket with Platform Analytics & Insights.

Sensitive Form Components

Most design system components are configured to push events automatically when the components are used within the application. However, there are several components that by default do NOT trigger events due to PII or PHI concerns. These components are:

  • TextInput

  • TextArea

  • Select

  • Checkbox

  • CheckboxGroup

  • RadioButton

While these components have been reviewed by the Identity team, it is still the responsibility of the VFS team to conduct a security review before data collection of these components can begin.


Component Name

Where Components are Implemented

Description of Interaction

Data Layer Specification

GA Event


Global event listener for buttons

Click on a button with an appropriate CSS class

'event': 'cta-button-click' //consistently populate for ALL types of button clicks
'button-type' //'primary', 'secondary', 'default'
'button-click-label': //dynamically populate with text of button
'button-background-color': //dynamically populate with the background color of the button`

Event Action:
Primary Button CTA - {{DL - button-click-label}} - {{DL - button-background-color}}


Secondary Button CTA - {{DL - button-click-label}} - {{DL - button-background-color}}



Web component only (NOT CollapsiblePanel.js)

Click to expand/collapse accordions

'event': 'int-accordion-expand', //OR 'int-accordion-collapse'
'accordion-parent-label' //accordion parent label (if there is two labels, if only one label on accordion, populate this value and make child-label undefined)
'accordion-child-label': //dynamically populate with secondary label of the accordion
'accordion-section-label': //populate with the label of the section where the accordion is present`

Event Action:
Accordion - Expand - {{CJ - Accordion Action}}


Accordion - Collapse - {{CJ - Accordion Action}}

Additional Info


Click to expand/collapse additional info component

'event': 'int-additional-info-expand', //OR 'int-additional-info-collapse',
'additional-info-click-label': //dynamically populate with the click label of the expandable component`

Event Action:
Additional Info - Expand - {{DL - additional-info-triggerText}}


Additional Info - Collapse - {{DL - additional-info-triggerText}}

Alert Boxes (deprecated)


Click on a link and/or heading within an alert box or click to close

'event': 'nav-alert-box-link-click' //consistent for all links within an alert box
'alert-box-status': //dynamically populate according to the type of alert box, 'warning', 'error', 'info'
'alert-box-headline': //dynamically populate according to the top level heading of the alert box
'alert-box-headline-level': //dynamically populate with the level of the headline
'alert-box-click-label': //dynamically populate according to the click label of the link
'alert-box-background-only: //dynamically populate with boolean true\|false if alert box background only prop was used
'alert-box-closeable': //dynamically populate with true or false if the component is closeable

Substitute these for close event, use variables above

'event': 'int-alert-box-close' //consistently populate when an alert box is closed

Event Action:
Banner - Alert Box - Link - {{Click Text}}



Click on a breadcrumb link

'event': 'nav-breadcrumb',
'breadcrumb-clickLabel': //dynamically populate according to the breadcrumb label clicked on
'breadcrumb-clickLevel': //level number clicked on
'breadcrumb-totalLevels': //total number of click levels
'breadcrumb-mobile-first-enabled': //boolean for if the mobile first prop is used`

Event Action:
Navigation - Breadcrumb - {{DL - breadcrumb-click-label}} - {{DL - breadcrumb-click-level}} - {{DL - breadcrumb-total-levels}}

Form Controls - Text Box



Input and click away from text box

'event': 'int-text-input-blur' //consistently populate for text box inputs
'text-input-label': //dynamically populate according to the label of the text box
'text-input-value': //dynamically populate with the user input text

Substitute these variables for TextArea.js

'event': 'int-text-area-blur' //consistently populate for text box inputs
'text-area-label': //dynamically populate according to the label of the text area
'text-area-value': //dynamically populate with the user input text

Event Action:
Text Box - {{DL - text-input-label}} - {{DL - text-input-value}}

Form Controls - Select box


Selection and click away from select box

'event': 'int-select-box-option-click' //consistently populate for all select box selections
'select-box-label': //dynamically populate according to the label of the select box presented to the user
'select-box-value': //dynamically populates with the select box value selected
'select-box-required': //dynamically populates with boolean true or false, true if checkbox is required
'select-options': //dynamically populates with the options of the select box

Event Action:
Select Box ~~ {{DL - select-label}} ~~ {{DL - select-selectLabel}}

Form Controls - Checkbox



Select and click away from a checkbox option

'event': 'int-checkbox-option-click',
'checkbox-label': //dynamically populates according to check box label selected
'checkbox-labelAboveCheckbox': //dynamically populates according to label description presented to the user 
'checkbox-required': //dynamically populates with boolean true or false, true if checkbox is required

Substitute these variables for CheckboxGroup.js

'event': 'int-checkbox-group-option-click'
'checkbox-group-optionLabel': //dynamically populates with the label of the selected checkbox
'checkbox-group-label: //dynamically populates with the label of the checkbox group presented to the user
'checkbox-group-required': //dynamically populates with boolean true or false, true if checkboxgroup is required

Event Action:
Checkbox - {{DL - checkbox-label}} - {{DL - checkbox-option-click-label}}

Form Controls - Radio Button


Select and click away from a radio button option

'event': 'int-radio-button-option-click', //consistently populate for all radio button toggles
'radio-button-label': //dynamically populate according to the radio button label for the group presented to the user
'radio-button-optionLabel': //dynamically populate according to the radio button option selected label
'radio-button-required: //dynamically populates with boolean true or false, true if radio button is required

Event Action:
Radio Button - {{DL - radio-button-label}} - {{DL - radio-button-option-click-label}}



Click on a modal button

'event: 'int-modal-click',
'modal-status': this.props.status,
'modal-title': this.props.title,
'modal-primaryButton-text': this.props.primaryButton.text,
'modal-secondaryButton-text': this.props.secondaryButton.text

Event Action:
Modal - Click - {{DL - modal-status}} - {{DL - modal-title}} - {{DL - modal-primaryButtonText}} - {{DL - modal-secondaryButtonText}} - {{Click Text}}



Click to paginate

'event': 'nav-paginate-number' //if number click, 'nav-paginate-previous' if previous click, 'nav-paginate-next' if next click
'paginate-page-number': //dynamically populate according to the number the user navigated to
'maximum-page-list-length': //populate according to the maximum number of pages that can be navigated
'last-page-enabled': //populate if last page enabled prop is used

Event Action:
Navigation - Paginate - Next


Navigation - Paginate - Previous


Navigation - Paginate - Number: {{DL - Paginate Page Number}}

Progress Bars

On state change

'event': 'nav-progress-bar-change', //consistent event name for progress bar change
'progress-bar-type': 'segmented', //dynamic with type of progress bar, in this case 'segmented'
'progress-bar-current': //dynamically populate with an integer with each new change the current
'progress-bar-total': //consistently populate as an integer with the total number of segments
'progress-bar-title': //dynamically populate according to the label on the component
'progress-bar-percentage': 10 //use for standard progress bar, only in increments of 10%`

Event Action:

Promo Banner


Click on a link within the promo banner

'event': 'nav-promo-banner-link-click'
'promo-banner-click-label': //populate according to link click text
'promo-banner-click-target': //populate according to target in component
'promo-banner-click-href': //populate according to click href
'promo-banner-closeable': //populate with true or false based on if promo banner is capable of being closed
'promo-banner-type': //populate according to banner type (icon) in component`

Event Action:
Navigation - Promo Banner - {{DL - promo-banner-type}} - {{DL - promo-banner-href}} - {{DL - promo-banner-target}} - {{DL - promo-banner-text}}

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.