Component Events

Suggest Edits

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. For example:

window.addEventListener('array-event', function arrayEvent(arrayEvent) {
  console.log('event from component...');
  console.log(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;
});

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's showQuickView or showQuickViewPayment attribute to true, the signup 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",
    domain: "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-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-sight

{
  tagName: "array-credit-score-sight",
  event: "logout",
  metadata: {}
}

{
  tagName: "array-credit-score-sight",
  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 about 2 months ago