Personalized recommendations for 404 error page

Published February 17, 2023
Modules
Difficulty
Selected Clients
ikea logomediaexpert logoagatameble logominimalism logo

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.

Personalized recommendations on 404 error page

Prerequisites


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 Image presents the Communication icon 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.
    AI recommendation configuration
    AI recommendation campaign configuration

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.

Tip: If you don’t want to use dynamic content, you can retrieve recommendations through API, using this method.

To prepare dynamic content:

  1. Go to Image presents the Communication icon 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


πŸ˜•

We are sorry to hear that

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

πŸ˜‰

Awesome!

Thank you for helping improve out documentation. If you need help or have any questions, please consider contacting support.

Close modal icon Placeholder alt for modal to satisfy link checker