Personalized recommendations for 404 error page

Published February 17, 2023

Modules

Difficulty

Selected Clients

---

Industry

Automotive

Finance

Books

Construction

Cosmetics

Electronics

Fashion & Apparel

FMCG

Home & Furniture

Jewelry

Retail

Telco

Media

Multi

Travel

There are many reasons why users may end up on a 404 error page, including situations when the user mistyped the URL. It is very important to have an optimized 404 page, as it significantly affects the user experience. By providing personalized recommendations or any alternative content on the error page, you can prevent users from feeling lost or frustrated and keep them engaged by encouraging them to continue browsing your site. A well-designed and informative 404 page can help improve user satisfaction, reduce bounce rates, and ultimately drive conversions.

This use case describes the creation of personalized recommendations on a 404 page that will display items most relevant to the user’s interests based on their activity on the site.

Prerequisites

• Implement a tracking code into your website.
• The item feed must be provided.
• Configure an item catalog for recommendations. Enable the personalized recommendations.

Process

In this use case, you will go through the following steps:

1. Create AI recommendations with personalized products.
2. Create a dynamic content campaign.

Prepare AI recommendations

In this step, create an AI recommendation campaign that will be used to display products on page 404.

1. Go to Communication > Recommendations > Add recommendation.
2. Enter the name of the recommendation (it is only visible on the list of recommendations).
3. In the Type & Items feed section, click Define.
4. From the Items feed dropdown list, select a product feed.
5. Select the Personalized recommendation type.
6. Confirm the recommendation type by clicking Apply.
7. In the Items section, click Define.
8. Click Add slot.
9. Click Unnamed slot that was created.
10. Define the minimum and maximum number of products displayed in the frame according to your needs.
11. Optionally, you can use filters to include specific items in the recommendation frame.
    Note: Learn about the difference among elastic, static filters, and distinct filters.
12. Confirm the configuration by clicking Apply.
13. Optionally, you can use boosting option to promote or demote any items attributes in the recommendation frame.
14. Optionally, you can also define the settings in the Additional settings tab according to your needs.
15. Click Save.

    

Create dynamic content

Use dynamic content to insert recommendations in the specific place on your 404 page. The most efficient way to do so is to use a unique CSS selector which is added only to the 404 page. In our case, we use the body.cms-no-route selector.

To prepare dynamic content:

1. Go to Communication > Dynamic content > Create new.

2. Enter the name of the dynamic content.

3. Choose the Insert Object type.

4. In the Audience section, select Everyone.

5. In the Content section, select Simple message, and specify the CSS selector where you want to insert recommendations.

6. In the Content tab, click Create Message.

7. In the code editor, insert Jinjava with the AI recommendation and add your own CSS.

   Click to see Jinjava

   Replace your_campaign_ID with the ID of the AI recommendation. The ID of the AI campaign is contained in the URL of the recommendation.

     <!-- Downloading the AI campaign --> 
    {% recommendations3 campaignId=your_campaign_ID %}
    {% for p in recommended_products3 %}
    <li data-snr-ai-product-id="{{p.itemId}}">
    <a class="snrs-AI--item-link" href="{{p.link}}" title="{{p.title}}">
    <img src="{{ p.imageLink }}"class="products-slider__item-image snrAI-product-image snrAI-product-image-{{p.itemId}}" width="90" alt="{{p.title}}" id="snrAI-image-{{p.itemId}}">
    <h3 class="snrs-AI-product--product-name">
    <span class="snrs-AI-product--name-first">{{p.title}}</span>
    </h3>
    <span class="snrs-AI-product--series">{{p.attributes.series}}</span>
    </a>
    </li>
     {% endfor %} {% endrecommendations3 %}

8. Save the template.

9. In the Schedule section, select the date when the dynamic content is activated.

10. In Display settings, define the circumstances for displaying the content.

    Note: Instructions how to do it are available here.

11. Confirm by clicking Apply.

12. In the UTM & URL parameters section, click Skip step.

13. Activate the dynamic content.
    Result: The recommendation frames are displayed on the website.

Check the use case set up on the Synerise Demo workspace

You can check the recommendations settings and dynamic content campaign in Synerise Demo workspace.

If you don’t have access to the Synerise demo workspace, please leave your contact details in this form, and our representative will contact you shortly.

Read more

• Dynamic content
• Recommendations
• Using recommendations in dynamic content