Back to all Usecases
How to Show Recently Viewed Products on Website

Introduction

In today's competitive landscape, the ability to recommend products or services precisely tailored to the customers' needs and preferences based on their current browsing behavior is a powerful tool. Displaying recently-viewed products on a website is important for numerous advantageous reasons:

  • Recollection: It helps users remember the products they have shown interest in. People may browse numerous items before making a purchasing decision, and may easily forget the products they previously viewed. A recently viewed section aids in jogging their memory.
  • Convenience: It saves customers time because they don't need to search the whole website again to find a product they were previously interested in. It makes the customer journey more convenient.
  • Personalized User Experience: Displaying recently-viewed products provides a personalized shopping experience. It shows that the platform is paying attention to the user's interests.
  • Increase in Sales: Products recently viewed, but not purchased immediately, can indicate a hesitance or indecision on the customer's part. Reminding them of their incomplete purchase may prompt a decision, leading to an increase in sales. This is often referred to as reducing 'view abandonment'.
  • Improved Customer Retention: By tailoring the shopping experience to user's tastes and preferences, businesses can boost customer satisfaction and increase the likelihood of return visits and customer loyalty.

In this article, we will see how you can achieve the same using the powerful combination of MoEngage Personalize and Recommendations.

Expected Result

Users will see the personalized recommendations with product grids based on what they viewed recently.

ProductGrid.png

library_add_check

Prerequisites

  • Events to track user activity on a website through MoEngage Web SDK must already be configured. To understand how to track events, refer to the Developer Guide.

  • Integration of the MoEngage Personalize SDK with your website to create a personalized web experience. For more information, refer to the Personalize SDK Integration Guide.
  • A catalog listing all your products must be uploaded on the MoEngage dashboard. For more information, refer to Catalogs.

  • Mapping of the user actions to standard MoEngage actions on the MoEngage dashboard. This mapping helps us in understanding the action and thus run our recommendation models and in querying models to create an expected output. For more information, refer to Map User Actions Settings.

Create a Recommendation

In this section, let us create a recommendation based on the users action:

  1. Navigate to the MoEngage Dashboard and select Content > Recommendations from the left navigation. The Recommendations page is displayed. For more information, refer to Creating User Action Recommendations.
  2. At the top right corner, click + Create recommendation. It takes you to the first step "Select recommendation model".
    2.png
  3. In the Filter by user action and item attributes section, select the User Actions model.
  4. Click Next. It takes you to the second step "Create recommendation". Enter the following details:
    • Recommendation name: Enter a name for the recommendation. For example, "Recently Viewed Products". This will be the name through which you will refer the output of this recommendation model.
    • Recommendation description: Enter a description for the recommendation. This description will help you understand what the model is aimed at.
    • Catalog: Select the catalog that has all the list of products provided in your platform with all the related information.
      12.png
  5. In the Filter recommendations by user actions section, filter the products that the user has viewed recently but not purchased.
    1. From the Item where user performed drop-down list, select “Product Viewed”.
    2. Select the Exclude checkbox.
    3. From the Item where user performed drop-down list under Exclude, select “Product Purchased”.
      4.png
      This query provides the list of products that a user has viewed recently in the last 10 days but has not purchased in the last 10 days.
    4. In the Sort the filtered items section, from the Order results by drop-down list, select "Most Recent".
  6. Click Create to save the changes and create the recommendation. The status of the same will be "Active" on the Recommendations page.
  7. The Recommendation engine shares the set of products user has viewed but not purchased in the last 10 days, sorted by the recency.

Now that the recommendation is created, let us create a personalized experience to nudge people about the products that they have viewed but not purchased.

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 > Web (WYSIWYG) or click + Create new > Experience > Web > Web (WYSIWYG).
    UC-88.png
    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, "Display Recently Viewed Products".
    • Experience Tags: Add tags here to later identify this among the other personalized experiences you will be having.
      7.png
  3. Under Target Audience, click + Add Audience and then click + New Audience to define the target audience. For more information on new audience creation, refer here.
    image-20240120-114653.png
  4. 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.
    image-20240120-115200.png
  2. You can personalize either a single web page or multiple web pages.
    Note: In case of multiple web pages, the elements to be personalized must be present on every page matching the web page filtering criteria. If the element is not present, the personalization will not be shown to the user.
  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.
    2.png
  4. Click Personalize URL to open our website in the editor.
  5. Click Personalize for the required variation to move to the next step of personalizing the webpage using the What-You-See-Is-What-You-Get (WYSIWYG) visual editor of MoEngage in a new tab.
    Note: You can personalize the content for all variations except the Default variation.
    3.png
  6. Select the location on your target webpage(s) and click + Add widget . The Select widget panel is displayed on the right. 
  7. Click Product grid in the editor.
    4.png
  8. Follow the detailed instructions in this document to configure and personalize your grid. When you map information, from the Choose your recommendation drop-down list, select the recommendation "Recently Viewed Products" you created above.
  9. 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.
    image-20240120-130725.png
  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.

Conclusion

Whenever the visitors fulfil the criteria specified for the target audience, they would see the product grid widget on the web page(s) after they perform the custom event. For example, product viewed, product added to cart, or product wishlisted.

Recently Viewed products displayed on the home page:

Product grids based on browsing behavior.gif

Now that you have personalized a visitor’s current session based on browsing behavior, go to Persoanlize Analytics to see how your experience is performing.

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

How can we improve this article?