Configure and Integrate Web Personlization
 

REQUIRED

Mandatory step for 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.

Contact your customer success manager or send an email to support@moengage.com to get Web Personalization enabled for your account.

After Web Personalization is enabled for your account, update the MoEngage web SDK initialization script on your website. 

For more information, refer to Web SDK Integration.

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

1. Trigger Action: Custom Event - You can create campaigns that 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 that are triggered when required without an associated event trigger.

For more information, refer to Create Web Personalization Campaign.

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 a 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 campaign will not be triggered.

The following code enables you to integrate the web personalized campaign:

 

JavaScript
// 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 have 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. });

 

Parameter Description
Moengage.onsite.registerCallback(tagName, callbackFunction) Registers a callback function that will be called from MoEngage SDK whenever the corresponding campaign is triggered.
tagName It should match with the tag name which you configured while creating the campaign
callbackFunction

It receives 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 the optional parameter to pass widget_id to differentiate between the clicks on different widgets of the campaign.
 

IMPORTANT

Ensure that code just after the SDK script.

Do not confuse it to be a function that you can call after any custom event to get the payload data.

For more information about the MoEngage sample code, refer to the sample code.

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.

The following code enables you to integrate the web personalized campaign:

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

});

Reach out to us directly from your MoEngage Dashbaord  > Need Help?  > Contact Support or send an email to support@moengage.com.

Was this article helpful?
0 out of 0 found this helpful