Using web-ui custom events

Currently the web-ui fires the following custom events on different occasions:

• userLogIn (when user logins or creates an account)
• userRegisterVerify (when user provides registration code from email/phone and clicks verify)
• userRegisterInitial (when user provides his details in the registration process and clicks to create account)
• userRegisterComplete (when user adds final required details to his profile, e.g. date of birth, city, age. etc., and clicks to complete registration)
• cmsPageLoaded (when CMS page is fully loaded)

To run your chosen script(s) (e.g. GTM, etc…) after any custom script is fired, we can add these scripts to 3rd party scripts section, documented here.

To catch required event(s), copy appropriate script(s):

document.body.addEventListener("userLogIn", function(e){
 var user = e.detail;
});

document.body.addEventListener("userRegisterVerify", function(e){
  var user = e.detail;
});

document.body.addEventListener("userRegisterInitial", function(e){
  var user = e.detail;
});

document.body.addEventListener("userRegisterComplete", function(e){
  var user = e.detail;
});

document.body.addEventListener("cmsPageLoaded", function(){
 
});

Each of the events provide additional details that could be sent with your chosen scripts. E.g. If you wanted to run GTM script on the userLogIn event, and pass user data, you can achieve this by:

• Copying the userLogIn code block
• In your pasted code block, just after the var user = e.detail, we can paste our GMT script
• In the GMT script we can add user variable

Example of user object model in userLogIn, userRegisterInitial, userRegisterComplete events:

{
  "id": 0,
  "websiteID": 0,
  "email": "string",
  "displayName": "string",
  "emailConfirmed": true,
  "settings": {
    "tz": "Africa/Abidjan",
    "dateFormat": "DD/MM/YYYY",
    "timeFormat": "HH:mm:ss",
    "oddsFormat": "DECIMAL",
    "notifications": true,
    "subscriptions": true,
    "inactivityTimeout": 0,
    "location": {
      "country": "string",
      "region": "string",
      "city": "string",
      "lineOne": "string",
      "lineTwo": "string",
      "postalCode": "string",
      "placeOfBirth": "string",
      "nationality": "string"
    },
    "identification": {
      "idType": "PASSPORT",
      "idCode": "string",
      "type": "passport",
      "gender": "Female",
      "expiration": "2021-03-02"
    },
    "sourceOfIncome": "salary",
    "taxNumber": "string",
    "occupation": "string",
    "bankDetails": {
      "bankAccHolderName": "string",
      "bankAccNumber": "string",
      "bankName": "string",
      "branchName": "string"
    }
  },
  "dateOfBirth": "2021-03-02",
  "excludedUntil": "2021-03-02T13:16:08.683Z",
  "deleted": true,
  "disabled": true,
  "lastLogin": "2021-03-02T13:16:08.683Z",
  "registeredAt": "2021-03-02T13:16:08.683Z",
  "lastDeposit": "2021-03-02T13:16:08.683Z",
  "passwordLastSet": "2021-03-02T13:16:08.683Z",
  "uniqueID": "string",
  "buySlip": true,
  "deposit": true,
  "withdrawal": true,
  "lastWithdrawal": "2021-03-02T13:16:08.683Z",
  "bankDetails": {
    "bankAccHolderName": "string",
    "bankAccNumber": "string",
    "bankName": "string",
    "branchName": "string"
  }
}

Example of user object in userRegisterVerify event:

{
 email: string,
}

Or

{
 phone: string,
}

The user object depends on the verification method.