> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.abtasty.com/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.