Component Events
As the user interacts with an Array component, the component triggers javascript events that describe the user's actions. To catch these events, you add an event listener that listens for events of type array-event
. The object For example:
window.addEventListener('array-event', function arrayEvent(arrayEvent) {
const {
tagName, // the name of the component that emitted the event
event, // the name of the user's action
metadata = {}, // component-specific data
} = arrayEvent.detail;
console.log("component: " + tagName + "; user action: " + event);
});
The sections below list the events that are triggered by the Array Web Components
All Components
// Triggered when the component first appears but isn't entirely loaded.
{
tagName: "<componentName>",
event: "open",
metadata: {}
}
// Triggered immediately after the component's data has been completely loaded.
{
tagName: "<componentName>",
event: "loaded",
metadata: {}
}
array-account-enroll
WARNING
If you set the
array-account-enroll
component'sshowQuickView
orshowQuickViewPayment
attribute to true, thesignup
JavaScript event isn't triggered.
The array-account-enroll
component embeds the array-authentication-kba component, and is the target of the latter's events.
{
tagName: "array-account-enroll",
event: "signup",
metadata: {
userId: "string",
userToken: "string",
loginDelay: Number
}
}
{
tagName: "array-account-enroll",
event: "click",
metadata: {
section-name: "account-details" | "email-password" | "dob-ssn" | "questions" ,
control-name: "submit",
}
}
array-authentication-kba
{
tagName: "array-authentication-kba",
event: "success",
metadata: {
section-name: "questions",
user-token: "string"
}
}
{
tagName: "array-authentication-kba",
event: "failure" | "error" ,
metadata: {
section-name: "questions"
}
}
array-account-login
{
tagName: 'array-account-login',
event: "login",
metadata: {
userToken: "string",
userId: "string",
}
}
array-account-settings
{
tagName: "array-account-settings",
event: "click",
metadata: {
section-name: "changePassword" | "changeEmail" | "changePhoneNumber",
control-name: "update"
}
}
{
tagName: "array-account-settings",
event: "click",
metadata: {
section-name: "navigation",
control-name: "security" | "personalInformation"
}
}
array-credit-alerts
{
tagName: "array-credit-alerts",
event: "logout",
metadata: {}
}
array-credit-bureau-toggle
{
tagName: "array-credit-bureau-toggle",
event: "bureau-toggle",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
{
tagName: "array-credit-bureau-toggle",
event: "open",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-overview
{
tagName: "array-credit-overview",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-overview",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-overview-mini
The array-credit-overview-mini
component is an abbreviated version of array-credit-overview
. Depending on the customer's enrollment status, it either displays a link to a "Learn More" page (for unenrolled customers) or to the full credit overview page (enrolled customers). When the customer clicks one or the other link, a click
event is generated with the control-name
property set to goto-learn-more-cta
("Learn More" link) or go-to-overview-cta
(credit overview link):
{
tagName: "array-credit-overview-mini",
event: "click",
metadata: {
section-name: "overview-mini",
control-name: "goto-learn-more-cta" | "go-to-overview-cta"
}
}
array-credit-report
{
tagName: "array-credit-report",
event: "loaded",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
{
tagName: "array-credit-report",
event: "click",
metadata: {
section-name: "accounts",
control-name: "creditCards" | "realEstate" | "autoLoans" | "studentLoans" | "other"
}
}
{
tagName: "array-credit-report",
event: "collapsed-section" | "expanded-section",
metadata: {
bureau: "tui" | "exp" | "efx" | "all",
section-name: "credit-cards" | "mortgages" | "student-loans" | "auto-loans" | "other-loans"
}
}
{
tagName: "array-credit-report",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-report",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-score-factors
{
tagName: "array-credit-score-factors",
event: "click",
metadata: {
section-name: "main",
control-name: "main" | "ph" | "dm" | "hi" | "ca" | "ta" | "ccu"
}
}
{
tagName: "array-credit-score-factors",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-score-factors",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-score-simulator
{
tagName: "array-credit-score-simulator",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-score-simulator",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-debt-analysis
{
tagName: "array-credit-debt-analysis",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-debt-analysis",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-identity-protect-insurance
{
tagName: 'array-identity-protect-insurance',
event: "loaded",
metadata: {
section-name: "toggle-ident-protect",
active: true | false
}
}
{
tagName: 'array-identity-protect-insurance',
event: "value-change",
metadata: {
section-name: "toggle-ident-protect",
enable: true | false
}
}
{
tagName: 'array-identity-protect-insurance',
event: "expanded-section",
metadata: {
section-name: "learn-more"
}
}
array-navbar
{
tagName: "array-navbar",
event: "logout",
metadata: {}
}
Updated 18 days ago