Configure and Integrate Web Personalization

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, and modifying the content shown on any webpage as per the user behavior.

Contact your customer success manager (CSM) or the MoEngage Support team 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. Selecting one of these options depends upon when you want MoEngage to trigger the personalized campaign data to the website.

• 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.
• 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, select the trigger action as Page load or as a custom event and then select an event. This setup is done in Step 1 of the 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 personalized web 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 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 campaign widgets.

Critical

Ensure that code is 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 to define 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 personalized web 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.
});