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)
• routeChange (runs before each route change)

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

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

{
 email: string,
}

Or

{
 phone: string,
}

The user object depends on the verification method.

{
 moduleName: 'prematch',
 from: {
  fullPath: string,
  name: string,
 },
 to: {
  fullPath: string,
  name: string,
 }
}

• routeChange fires this event before every route change, so we can react to changed routes with our custom script(s) added via Admin CMS section.
• Use 'name' field from 'from' or 'to' objects preferably, as fullPath is url, which is more likely to change in the future, compared to names.
• This event allows custom script to stop the route change in the app by adding 'Event.preventDefault()' in the event's listener.
• Each game has it's own module names, so Roulette page will fire 'roulette' and Dogs page 'dogs' modaleNames.
• Games with nested URLs will have the same moduleName, but different names under the 'from' and 'to' objects.

Script example and what it does:

• When user visits a page betgames-iframe, the app fires 'routeChange' event, with the moduleName 'betgames-iframe'
• Script catches this event and prevents the route from changing for this particular 'betgames-iframe' module, so user stays on the same route
• User is shown a modal, with two buttons, 1 - Continue, 2 - Go back
• Continue button redirects user to another page (script builds custom URL)
• Go back button will hide the popup and the user stays on the same route

 document.addEventListener("routeChange", routeChangeEvent => {
   var isDataFreeWebsite = window.location.origin.includes('datafree');

   if (!isDataFreeWebsite) {
     return;
   }

   if (routeChangeEvent.detail.moduleName === 'betgames-iframe') {
       // preventDefault prevents the route from updating, so the user cannot access this page normally as he would. In this case
       // we provide our custom solution to guide user when he tries to visit this module (page)
       routeChangeEvent.preventDefault();
       displayBetGamesModal(routeChangeEvent.detail.to, routeChangeEvent.detail.from);
   }
});

function displayBetGamesModal(to, from) {
  var modalElement = document.createElement('div');
  modalElement.setAttribute('id', 'dataFreeModal');
  modalElement.style.position = 'absolute';
  modalElement.style.top = '0';
  modalElement.style.bottom = '0';
  modalElement.style.left = '0';
  modalElement.style.right = '0';
  modalElement.style.margin = '0 auto';
  modalElement.style.background = 'rgba(255,255,255,05)';
  modalElement.style.zIndex = '10000';

  var modalTitle = document.createElement('h2');
  modalTitle.innerHTML = 'Data free modal';
  modalTitle.style.color = '#000';

  var modalContinueButton = document.createElement('button');
  modalContinueButton.innerHTML = 'Continue';
  modalContinueButton.addEventListener('click', function() {
    const paidDataUrl = window.location.origin.replace('datafree.co', 'bet' + to.fullPath);
    window.location.href = paidDataUrl;
  });

  var modalGoBackButton = document.createElement('button');
  modalGoBackButton.innerHTML = 'Go Back';
  modalGoBackButton.addEventListener('click', function() {
    modalElement.remove();

    // If name is not set, it means that client came straight to this page through the browsers address section, so this is an exception and 
    // should be handled differently, since after removing the modal, user will see blank page.
    if (!from.name) {
      window.location.href = 'https://bettingworld.datafree.co/';
    }
  });

  modalElement.appendChild(modalTitle);
  modalElement.appendChild(modalContinueButton);
  modalElement.appendChild(modalGoBackButton);
  document.body.appendChild(modalElement);
}