admin:online-platform-cms:using-web-ui-custom-events [Aardvark Technologies Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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 [[admin:online-platform-cms:3rd-party-scripts|here]].

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

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

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

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

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

<code>document.body.addEventListener("cmsPageLoaded", function(){
 
});</code>

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

===== Custom event data models: =====

=== Example of user object model in userLogIn, userRegisterInitial, userRegisterComplete events: ===
<code>
{
  "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"
  }
}
</code>

=== Example of user object in userRegisterVerify event: ===
<code>
{
 email: string,
}
</code>

**Or**

<code>
{
 phone: string,
}
</code>

The user object depends on the verification method.

=== Example of user object in routeChange event: ===
<code>
{
 moduleName: 'prematch',
 from: {
  fullPath: string,
  name: string,
 },
 to: {
  fullPath: string,
  name: string,
 }
}
</code>

===== Additional info =====
=== 'routeChange' event info ===

  * 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

<code>
 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);
}
</code>