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={app_id}"></script>

Change the following fields:

  • Replace the 'app_id' in the URL above with the APP ID in the MoEngage Dashboard settings.
    Navigate to Dashboard -> Settings -> App -> General and copy the APP 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.

Install this code only when you notice flicker while running top-of-the-fold experiences.

Steps To Install Anti-flicker Code

  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>
Was this article helpful?
1 out of 1 found this helpful

How can we improve this article?