In today's digital landscape, delivering personalized experiences to customers has become essential for businesses to stand out and engage their audience effectively. One powerful approach to personalization is tailoring the content and product offerings based on the traffic source that brings visitors to a personalized landing page.
 
This use case describes the process of implementing a dynamic content that displays item suggestions which are based on the clicked ad. 

Before you proceed to implementing this use case, you must configure an external advertisement campaign within which UTMs are added to URLs. These UTMs will be used in the targeting options of the dynamic content campaign, enabling the display of items suggestions based on the clicked ad.

This use case provides you with an HTML code for the dynamic content to be edited in the [dynamic content template builder](/docs/campaign/dynamiccontent/dynamic-content-template-builder). When you paste it to the editor, you will be able to configure the fields in the template by means of a user-friendly configuration form.

The HTML code of the dynamic content consists of the following configurable elements:
- The banner field in which you can paste a link to the image of the collection
- The field with the main title displayed in the dynamic content 
- One object, dedicated to one item. The object let you define the title of the product, its description and price, and the link to the product's image.
- Recommendation selection section.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/traffic-source.png" alt="Campaign with traffic source"  class="full no-frame">
</figure> 

## Prerequisites  
---

- [Configure AI engine](/docs/settings/configuration/ai-engine-configuration/engine-configuration-for-recommendations) and enable it for personalized recommendations.
- Prepare an external advertising campaign for specific product category and configure UTM parameters for the ads.
- Create a [landing page](/docs/campaign/landing-page). The dynamic content will be displayed on this page.

