# How to deploy a recommendation strategy on Web

## Prerequisite

* **Have AB Tasty tag**. \
  To verify that you have successfully installed it on your website, open your console and type 

  ```
  recos
  ```

  You should see a global context object if the tag is correctly installed. Else contact your CSM.

## Deployment

{% stepper %}
{% step %}

### Display a Product List

There are three main options for displaying product lists.

#### Option 1: AB Tasty Widget (100% Delegated)

AB Tasty provides a [widget that manages API calls + HTML/CSS Embeds the widget](/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/low-code-deployment-using-a-custom-widget.md).

#### **Option 2: Mixed Integration (Tag + Custom HTML/CSS/JS)**

1. AB Tasty Tag collects contextual variables.
2. Retrieve a product list with:

   ```js
   recos.reco(RECO_ID).then(console.log)
   ```
3. Manage your banners with [HTML or CSS](/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/mix-front-end-integration-using-the-tag-and-custom-javascript.md).

#### **Option 3: Customer Integration (API Direct)**

* Customer integrates directly with ABT API:
  * **Client → Server** calls.
  * **Server → Server** calls.
* Prebuilt API requests are provided [in the platform](/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/advanced-headless-integration-using-the-api.md).
  {% endstep %}

{% step %}

#### Setup Analytics

1. **Enrich HTML** with attributes:

   ```html
   <div data-reco-id="[RECO_ID]">
     <div data-item-id="[ITEM_ID]">
       <div data-reco-click="go_to_page"></div>
     </div>
   </div>
   ```
2. **Connect with your analytics tools**
   * **For GA4**
     1. **Events automatically pushed** to DataLayer  (`show`, `go_to_page`, `add_to_cart_item`).
        1. **Setup GTM**
           * Create trigger: `ab_recos` custom event.
           * Create variables (`action_id`, `reco_id`, etc.).
           * Create GA4 tag.
        2. **Verify in GA4 DebugView**.
   * **For Piano or Matomo**
     1. **Events automatically pushed** to your analytic tool (`show`, `go_to_page`, `add_to_cart_item`).
        1. No setup needed
           {% endstep %}
           {% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.