Component Events

Array Events and metadata

How to use

Track events:

window.addEventListener('array-event', function arrayEvent(arrayEvent) {
  console.log('event from component...');
  console.log(arrayEvent);
  const {
    tagName, // name of component which produced the event
    event, // event name
    metadata = {}, // event extra parameters
  } = arrayEvent.detail;
});

Components

Every componenent emits open and loaded events

The open event is fired either right after or before first paint, usually the appearance of a loading screen

{
  tagName: String,
  event: "open",
  metadata: {}
}

The loaded event occurs right after all of the data is presented to the user

{
  tagName: String,
  event: "loaded",
  metadata: {}
}

Bureau Toggle

{
  tagName: "array-credit-bureau-toggle",
  event: "bureau-toggle",
  metadata: {
    bureau: "tui" | "exp" | "efx" | "all"
  },
  bureau: "tui" | "exp" | "efx" | "all"
}
{
  tagName: "array-credit-bureau-toggle",
  event: "open",
  metadata: {
    bureau: "tui" | "exp" | "efx" | "all"
  },
  bureau: "tui" | "exp" | "efx" | "all"
}

Credit Alerts

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

Credit Overview

{
  tagName: "array-credit-overview",
  event: "logout",
  metadata: {}
}
{
  tagName: "array-credit-overview",
  event: "error",
  metadata: {
    message: String,
    bureau: "tui" | "exp" | "efx" | "all"
  }
}

Credit Report

{
  tagName: "array-credit-report",
  event: "logout",
  metadata: {}
}
{
  tagName: "array-credit-report",
  event: "error",
  metadata: {
    message: String,
    bureau: "tui" | "exp" | "efx" | "all"
  }
}
{
  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"
  }
}

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

Identity Protect Insurance

{
  tagName: 'array-identity-protect-insurance',
  event: "value-change",
  metadata: {
    "section-name": "toggle-ident-protect",
    enable: Boolean
  }
}
{
  tagName: 'array-identity-protect-insurance',
  event: "expanded-section",
  metadata: {
    "section-name": "learn-more"
  }
}
{
  tagName: 'array-identity-protect-insurance',
  event: "loaded",
  metadata: {
    "section-name": "toggle-ident-protect",
    active: Boolean
  }
}

Account Login

{
  tagName: 'array-account-login',
  event: "login",
  metadata: {
    userToken: String,
    userId: String,
    domain: String
  },
  userToken: String,
  clientKey: String,
  domain: String
}

Navigation

{
  tagName: "array-navbar",
  event: "logout",
  metadata: {}
}

Credit Score Factors

{
  tagName: "array-credit-score-factors",
  event: "logout",
  metadata: {}
}
{
  tagName: "array-credit-score-factors",
  event: "error",
  metadata: {
    message: String,
    bureau: "tui" | "exp" | "efx" | "all"
  }
}
{
  tagName: "array-credit-score-factors",
  event: "click",
  metadata: {
    "section-name": "main",
    "control-name": "main" | "ph" | "dm" | "hi" | "ca" | "ta" | "ccu"
  }
}

Credit ScoreSight

{
  tagName: "array-credit-score-sight",
  event: "logout",
  metadata: {}
}
{
  tagName: "array-credit-score-sight",
  event: "error",
  metadata: {
    message: String,
    bureau: "tui" | "exp" | "efx" | "all"
  }
}

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

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

Account Enroll

WARNING

If you set the array-account-enroll component's showQuickView or showQuickViewPayment attribute to true, the signup JavaScript event isn't posted.

{
  tagName: "array-account-enroll",
  event: "signup",
  metadata: {
    userId: String,
    userToken: String,
    loginDelay: Number
  },
  clientKey: String,
  userToken: String,
  loginDelay: Number
}
{
  tagName: "array-account-enroll",
  event: "click",
  metadata: {
    "section-name": "account-details" | "email-password" | "dob-ssn" | "questions" ,
    "control-name": "submit",
  }
}
{
  tagName: "array-account-enroll",
  event: "success" | "failure" | "error" ,
  metadata: {
    "section-name": "questions",
  }
}