## Process
---
In this use case, you will go through the following steps:
1. [Create a recommendation campaign](/use-cases/personalization-based-on-traffic-source#create-a-recommendation-campaign) which promotes the specific product category.
2. [Create a dynamic content](/use-cases/personalization-based-on-traffic-source#create-an-editable-dynamic-content) that will display the item collection based on the ad a customer has been redirected from.


## Create a recommendation campaign
---
Create a recommendation campaign that will return the items of the specific category. Such recommendation will return the items based on customer's behavior on the website and browsing history.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/ai-hub-icon.svg" alt="Image presents the AI Hub icon" class="icon"> **AI Hub > (AI Recommendations) Models > Add recommendation**
2. Enter the meaningful name of the recommendation.
3. In the **Type & Items feed** section, click **Define**.
    1. From the **Items feed** dropdown list, select the main catalog with all products and categories.
    2. As the type, select **Personalized**.
    4. Click **Apply**.

4. In the **Items** section, click **Define**.
5. Click **Add slot**. You can name the slot for later reference. 
6. In the **Number of items** subsection, set the minimum and maximum number of items to `6`.       
    
   <div class="admonition admonition-tip"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   Setting the minimum and maximum number of items to the same number ensures that exactly this many items will appear in the slot.

   </div></div></div>
 
7. From the **Statics filters** dropdown, click **define filter** and choose **Visual Builder**. 
8. In the visual builder, choose the **category** (or **brand**) attribute and set its value to the category from which the items will be presented in the recommendation.
8. Additionally, if you want to, you can apply [other filters types](/docs/ai-hub/recommendations-v2/recommendation-filters) to specify the range of items displayed in the recommendation.
9. In the **Items** section, click **Apply**.  
10. In the **Boosting** section, you can enable [define boosting rules](/docs/ai-hub/recommendations-v2/creating-recommendation-campaign#define-the-boosting-factors).
11. Optionally, in the **Additional settings** section, you can exclude the items which were already purchased or select the metric according to which the items will be ordered in the recommendation.
12. Save the recommendation by clicking **Save**.

## Create an editable dynamic content
---
In this part of the process, you will create a dynamic content campaign dedicated to a specific category. The provided HTML code has defined variables that can be easily customized to meet your unique business needs using the configuration form. The variables that are defined include: title, description, price, item link, and image link. 

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/experience-hub-icon.svg" alt="Experience Hub icon" class="icon" > **Experience Hub > Dynamic Content > Create new**.
2. Enter the name of the content.
3. Choose the **Insert object** type.
2. In the **Audience** section, select **Everyone**.
3. In the **Content** section, select **Simple message**, and specify the CSS selector where you want to insert dynamic content to your website.
4. Click **Create Message > New template**.
5. In the code editor, insert Jinjava with the configurable boxes and add your own CSS.


   <div class="admonition admonition-note"><div class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   Below you will find the ready-to-use code with variables that will appear in the configuration form. You can implement it in your campaign, add CSS with specific styles and fill the config boxes based on your preferences. What is important, the code contain information about one exemplary item. You can add as many items as you want.

   </div></div></div>


   
   <details class="accordion"><summary>Click to see Jinjava</summary><div class="accordion-content"><pre><code class="language-html">&lt;h4&gt;Intro&lt;/h4&gt; &lt;div style="max-width: 360px"&gt; &lt;img src="#### type: "string", groupName: "Intro", groupId: "Intro", label: "Banner", id: "image_1", defaultValue: "lorem_image" !####" /&gt; &lt;p&gt;#### type: "string", groupName: "Intro", groupId: "Intro", label: "Title", id: "intro_1", defaultValue: "lorem_title" !####&lt;/p&gt; &lt;/a&gt; &lt;/div&gt; &lt;hr&gt; &lt;h4&gt;Item 1&lt;/h4&gt; &lt;div style="max-width: 360px"&gt; &lt;a href="#### type: "string", groupName: "Item 1", groupId: "item_1", label: "Link", id: "link_1", defaultValue: "lorem_link" !####"&gt; &lt;img src="#### type: "string", groupName: "Item 1", groupId: "item_1", label: "Photo", id: "image_1", defaultValue: "lorem_image" !####" /&gt; &lt;p&gt;#### type: "string", groupName: "Item 1", groupId: "item_1", label: "Title", id: "title_1", defaultValue: "lorem_title" !####&lt;/p&gt; &lt;p&gt;#### type: "string", groupName: "Item 1", groupId: "item_1", label: "Description", id: "desc_1", defaultValue: "lorem_description" !####&lt;/p&gt; &lt;p&gt;#### type: "string", groupName: "Item 1", groupId: "item_1", label: "Price", id: "price_1", defaultValue: "lorem_price" !####&lt;/p&gt; &lt;/a&gt; &lt;/div&gt;</code></pre></div></details>


   <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/dc-traffic.png" alt="DC settings"  class="full">
    <figcaption>Dynamic content settings</figcaption>
    </figure> 

6. Additionally, you can add to the campaign as an insert link to the recommendation campaign with products from a specific brand. Click **Insert**, select **AI Recommendations 2** from the list and choose the recommendation campaign crated in the [previous step](/use-cases/personalization-based-on-traffic-source#create-a-recommendation-campaign).
7. Click **Get HMTL code**, click **Copy to clipboard** button visible on the upper right side of the screen.
8. Go to the HTML tab of the campaign editor on the right side of the screen and paste the code below the code added before.
7. Add CSS styles based on your business assumptions.
8. Save the template.
5. In the **Schedule** section, select the date when the dynamic content is activated.
6. In **Display settings**, define the circumstances for displaying the content.
    1. In the **Triggers** section, select **on landing**.
    2. Click **Advanced options**, go to the **Page targeting** section.
    3. Below the **Display on pages** banner, click **Add rule**.
    4. From the left dropdown list, select **RegExp**.
    5. In the right field set the URL where you want your dynamic content to be shown. Add the UTMs of the external campaign. It will decide which DC campaign should be displayed.
    3. In the **Frequency** section, select **Always**. 
    4. In the **stop display** section, select **Never**.
    5. In the **Device** section, select on which device you want to show the dynamic content.
6. Confirm by clicking **Apply**.
7. In the **UTM & URL parameters** section, click **Skip step**.  
8. Activate dynamic content.  

  <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/dc-traffic2.png" alt="DC settings"  class="full">
    <figcaption>Dynamic content settings</figcaption>
    </figure> 

## What’s next 
---

To measure campaign performance, you can create various custom analytics. Once these analytics are created, they can be brought together in a single dashboard to provide a holistic view of campaign performance, allowing you to quickly assess whether the given results met your specific campaign goals and objectives. 


## Check the use case set up on the Synerise Demo workspace 
---
You can check the configuration of every element of this process directly in Synerise [Demo workspace](https://demo.synerise.com/request):
- [Recommendation campaign](https://app.synerise.com/ai-v2/recommendations/rotdrWmS5iJU)
- [Dynamic content campaign](https://app.synerise.com/campaigns/create/ee4bbc3a-627d-4e20-bd95-9288cf411b23)

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)