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 --- - Implement a [tracking code](/developers/web/installation-and-configuration) into your website. - The [item feed](/docs/ai-hub/recommendations-v2/item-feed-requirements) must be provided. - [Configure an item catalog for recommendations](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations). Enable the personalized recommendations. ## Process --- In this use case, you will go through the following steps: 1. [Create AI recommendations](/use-cases/personalized-reco-on-error-page#prepare-ai-recommendations) with personalized products. 2. [Create a dynamic content campaign](/use-cases/personalized-reco-on-error-page#create-dynamic-content). ## Prepare AI recommendations --- In this step, create an AI recommendation campaign that will be used to display products on page 404. 1. Go to

**AI Hub > (AI Recommendations) Models > 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**. 6. In the **Items** section, click **Define**. 7. Click **Add slot**. 8. Click **Unnamed slot** that was created. 8. Define the minimum and maximum number of products displayed in the frame according to your needs. 9. Optionally, you can use filters to include specific items in the recommendation frame.

Learn about the difference among [elastic, static filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#select-conditions-of-displaying-items), and [distinct filters](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#distinct-filter).

10. Confirm the configuration by clicking **Apply**. 11. Optionally, you can use boosting option to promote or demote any items attributes in the recommendation frame. 12. Optionally, you can also define the settings in the **Additional settings** tab according to your needs. 13. 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.

If you don’t want to use dynamic content, you can retrieve recommendations through API, [using this method](https://developers.synerise.com/AIRecommendations/AIRecommendations.html#operation/GetRecommendationsByCampaignV2).

To prepare dynamic content: 1. Go to

**Experience Hub > Dynamic content > Create new**. 2. Enter the name of the dynamic content. 1. Choose the **Insert Object** type. 2. In the **Audience** section, select **Everyone**. 3. In the **Content** section specify the CSS selector where you want to insert recommendations. 4. In the **Content** tab, click **Create Message**. 5. 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 %}

6. Save the template. 7. In the **Schedule** section, select the date when the dynamic content is activated. 8. In **Display settings**, define the circumstances for displaying the content.

Instructions how to do it are available [here](/docs/campaign/dynamiccontent/creating-dynamic-content/creating-dynamic-content).

9. Confirm by clicking **Apply**. 10. In the **UTM & URL parameters** section, click **Skip step**. 11. 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](https://app.synerise.com/ai-v2/recommendations/y9BygrOc69U0) and [dynamic content campaign](https://app.synerise.com/campaigns/preview/b2229cd9-5021-4629-9e66-60a99bd284ae) in Synerise Demo workspace. If you’re our partner or client, you already have automatic access to the **Synerise Demo workspace (1590)**, where you can explore all the configured elements of this use case and copy them to your workspace. If you’re not a partner or client yet, we encourage you to fill out the contact [form](https://demo.synerise.com/request) to schedule a meeting with our representatives. They’ll be happy to show you how our demo works and discuss how you can apply this use case in your business. ## Read more --- - [Dynamic content](/docs/campaign/dynamiccontent) - [Recommendations](/docs/ai-hub/recommendations-v2/recommendation-statistics) - [Using recommendations in dynamic content](/developers/inserts/recommendations-v2)