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

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

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:

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 Dashboard  > Need Help?  > Contact Support or send an email to support@moengage.com.