How to Personalize Website Based on User Affinity


As marketers, we want to personalize the website according to user’s affinity and display products that are relevant to the user. This helps improve two key metrics: conversion rate and user satisfaction.

In this article, we will use User Affinity and Web Personalization features of MoEngage to personalize an e-commerce website home page for fitness enthusiasts.

Expected Result

Users will see the personalized web page according to their affinity.





  • Events to track the action of a user searching for products, adding a product to cart or adding a product to wishlist, completing the purchase and each action’s related information such as the platform, product name, category, brand, price. To understand how to track events, refer to the Developer Guide.
  • Integration of the MoEngage Web SDK with your website to create a personalized web experience. For more information, refer to Web Personalization.
  • Ad blockers disabled in the browser. The personalization editor will not load if ad blockers are enabled.

Create a Personalized Experience

In this section, let us create a personalized experience that you would like your users to have have in your website.

Step 1: Target Users

  1. Navigate to the sidebar on the left and click Personalize > All Experiences and click + Experience, or click + Create new > Experience > Web.
    You are taken to the first step "Target users" of defining a personalized experience.
  2. Enter the following details:
    • Experience name: A name for the personalisation you are building. For example, "Dynamic Category Ordering".
    • Experience Tags: Add tags here to later identify this among the other personalized experiences you will be having.
  3. Under Target Audience, click + Add Audience and then click + New Audience to define the target audience.
  4. The Add new audience pop-up is displayed. In the Audience name field, enter a name. For example, "Fitness Freaks".
  5. Select the Filter users by option and click User Affinity tab to define audience based on users affinity.
  6. For this example, we will define our affinity segments as the following:
    • Users who have searched predominantly in Fitness Category
    • Users who have searched predominantly in Formals
    • Users who have searched predominantly in Shorts
  7. Search for the event "Product Searched" and then select Predominantly with Category as Fitness and then click Add. To know more about users affinity segments and the filters, refer here. image-20240120-183254.png
  8. Follow steps 3 to 7 to define the other two possible categories "Formals" and "Shorts". image-20240120-184107.png
  9. Click Next to move to the second step "Content" where you can define the content that will go into your campaign.

Step 2: Content

  1. Clicking Next in the first step "Target users" will display the URL(s) to personalize pop-up. We can use this to define where we would like to show the defined personalization in our website.
  2. Select the Single page option because the Category menu would most likely be in the Home page alone.
  3. In the URL field, enter the URL on which we will do the setup and click Verify SDK setup. This will check if the SDK is installed in the pages.
  4. Click Personalize URL to open our website in the editor.
  5. You are prompted to define the split of users—how many should see the personalized view of this experience.
  6. Click + Variation to add multiple variations if required and define the same.image-20240120-185728.png
  7. Click Personalize for the required variation to open the website in the editor in a new tab.
    Note: You can personalize the content for all variations except the Default variation.
  8. Select any element in the loaded page to edit it. With this, you can perform changes from editing a name to introducing new elements.
  9. After you select the element, the following buttons are displayed:
    Screenshot 2024-01-20 at 6.03.48 PM.png
    Note: This option is available for all variations except the default variation and lets you personalize the content for each variation.
  10. For our case, select the second option to edit the selected element. This will help us edit the HTML and thereby change the order of the list of categories using the HTML code.
    After you are done with editing the HTML code, the list will be something like this:
  11. Click Save & exit at the top right.
    This will close this tab and take you back to the Experience definition page in the MoEngage dashboard.
  12. Do the same for the other audiences as well for two more times.
  13. Click Next to move to the third step "Schedule and goals" where you can define the schedule and goal of your experience.

Step 3: Schedule and Goals

  1. In the Send experience section, select Active continuously and define when to start and end this experience.
  2. In the Conversion goals section, define the conversion goal based on your requirements.
  3. Under Delivery controls, from the Experience Priority drop-down, select a priority. For more information, refer to Create Experience.
  4. Click Publish.


In this use case, we used User Affinity and Web Personalization features of MoEngage to personalize an e-commerce website home page for fitness enthusiasts.

Now that we have published the personalized experience, head to the Analyzing section to understand how your experience is performing.



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

How can we improve this article?