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. 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'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",
  }
}

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