Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| admin:online-platform-cms:using-web-ui-custom-events [2021/03/01 09:19] – evaldas-luksys | admin:online-platform-cms:using-web-ui-custom-events [Unknown date] (current) – external edit (Unknown date) 127.0.0.1 | ||
|---|---|---|---|
| Line 7: | Line 7: | ||
| * **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: | 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: | ||
| Line 13: | Line 15: | ||
| < | < | ||
| - | const user = e.detail; | + | var user = e.detail; |
| });</ | });</ | ||
| < | < | ||
| - | | + | |
| });</ | });</ | ||
| < | < | ||
| - | | + | |
| });</ | });</ | ||
| < | < | ||
| - | | + | |
| + | });</ | ||
| + | |||
| + | < | ||
| + | |||
| });</ | });</ | ||
| Line 31: | Line 37: | ||
| * Copying the **userLogIn** code block | * 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 | * In the GMT script we can add **user** variable | ||
| + | |||
| + | ===== Custom event data models: ===== | ||
| + | |||
| + | === Example of user object model in userLogIn, userRegisterInitial, | ||
| + | < | ||
| + | { | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | }, | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | === Example of user object in userRegisterVerify event: === | ||
| + | < | ||
| + | { | ||
| + | | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | **Or** | ||
| + | |||
| + | < | ||
| + | { | ||
| + | | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | The user object depends on the verification method. | ||
| + | |||
| + | === Example of user object in routeChange event: === | ||
| + | < | ||
| + | { | ||
| + | | ||
| + | from: { | ||
| + | fullPath: string, | ||
| + | name: string, | ||
| + | }, | ||
| + | to: { | ||
| + | fullPath: string, | ||
| + | name: string, | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | ===== Additional 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 ' | ||
| + | * This event allows custom script to stop the route change in the app by adding ' | ||
| + | * Each game has it's own module names, so Roulette page will fire ' | ||
| + | * Games with nested URLs will have the same moduleName, but different names under the ' | ||
| + | |||
| + | Script example and what it does: | ||
| + | * When user visits a page betgames-iframe, | ||
| + | * Script catches this event and prevents the route from changing for this particular ' | ||
| + | * 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 | ||
| + | |||
| + | < | ||
| + | | ||
| + | var isDataFreeWebsite = window.location.origin.includes(' | ||
| + | |||
| + | if (!isDataFreeWebsite) { | ||
| + | | ||
| + | } | ||
| + | |||
| + | if (routeChangeEvent.detail.moduleName === ' | ||
| + | // 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) | ||
| + | | ||
| + | | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | function displayBetGamesModal(to, | ||
| + | var modalElement = document.createElement(' | ||
| + | modalElement.setAttribute(' | ||
| + | modalElement.style.position = ' | ||
| + | modalElement.style.top = ' | ||
| + | modalElement.style.bottom = ' | ||
| + | modalElement.style.left = ' | ||
| + | modalElement.style.right = ' | ||
| + | modalElement.style.margin = '0 auto'; | ||
| + | modalElement.style.background = ' | ||
| + | modalElement.style.zIndex = ' | ||
| + | |||
| + | var modalTitle = document.createElement(' | ||
| + | modalTitle.innerHTML = 'Data free modal'; | ||
| + | modalTitle.style.color = '# | ||
| + | |||
| + | var modalContinueButton = document.createElement(' | ||
| + | modalContinueButton.innerHTML = ' | ||
| + | modalContinueButton.addEventListener(' | ||
| + | const paidDataUrl = window.location.origin.replace(' | ||
| + | window.location.href = paidDataUrl; | ||
| + | }); | ||
| + | |||
| + | var modalGoBackButton = document.createElement(' | ||
| + | modalGoBackButton.innerHTML = 'Go Back'; | ||
| + | modalGoBackButton.addEventListener(' | ||
| + | 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, | ||
| + | if (!from.name) { | ||
| + | window.location.href = ' | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | modalElement.appendChild(modalTitle); | ||
| + | modalElement.appendChild(modalContinueButton); | ||
| + | modalElement.appendChild(modalGoBackButton); | ||
| + | document.body.appendChild(modalElement); | ||
| + | } | ||
| + | </ | ||
| + | |||