Back to all Usecases
How to Reduce Bounce Rates on Websites

Introduction

As a marketer, you may be wondering how to reduce the bounce rates of new users on your website. The key lies in personalization. By tailoring your website to fulfill the specific needs and preferences of individual users, you can create a more engaging and relevant experience.

If a user is coming to the website after performing a certain action (viewed a product, added a product to cart), they are more likely to drop-off from the website if they do not find relevant products on the home page.

In this article, we will use Recommendation and Web Personalization features of MoEngage to reduce bounce rates and maximize user engagement.

Expected Result

Users will see the personalized web page with recommended products.

image-20240120-170003.png

library_add_check

Prerequisites

  • Events to track the action of a user searching for products, adding a product to a cart or adding a product to a 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.
  • Mapping of the tracked events above to concerned MoEngage events. In this example, the custom event of adding a product to a cart or buying now will be mapped to "Added to Cart" and the custom event of completing a purchase will be mapped to "Product Purchased". For information on mapping custom events to MoEngage events, refer here.
  • A catalog and a respective feed that has a list of available products and related information such as the title, category, brand, and price. Set the feed to refresh at a suitable interval so that the latest information can be maintained. For more information on product catalogs and feeds, refer to Catalogs.
  • Integration of the MoEngage Web SDK with your website to create a personalized web experience. For more information, refer to Integrate Web SDK.
  • Ad blockers disabled in the browser. The personalization editor will not load if ad blockers are enabled.

Create a Recommendation

Before creating our personalized experience, let us create a recommendation based on the user 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. Under Predictive, click the Recommended Items card. This will help in recommending items that the user would like to add to the cart by using the information about the item they added to the cart recently and previous purchases of your users.
  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, "DemoRecommendations". 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 offered by you with all related information.
      Screenshot 2024-01-20 at 10.02.00 PM.png
  5. Click Create to save the changes and run the model.
    Please note that this will take 24 hours. You can find the status of the model on the Recommendations home page:
    image-20240120-163521.png

    The Recommendation engine shares the set of products that are most commonly interacted with.

Now that we have created the recommendation, let us create our personalised experience to nudge people about items that they can buy with the items they are about to purchase.

Create a Personalized Experience

In this section, let us create a personalized experience that you would like your users to 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.
    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, "Reduce Bounce Rates in New users".
    • Experience Tags: Add tags here to later identify this among the other personalized experiences you will be having.
      image-20240120-163732.png
  3. Under Target Audience, define your audience. Our goal is to reduce bounce rates in new users, so let us create a new audience.
  4. Click + Add Audience and then click + New Audience to define the target audience.
    image-20240120-114653.png
  5. The Add new audience pop-up is displayed. In the Audience name field, enter a name. For example, "New Users".
    image-20240120-164055.png
  6. Select All users and then click + In-session attributes.
  7. Select the User Type as New and click Add. image-20240120-164121.png

  8. 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. Select the Single page option because the new users are more likely to land on the home page.
  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.
    3.png
  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-164528.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. image-20240120-164640.png
  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.04.04 PM (1).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 third option. The Select widget pop-up window is displayed
  11. Select Product grid, which will have the recommended items.
    Screenshot 2024-01-20 at 10.17.27 PM.png
  12. You are prompted to select a location to define whether the grid should be added before or after the selected element. In this example, select "After".
    image-20240120-164835.png
  13. Click Next. The Edit Item Grid pop-up window is displayed where you can define the following:
    • How the grid should appear (in terms of the design elements, position, layout).
    • All the placeholders to be shown in the grid.
    • Mapping information to the concerned placeholders. 
      image-20240120-124122 (1).png
  14. In step 1 "Grid Appearance", select the layout you want, define the title, sub-title, and CTA by clicking the concerned options on the right side of the pop-up.
    1. In our example, select a different design and make it a 5-item list.
    2. Enter the title “Most Viewed Items”.
    3. Remove the Grid CTA.
      image-20240120-165049.png
  15. In step 2 "Edit Card", define how each card in the grid will look like.
    1. For this example, disable the Labels, Rating, Reviews, and Subtitles.
    2. Change the CTA button name.
      image-20240120-165230.png
  16. In step 3 "Map Information, select the recommendation that we have generated as mentioned above. image-20240120-165407.png
  17. Map the information that the generated recommendation has to the concerned attributes here using the drop-down lists. image-20240120-165352.png
  18. Click Save. It will help us see how the placement of the grid and the other edits are. You can click this added element to add more changes. image-20240120-165641.png
  19. Add Click Tracking to any of these elements by selecting it and selecting the icon shown in the following image. Screenshot 2024-01-20 at 6.33.29 PM (1).pngFor our example, let us do it on the whole section. This will help us understand if this recommendation listed in this position is helping us reduce bounce-offs or not.
  20. After completing all edits, click Save & exit at the top right. image-20240120-165841.pngThis will close this tab and take you back to the Experience definition page in the MoEngage dashboard. image-20240120-165909.png
  21. 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

In this use case, we used Recommendation and Web Personalization features of MoEngage to reduce bounce rates and maximize user engagement.

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?