Automating the extraction of sales data and updating product catalogs with accurate information is vital for businesses aiming to streamline operations and improve customer experiences. In this specific scenario, the objective is to achieve precisely that by utilizing automation to identify best-selling products in the Synerise catalog and label them on the website.

Implementing this scenario offers several key advantages. Firstly, it enables the efficient transmission of sales data for frequently purchased products within a specific category directly to the catalog. By eliminating manual data extraction, this automated approach reduces human errors and saves valuable time and resources.

The goal of this use case is to - using automation - send the sales for a particular product category (in this instance: smartphones) and upload it to the Synerise catalog through automation. The data corresponds to the best-selling items from the last 30 days. The process involves generating a JSON report via an API, manipulating the response using Jinja, and sending a request to the Synerise catalog to add the sales data with sequential numbers. Additionally, a dynamic content script is utilized to verify if the Stock Keeping Unit (SKU) exists in the top 100 product catalog and apply a "Bestseller" label to the corresponding elements on a webpage daily, based on the most recent data.

## Prerequisites 
---
- Create a catalog, that consists of two columns: `no` (number) and `sku`. This catalog will serve as the foundation for importing data automatically. The objective is to import data of the top 100 bestselling products in the `smartphones` category from the last 30 days.

- Create a [Workspace API key](/docs/settings/tool/api) that has the following permissions: `ANALYTICS_BACKEND_REPORT_READ` and `CATALOGS_ITEM_BATCH_CATALOG_CREATE` 

- In order for the bestseller label to be added to an element, the SKU (Stock Keeping Unit) needs to be included as an attribute called `data-sku.` On the webpage, there should be an element, preferably an `<a>` tag, with the `data-sku` attribute whose value corresponds to the SKU from the list of bestsellers in the catalog.

## Process
---

