MoEngage's Web Personalization allows you to personalize the website experience for every visitor with limited or no involvement from tech teams. Ensure that you have followed the SDK integration doc and that the SDK is working properly.
Prefetch the MoE domain
Add the following code snippet at the top of the <head> to prefetch the moengage.com domain:
<link rel="preconnect" href="https://cdn.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://cdn.moengage.com/" />
<link rel="preconnect" href="https://sdk-0X.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://sdk-0X.moengage.com/" />
The 'X' in the API Endpoint URL refers to the MoEngage data center (DC). MoEngage hosts each customer in a different DC. You can find your DC number (value of X) and replace the value of 'X' in the URL by referring to the DC and API endpoint mapping here.
Method 1: Initiate Web P Module
The following table contains the details of the different data centers mapped to the dashboard hosts and is required for integration.
| Data Center | Dashboard host |
|---|---|
|
dc_1 |
dashboard-01.moengage.com |
|
dc_2 |
dashboard-02.moengage.com |
|
dc_3 |
dashboard-03.moengage.com |
|
dc_4 |
dashboard-04.moengage.com |
|
dc_6 |
dashboard-06.moengage.com |
Production or LIVE Environment
Add this script to initiate the web personalization module:
<script src="https://cdn.moengage.com/release/{DC}/versions/{sdkVersion}/moe_webSdk_webp.min.latest.js?app_id={workspace_id}"></script>Change the following fields:
- Replace the 'workspace_id' in the URL above with the Workspace ID in the MoEngage Dashboard settings.
Navigate to Dashboard -> Settings -> App -> General and copy the Workspace ID. - Replace '{DC}' in the URL above with the data center your instance is hosted on. MoEngage hosts each customer in a different data center. Tracked data is stored in the default data center of MoEngage. To find your data center mapping, refer to Data Center Mapping. The possible value is dc_X where 'X' is your data center number.
- Replace '{sdkVersion}' in the URL above with the version of Web SDK that you are using. In case you are using NPM, use the version number of @moengage/web-sdk dependency that is in your package.json file.
For example, if the dashboard URL starts with https://dashboard-01.moengage.com, your current version of Web SDK is 2, and workspace_id is XXXXXXXXXXXXXXXX, then the prefetch and initiation code would be:
<link rel="preconnect" href="https://cdn.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://cdn.moengage.com/" />
<link rel="preconnect" href="https://sdk-01.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://sdk-01.moengage.com/" />
<script src="https://cdn.moengage.com/release/dc_1/versions/2/moe_webSdk_webp.min.latest.js?app_id=XXXXXXXXXXXXXXXX"></script>
| warning |
Warning Always update the version in the web personalisation cdn link whenever you change the version of Web SDK. Both this link and the Web SDK should have the exact same version every time for proper functioning of Web Personalisation. |
Test Environment
For data to be tracked in the test environment, include `debug_logs` in the src of the above script as follows:
<script src="https://cdn.moengage.com/release/{DC}/versions/{sdkVersion}/moe_webSdk_webp.min.latest.js?app_id={workspace_id}&debug_logs=1"></script>For example, if the dashboard URL starts with https://dashboard-01.moengage.com, your current version of Web SDK is 2, and workspace_id is XXXXXXXXXXXXXXXX, then the whole code will look like:
<script src="https://cdn.moengage.com/release/dc_1/versions/2/moe_webSdk_webp.min.latest.js?app_id=XXXXXXXXXXXXXXXX&debug_logs=1"></script>Method 2: If you have passed the useLatest: true flag in NPM initialisation config
In this case, Add this script to initiate the web personalization module:
<script src="https://cdn.moengage.com/release/{DC}/moe_webSdk_webp.min.latest.js?app_id={workspace_id}"></script>Change the following fields:
- Replace the 'workspace_id' in the URL above with the Workspace ID in the MoEngage Dashboard settings.
Navigate to Dashboard -> Settings -> App -> General and copy the Workspace ID. - Replace '{DC}' in the URL above with the data center your instance is hosted on. MoEngage hosts each customer in a different data center. Tracked data is stored in the default data center of MoEngage. To find your data center mapping, refer to Data Center Mapping. The possible value is dc_X where 'X' is your data center number.
For example, if the dashboard URL starts with https://dashboard-01.moengage.com, and workspace_id is XXXXXXXXXXXXXXXX, then the prefetch and initiation code would be:
<link rel="preconnect" href="https://cdn.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://cdn.moengage.com/" />
<link rel="preconnect" href="https://sdk-01.moengage.com/" crossorigin />
<link rel="dns-prefetch" href="https://sdk-01.moengage.com/" />
<script src="https://cdn.moengage.com/release/dc_1/moe_webSdk_webp.min.latest.js?app_id=XXXXXXXXXXXXXXXX"></script>Cache Data Refresh
Web Personalization data will be fetched and stored in the browser cache. The data will be synced again on the Next Page Load only if it meets any of the below conditions:
- 15 minutes have passed since the last data fetch
- Login or Logout is executed
Web Personalization Anti-Flicker Code
The Anti-Flicker snippet is a small piece of code that helps to maintain the user experience on your website when running a web personalisation experience. Know more about Flicker
Page flickering is a problem that only occurs with experiments on a web page in areas that are visible when the page initially loads. There are certain cases where page flickering may not be an issue, such as experiments occurring below the visible area or experiments that occur after a visitor performs a specific action, such as triggering a Recently Viewed or Added to Cart product grids. In such scenarios, generally, the anti-flicker code need not be added to the website.
Steps To Install Anti-flicker Code
To prevent page-flickering, there are 2 options
- Masking the content of the entire page until the personalization is complete OR
- Masking individual elements that have been personalized using the WYSIWYG editor
Option 1: Masking content of the entire webpage
- Add the below code as high on the page as possible, in the <head> of your website code.
- In the script below, MAX_RENDER_TIME refers to the wait time (in milliseconds) before the visitor is shown the original website in case the personalized experience fails to load. You can update this value based on your website performance needs.
<script>
var moe_s = '.moe-anti-flicker-style { opacity:0 !important;filter:alpha(opacity=0) !important;background:none!important;} ';
(function (a, s, y, n, c, h, i, d, e) { h = (typeof h !== 'undefined') ? h : {}; var el = document.createElement('style'); el.type = 'text/css'; el.styleSheet ? (el.styleSheet.cssText = moe_s) : el.appendChild(document.createTextNode(moe_s)); document.getElementsByTagName("head")[0].appendChild(el); s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function () { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function () { i(); h.end = null }, c); h.timeout = c;})(window, document.documentElement, 'moe-anti-flicker-style', 'dataLayer', MAX_RENDER_TIME = 1500);
</script>Option 2: Masking individual elements on the webpage
This method will only mask specific elements on the webpage that have been personalized. In the script below,
- Add HTML selector of each personalized element on the webpage to the array personalizedSelectors. How to find HTML selectors for personalized elements?
- maxRenderTime refers to the wait time (in milliseconds) before the visitor is shown the original website in case the personalized experience fails to load. You can update this value based on your website performance needs.
- Add the below code as high on the page as possible, in the <head> section of your website code.
<script>
(function () { const personalizedSelectors = []; const maxRenderTime = 3000; let elements = []; const retryElements = {}; let retryCount = 0 let retryInterval; if (!personalizedSelectors.length) { elements.push(document.documentElement); } function moeAntiFlickerFunction(selectorElements) { if (!selectorElements.length) { clearInterval(retryInterval); } else { selectorElements.forEach((el) => { const selectors = document.querySelectorAll(el); if (selectors.length > 0) { elements.push(...selectors); delete retryElements[el]; } else { retryElements[el] = false; } }); } addAntiFlickerScript(window, elements); elements = []; } moeAntiFlickerFunction(personalizedSelectors); if (Object.keys(retryElements).length) { retryInterval = setInterval(() => { moeAntiFlickerFunction(Object.keys(retryElements)); retryCount += 1; if (retryCount > maxRenderTime / 50) { clearInterval(retryInterval); } }, 50) } function addAntiFlickerScript(window, elements) { let moe_s = '.moe-anti-flicker-hide { opacity: 0 !important; filter: blur(10px) !important} .moe-anti-flicker-show { opacity: 1 !important; filter: blur(0px) !important;transition: opacity 0.5s, filter 0.5s !important; } '; (function (a, s, y, n, c, h, i, d, e) { h = (typeof h !== 'undefined') ? h : {}; if (!document.getElementById('moe-flicker-style')) { var el = document.createElement('style'); el.id = 'moe-flicker-style'; el.type = 'text/css'; el.styleSheet ? (el.styleSheet.cssText = moe_s) : el.appendChild(document.createTextNode(moe_s)); document.getElementsByTagName("head")[0].appendChild(el); }; s.forEach(el => el.classList += ' ' + y); h.start = 1 * new Date; h.end = i = function () { s.forEach(el => { el.classList.remove('moe-anti-flicker-hide'); el.classList.add('moe-anti-flicker-show'); }) }; (a[n] = a[n] || []).hide = h; setTimeout(function () { i(); h.end = null }, c); h.timeout = c; })(window, elements, 'moe-anti-flicker-hide', 'dataLayer', maxRenderTime); } })();
</script>
An example of multiple elements personalized on a webpage is shown below for reference.
const personalizedSelectors = ['#homepage-title', '#homepage-subtitle', '#homepage-cta', '#homepage-cta-link', '#homepage-banner'];
There are 2 ways to find the HTML selector that has been personalized.
Option 1: Use the element’s HTML ID
- Right-click on the element.
- Select Inspect or Inspect Element in the context menu.
- In the highlighted HTML, find the HTML ID for that element. This is how the input would look like for the element highlighted in the image.
Below is the input to be given to the anti-flicker snippet for the HTML element in consideration
const personalizedSelectors = ['#homepage-title'];
Option 2: Use the element’s HTML selector path
- Right-click on the element.
- Select Inspect Elementin the context menu.
- In the highlighted HTML, right click and choose Copy Selector in the context menu.
Below is the input to be given to the anti-flicker snippet for the HTML element in consideration
const personalizedSelectors = ['#side-container > a > img'];