Differences

This shows you the differences between two versions of the page.

--- admin:online-platform-cms:using-web-ui-custom-events [2021/03/01 09:18] – evaldas-luksys
+++ admin:online-platform-cms:using-web-ui-custom-events [2021/09/27 10:11] – evaldas-luksys
@@ Line 4: / Line 4: @@
   * **userLogIn** (//when user logins or creates an account//)
-  * **userRegisterVerify** (when user provides registration code from email/phone and clicks verify)
+  * **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)
+  * **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)
+  * **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]].
@@ Line 13: / Line 15: @@
 <code>document.body.addEventListener("userLogIn", function(e){
- const user = e.detail;
+ var user = e.detail;
 });</code>
 <code>document.body.addEventListener("userRegisterVerify", function(e){
-  const user = e.detail;
+  var user = e.detail;
 });</code>
 <code>document.body.addEventListener("userRegisterInitial", function(e){
-  const user = e.detail;
+  var user = e.detail;
 });</code>
 <code>document.body.addEventListener("userRegisterComplete", function(e){
-  const user = e.detail;
+  var user = e.detail;
+});</code>
+<code>document.body.addEventListener("cmsPageLoaded", function(){
 });</code>
@@ Line 31: / Line 37: @@
   * Copying the **userLogIn** code block
-  * In your pasted code block, just after the **const user = e.detail**, we can paste our GMT script
+  * 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>