In this use case, you will go through the following steps:
1. [Create a metric](/use-cases/bestsellers-in-catalog#create-a-metric) that calculates the number of purchases within the `smartphones` category over the last 30 days.
2. [Create a report](/use-cases/bestsellers-in-catalog#create-a-report) that presents the top 100 bestselling products based on the metric created in the previous step.
3. [Retrieve request body of the report](/use-cases/bestsellers-in-catalog#retrieve-request-body-of-the-report) and use it in the next step during creating a workflow (in the Outgoing Integration node).
3. [Create a workflow](/use-cases/bestsellers-in-catalog#create-a-workflow) that facilitates the transmission of transaction data to the catalog, ensuring accurate and up-to-date information.
2. [Create a dynamic content campaign](/use-cases/bestsellers-in-catalog#create-a-dynamic-content-campaign) that adds labels to the bestselling products, enhancing their visibility and recognition.

## Create a metric
---

To create a metric that counts the number of frequently purchased products in a specific category (in this case: `smartphones`) within the last 30 days, follow the steps below:

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/decision-hub-icon.svg" alt="Behavioral Data Hub icon" class="icon"> **Decision Hub > Metrics > New mertic**. 
2. Enter a name of the metric.
3. As a metric kind, select **Simple metric**. 
4. As the aggregator, set **Count**. 
5. As the occurrence type, set **All**. 
6. From the **Choose event*** dropdown list, select **product.buy** event. 
7. Click on the **Where** button.  
    Result: The **Choose parameter** button will appear. 
8. Click the **Choose parameter** button.   
    Result: A pop-up window will appear. 
9. Choose the `category` parameter.
12. Click the **Choose parameter** button. 
13. From the dropdown, select **Contain**. 
14. In the text field, enter the name of the chosen category. In our case `smartphones`.
15. To specify the analyzed period, click on the **calendar** icon.
15. Choose the last 30 days.  
16. Confirm your selection by clicking the **Apply** button. 
17. Save the metric.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog4.png" alt="Metric"  class="full">
<figcaption>Metric</figcaption>
</figure> 

## Create a report
---
To create a report that presents the top 100 bestselling products from the last 30 days, follow the steps below:

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/decision-hub-icon.svg" alt="Behavioral Data Hub icon" class="icon"> **Decision Hub > Report > New report**.
2. Enter a name of the report.
3. Select the metric you created in [the previous part](/use-cases/bestsellers-in-catalog#create-a-metric) of the process.
4. From the **Range** dropdown list, choose **100 top** to display the most frequently bought products in the report preview.
5. In the **Dimension** section, select the parameter from the **product.buy** event and as the parameter, select **$sku** to display the SKU of each product.
6. For the date range, select the time period you want to analyze. In this case, choose 30 days.

   <div class="admonition admonition-important"><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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg></div><div class="admonition-body"><div class="admonition-content">

   Make sure to select the same date range as you previously selected for the metric.

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

7. Save the report.
8. Click on **Preview** to view the results.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog2.png" alt="The configuration of the report"  class="full">
<figcaption>The configuration of the report</figcaption>
</figure> 

## Retrieve request body of the report
---

Download the request body of the report you created. You will use it in the next step during creating a workflow (in the Outgoing Integration node).

1. Go to the [report](/use-cases/bestsellers-in-catalog#create-a-report) created in the previous step. 
2. Right-click and choose the option **Inspect**.
3. In the Developer Tools window that opens, navigate to the **Network** tab.
4. Click on the **Preview** tab within your report.
5. In the **Network** section locate the **Preview** element related to your report.
6. Click on the element to display its details.
7. Within the details, find the **Payload** section.
7. Click on the **Payload** element and select the option to copy the object.
6. Paste the copied object into the body of your request.

    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog5.png" alt="Download the request body"  class="full">
    <figcaption>Request body - download</figcaption>
    </figure> 

## Create a workflow
---
In this part of the process, create a workflow that updated the catalog with 100 bestselling items during last 30 days.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/automation-hub-icon.svg" alt="Automation Hub icon" class="icon" > **Automation Hub > Workflows > New workflow**.  
2. Enter a name of the workflow.

### Define the trigger node
---
Set up the repetitive launch of the trigger to 9:00 A.M on a daily basis.


<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">

In the triggering node, the audience is not a priority - you may include only yourself as audience, as an outcome, the workflow related events will be generated on the profile card. This node is necessary to: facilitate repetitive launching, using the customer-related nodes (such as Event Filter) and using customer context.

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


1. Start the workflow with the **Audience** node.
2. In the configuration of the node, set the **Run trigger** option to **repeatable**.
3. Set the interval to `1 per day`.
4. Choose the day and time when the process starts. Select 9 A.M. 
5. Select the appropriate time zone.
6. Click **Apply**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog1.png" alt="Trigger node"  class="full">
<figcaption>Audience node</figcaption>
</figure> 

### Configure the Outgoing Integration node
You will use the Outgoing Integration node to make a request to preview the report with 100 bestselling items in the last 30 days you created in the previous part of the process. 

1. Add **Outgoing Integration**. In the configuration of the node: 
    1. Choose **Custom webhook**.
    2. Name the webhook. In our case `bestsellersMobileReport`.
3. In **Webhook event name**, click **Create event** and create a new event:
    1. As **Name**, enter `report.mobilebestsellers`
    2. As **Display name**, enter `Mobile bestsellers report generated`
3. Select the **POST method**.
4. In the **Endpoint** field, enter `https://api.synerise.com/analytics/analytics/v4/reports/preview`  
4. Leave the **content-type** at the default value: `application / json`. 
5. In the body of the request, paste the code you have retrieved in [the previous step](#retrieve-request-body-of-the-report). Below, you can find an example code:

    
   <details class="accordion"><summary>Check the example code</summary><div class="accordion-content"><pre><code class="language-json">{ "analysis": { "title": "bestsellers [\"mobiles_tablets &gt; mobiles\"] 30D", "description": "", "filter": { "matching": true, "expressions": [], "expression": { "name": "", "type": "EMPTY" } }, "reportMetrics": [ { "metricId": "8e03bdb3-408a-4a3b-bc96-4e5392a08735", "dateFilter": { "type": "RELATIVE", "duration": { "type": "DAYS", "value": 30 }, "offset": { "type": "DAYS", "value": 0 } }, "comparison": { "dateFilter": { "type": "ABSOLUTE" } }, "action": { "id": 71248, "name": "product.buy" }, "format": { "dataFormat": "numeric", "useSeparator": true, "compactNumbers": false, "fixedLength": 1 }, "grouping": { "type": "TOP", "top": 100 }, "groups": [ { "title": "$sku", "type": "EVENT", "format": { "dataFormat": "numeric", "useSeparator": true, "compactNumbers": false, "fixedLength": 1 }, "attribute": { "type": "PARAM", "param": "$sku", "id": "parameters:551610043" } } ], "eventName": "product.buy" } ] }, "allowNull": true }</code></pre></div></details>
 

9. In the **Authorization** section, select **By API key**.   
10. Select the API key you created as a part of [prerequisites](#prerequisites).   
11. Confirm the settings by clicking **Apply**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog6.png" alt="Outgoing Integration"  class="medium">
<figcaption>Outgoing Integration</figcaption>
</figure> 

### Configure the Event Filter node
Configure the Event Filter node that will wait for a webhook response with the report preview of the top 100 bestsellers.

1. As the next node, add **Event Filter**. In the configuration of the node: 
    1. In the **Check** field, from the dropdown menu choose **without limits**.
    3. In the **Define conditions** field, from the **Choose event** dropdown menu, choose the `report.mobilebestsellers` event.
    4. Click **+ where** button and select the **name** parameter from the list.
    5. From the **Choose operator** dropdown list, select **Equal (String)**.
    6. In the text field, enter `bestsellersMobileReport`.
2. Confirm your settings by clicking **Apply**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog7.png" alt="Event Filter node"  class="full">
<figcaption>Event Filter node</figcaption>
</figure> 

### Configure the Outgoing Integration node

Use the Outgoing Integration node to make a request to update a catalog you created as a part of prerequisites. As a result of the update, the `sku` column will be updated with the SKU of bestselling items in the last 30 days. The configuration of this workflow ensures overwriting the catalog with 100 bestselling items on a daily basis - the list will always have 100 and won't be extended due to updates. The `no` column contains the ordinal numbers occupied by the items in the report and the values in this column are treated as keys.

1. Add **Outgoing Integration**. In the configuration of the node: 
    1. Choose **Custom webhook**.
    2. Name the webhook. In our case `bestsellersMobileCatalogue`.
    3. In **Webhook event name**, click **Create event** and create a new event:
        1. As **Name**, enter `report.updatebestsellercatalogue`
        2. As **Display name**, enter `Bestseller catalogue updated`
3. Select **POST method**.
4. In the **Endpoint** field, enter `https://api.synerise.com/catalogs/bags/{YOUR_CATALOG_ID}/items/batch`. Change the `{YOUR_CATALOG_ID}` for the ID of your catalog, created in the prerequisites (you can copy it from the URL which is available when you open the catalog).
4. Leave the **content-type** at the default value: `application / json`. 
5. In the body of the request, use the following code:

 
   <details class="accordion"><summary>Check the example code</summary><div class="accordion-content"><pre><code class="language-jinja">{% set id = 0 %} {% set batch = [] %} {% for entry in event.params['body.data[0].values[0]'] %} {% set id = id|add(1) %} {% set item = {"itemKey":id|string,"value":{"no":id|string,"sku":entry.name[0], "transactions":entry.value}} %} {% do batch.append(item) %} {% endfor %} {{batch|tojson}}</code></pre></div></details>
 

9. In the **Authorization** section, select **By API key**.   
10. Select the API key you created as a part of [prerequisites](#prerequisites).   
11. Confirm the settings by clicking **Apply**.

<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog8.png" alt="Outgoing Integration"  class="medium">
<figcaption>Outgoing Integration</figcaption>
</figure> 

### Prepare the final settings 
---
To finalize the settings of your workflow, follow these steps:

1. Add the **End** node. This node marks the end of the automation process.
2. Optionally, you can define capping for the workflow if desired. Capping allows you to set limits on how many times the workflow can be triggered within a specific time frame.
3. Add titles to each node to make the workflow more understandable to your colleagues and the code in the automation. Titles can provide descriptive information about the purpose of each node.
4. Once you have configured all the nodes and made any desired optional settings, activate the workflow by clicking **Save & Run**.

 **Result:** The actual catalog will be generated with the list of the top 100 bestsellers from the last 30 days, including the column with sequential numbers. This catalog reflects the updated and accurate information of the bestselling products, ensuring efficient and streamlined operations for your business.
    <figure>
    <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog3.png" alt="Final catalog with subsequential numbers"  class="full">
    <figcaption>Final catalog with subsequential numbers</figcaption>
    </figure> 

    
   <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">

   The order of rows in the catalog is presented in the alphabetical order.

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


<figure>
<img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/use-cases/all-cases/_gfx/bestsellerscatalog9.png" alt="Automation"  class="full">
<figcaption>Automation</figcaption>
</figure> 

## Create a dynamic content campaign
---
During this part of the process, create a dynamic content to assign the "Bestseller" label to the items from the catalog displayed on a webpage. In the settings of the dynamic content, use Jinjava (you can find it in the procedure below) to retrieve data from the catalog. Verify the presence of each SKU in the catalog and designate the corresponding elements on the webpage as "Bestsellers." Additionally, you can assign a position value ranging from 1 to 100 for each record and cross-check the SKUs against the existing catalog to identify the top 100 best-selling products.

1. Go to <img src="/api/docs/image/54176ad07f146575310749eba44b7c2f42c1b327/icons/experience-hub-icon.svg" alt="Image presents the Experience Hub icon" class="icon"> **Experience Hub > Dynamic Content > Create new**.
2. Enter the name of the campaign.
1. Choose the **Insert Object** type.
2. Select your **Audience**. You can either target your communication to everyone or choose a specific user segment. For this example, we will target the communication to every visitor to the website.
3. In the **Content** section, click **Simple message**, then in the CSS selector field, specify the location where you want to insert the content. In our case, it is **After (in div)** `.snrs-modal-wrapper`
4. In the **Content** tab section, click **Create message**.
5. In the **JavaScript** tab, paste the following code:

    
   <details class="accordion"><summary>Check the JavaScript code</summary><div class="accordion-content"><pre><code class="language-javascript">{% set positions = range(1,101) %} {% set bestsellersMobileList = [] %} {% for position in positions %} {% catalogitem.bestsellersMobile(position) %} {% do bestsellersMobileList.append(catalog_result.sku) %} {% endcatalogitem %} {% endfor %} var bestsellersMobileSKUs = {{bestsellersMobileList|tojson}}; var bestsellersMobileHTML = `&lt;p style="text-align: left; font-size:14px; display: block; margin-top: 4px;"&gt;&lt;span style="color:white;background-color: #1e815c;" class="mt-1 ps-2 pt-0 pb-0 pe-2 "&gt;Bestseller &lt;/span&gt;&lt;/p&gt;`; let bestsellersMobileURL = location.href; document.body.addEventListener('click', () =&gt; { requestAnimationFrame(() =&gt; { setTimeout(() =&gt; { bestsellersMobileURL !== location.href &amp;&amp; showBestsellersMobile(); bestsellersMobileURL = location.href; }, 1000) }); }, true); function showBestsellersMobile() { var elements = document.querySelectorAll("a[data-sku]"); for (var i = 0; i &lt; elements.length; i++) { if (bestsellersMobileSKUs.includes(elements[i].getAttribute("data-sku"))) { elements[i].insertAdjacentHTML('afterend', bestsellersMobileHTML); elements[i].addEventListener("click", function() { SR.event.trackCustomEvent( "dynamicContent.click", { "eventLabel": "Dynamic content click", "campaignName": "Label", "sku": this.getAttribute("data-sku"), "title": this.getAttribute("title"), "category": this.getAttribute("data-category") }, "Dynamic content click" ); }); } } } showBestsellersMobile();</code></pre></div></details>
 

7. In **Display Settings**, specify where the dynamic content should be displayed: **Always**, **On landing**, or on **All pages**. 
6. Skip the **UTM&URL parameters** section. 
8. In the **Schedule** section, click **Define**. Select the period when the dynamic content will be active.
9. To initiate your dynamic content campaign, click **Activate**.

## Check the use case set up on the Synerise Demo workspace
---
In the Synerise Demo workspace, you can check the configuration of:
- [metric](https://app.synerise.com/analytics/metrics/ee61ac48-5d48-4d4a-b2ab-a1106915d7b7), 
- [report](https://app.synerise.com/analytics/reports/55a37627-ba32-463e-b6c1-d15d53243f5c), 
- [workflow](https://app.synerise.com/automations/automation-diagram/fb814748-b7df-4ee8-9911-347ef8cc964d),
- [dynamic content](https://app.synerise.com/campaigns/create/f302f1d1-6196-4ef5-8e72-5e2303d81668),


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
---

- [Automation Hub](/docs/automation)
- [Catalogs](/docs/assets/catalogs/introduction-to-catalogs)
- [Dynamic content](/docs/campaign/dynamiccontent)
- [Event context from preceding nodes](/docs/automation/event-params-reuse)
- [Metrics](/docs/analytics/metrics)
- [Reports](/docs/analytics/reports)