Web Personalization

Web Personalization is used to personalize the website experience for each user. A few popular use cases for Web Personalization include the home page banner personalization basis user behavior, localizing the website content basis user geography, testing the performance of new page layouts for improved performance, modifying the content shown on any webpage as per the user behavior.

Please reach out to your customer success manager or send us a note at [email protected] to get Web Personalization enabled for your account.

Once Web Personalization is enabled for your account, you would also need to update the MoEngage web SDK initialization script on your website. The updated script is available on the SDK Integration page.

While using MoEngage web personalization, there are two integration options available. Selection of one of these options depend upon when you want MoEngage to trigger the personalized campaign data to the website.

  1. Trigger Action: Custom Event - You can create campaigns which are triggered on custom events that are being tracked from the website. Once the trigger event is performed by the user, the data will be fetched by MoEngage automatically. You can then consume this data as required.

  2. Trigger Action: Self Handled - You can also create campaigns which are triggered when required without an associated event trigger.

Trigger Action: Custom Event

To fetch the personalized campaign data automatically from MoEngage when your users perform an event, you need to select the trigger action as Page load or as custom event and then select an event. This setup is done on Step-1 of Web Personalization campaign creation. Please note that the custom event should be tracked on the website else the cammpaign will not be triggered.

Below are the integration steps -

// This code should be written just after moengage initialization script.
Moengage.onsite.registerCallback(tagName, function (err, data) {
  if (err) {
    // Handle error case here
    // We could get error for various reasons, like
    // network issues, campaigns not present for a particular tag
    return console.error('Error from moengage:', err);
  }
  console.log('Data for campaign:', data);
  
  var payload = data.payload; // Campaign payload defined during campaign creation
  
  var impTracker = data.imp; // Function, you can call impTracker() to send impression stats for a campaign back to MoEngage. Call this after you've successfully rendered the HTML as per the payload provided.
  
 var clickTracker = data.click({widget_id:"sample_widget_id"}); // Function, you can call clickTracker() to send click stats for a campaign back to MoEngage. Call this when the user clicks on the desired section of the website. Passing widget_id is not mandatory and should only be used in case you want to differentiate the clicks between 2 different widgets of the Web Personalization Campaign.

});

Moengage.onsite.registerCallback(tagName, callbackFunction) registers a callback function which will be called from Moengage SDK when ever the corresponding campaign is triggered.

tagName: It should match with the tag name which you configured while creating the campaign
callbackFunction: It receives two things: error and data.
data contains the following:

  1. payload (personalized JSON data which you configured while creating the campaign)
  2. imp - impression tracker callback function.
  3. click - click tracker callback function, with optional parameter to pass widget_id to differentiate between the clicks on different widgets of the campaign.

Make sure you write this code just after the SDK script.
Do not confuse it to be a function which you can call after any custom event to get the payload data.

Please refer to the sample code to get started

Trigger Action: Self Handled

Use this option if you want to define yourself when to fetch the personalized campaign data from MoEngage instead of when the user performs an event. You need to select the trigger action as "Self Handled" in this case. This does not need any event to be tracked by you as you can directly call the MoEngage function to fetch data when required.

Below are the integration steps that you need to follow -

Moengage.onsite.getData(tagName, function (err, data) {
  if (err) {
    // Handle error case here
    // We could get error from various reasons, like
    // network issues, campaigns not present for a particular tag
    return console.error('Error from moengage:', err);
  }
  console.log('Data for campaign:', data);
  
  var payload = data.payload; // Campaign payload defined during campaign creation
  
  var impTracker = data.imp; // Function, you can call impTracker() to send impression stats for a campaign back to MoEngage. Call this after you've successfully rendered the HTML as per the payload provided.
  
  var clickTracker = data.click({widget_id:"sample_widget_id"}); // Function, you can call clickTracker() to send click stats for a campaign back to MoEngage. Call this when the user clicks on the desired section of the website. Passing widget_id is not mandatory and should only be used in case you want to differentiate the clicks between 2 different widgets of the Web Personalization Campaign.

});