Web Personalization - V2

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:

JavaScript
<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.

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

 

Initiate Web P Module

Add this script to initiate the web personalization module:

JavaScript
<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 app_id is XXXXYYYYZZZZ111122223333,  then the prefetch and initiation code would be:

JavaScript
<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=XXXXYYYYZZZZ111122223333"></script>

Test Environment

For data to be tracked in the test environment, include `debug_logs` in the src of the above script as follows:

JavaScript
<script src="https://cdn.moengage.com/release/{DC}/moe_webSdk_webp.min.latest.js?app_id={app_id}&debug_logs=1"></script>

For example, if the dashboard URL starts with https://dashboard-01.moengage.com, and app_id is XXXXYYYYZZZZ111122223333,  then the whole code will look like:

JavaScript
<script src="https://cdn.moengage.com/release/dc_1/moe_webSdk_webp.min.latest.js?app_id=XXXXYYYYZZZZ111122223333&debug_logs=1"></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

  1. Masking the content of the entire page until the personalization is complete OR
  2. Masking individual elements that have been personalized using the WYSIWYG editor
info

Note

  • Only one of approaches - Option 1 or Option 2 - must be implemented on your website.


Option 1: Masking content of the entire webpage

  1. Add the below code as high on the page as possible, in the <head> of your website code.
  2. 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.
JavaScript
<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,

  1. Add HTML selector of each personalized element on the webpage to the array personalizedSelectors. How to find HTML selectors for personalized elements?
  2. 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.
  3. Add the below code as high on the page as possible, in the <head> section of your website code.
JavaScript
<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. 

JavaScript
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

  1. Right-click on the element.
  2. Select Inspect or Inspect Element in the context menu.
  3. 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.

Screenshot 2024-06-03 at 3.39.42 PM.png

Below is the input to be given to the anti-flicker snippet for the HTML element in consideration

JavaScript
const personalizedSelectors = ['#homepage-title'];

 

 

Option 2: Use the element’s HTML selector path

  1. Right-click on the element.
  2. Select Inspect Elementin the context menu.
  3. In the highlighted HTML, right click and choose Copy Selector in the context menu.

Screenshot 2024-06-03 at 3.41.14 PM.png

Below is the input to be given to the anti-flicker snippet for the HTML element in consideration

JavaScript
const personalizedSelectors = ['#side-container > a > img'];

Previous

Next

Was this article helpful?
1 out of 2 found this helpful

How can we improve this article?