# Mix front-end integration using the Tag and Custom JavaScript

The **AB Tasty Tag** allows you to code your own recommendation banners and automatically send analytics events, without adding manual tracking code. By enriching your HTML with simple **data attributes**, AB Tasty Tag detects impressions and clicks, enriches the data, and pushes events to your analytics tool through the dataLayer.

#### Prerequisite :

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

  ```
  recos
  ```

  This command returns a **Promise** that resolves with a product list, confirming that the tag is If you see a valid object returned, the tag is running correctly and ready to capture events.. Else contact your CSM.

{% stepper %}
{% step %}

### **Enrich your recommendation banner HTML**

Add the following **data attributes** to your HTML elements to make the AB Tasty Tag detects them automatically:

| Attribute                       | Purpose                                             | Example                               |
| ------------------------------- | --------------------------------------------------- | ------------------------------------- |
| `data-reco-id="[RECO_ID]"`      | Identifies the recommendation container             | `<div data-reco-id="abc123">`         |
| `data-reco-name="[RECO-_AME]"`  | Name of the recommendation                          | `<div data-reco-name='Add to cart">`  |
| `data-reco-click="[ACTION_ID]"` | Tracks user interactions (clicks)                   | `<a data-reco-click="click_product">` |
| `data-item-id="[ITEM_ID]"`      | Identifies a specific product in the recommendation | `<div data-item-id="SKU_123">`        |

{% hint style="info" %}
The `RECO_ID` corresponds to the ID found in the list of your Recommendations in Recommendations & Merchandising platform.
{% endhint %}

{% endstep %}

{% step %}

### **Set up your Tag Manager (e.g. Google Tag Manager)**

The AB Tasty Tag automatically pushes events to the `dataLayer`.\
Your **Tag Manager** then needs to pick up these events and forward them to your analytics platform (e.g., GA4).

Learn more: [https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/\~/changes/352/recommendations-and-merchandising-1/how-tos/deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web#setup-analytics](https://docs.abtasty.com/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/..#setup-analytics)
{% endstep %}

{% step %}

### **Validate events in your analytics tool**

Once your GTM setup is complete, verify that Recos events are flowing correctly:

* Check the **Preview Mode** in GTM to see events being triggered.
* In **GA4**, confirm that events such as `reco_impression` or `reco_click` appear in real time.
  {% endstep %}
  {% endstepper %}

### **How It Works**

The AB Tasty Tag automatically performs the following actions:

1. **Event detection**
   * Detects when an element with `data-reco-id=[RECO_ID]` appears in the viewport.
   * Detects clicks on any element with `data-reco-click=[ACTION_ID]`.
2. **Event enrichment**\
   Each captured event is enriched with contextual data:
   * `reco_id`: from the nearest parent with `data-reco-id`.
   * `reco_name`: from the nearest parent with `data-reco-name`.
   * `item_id`: from the nearest parent with `data-item-id`.
   * `item_ids`: from all children elements with `data-item-id` under the same `data-reco-id` container.
3. **Push events**\
   The AB Tasty Tag pushes the enriched event to the `dataLayer` (which can be picked up by GTM) or `your analytic tool`  (Piano or Matomo).
4. **Analytics trigger**\
   GTM triggers send the event to your analytics tool, such as **Google Analytics 4**, for performance tracking and reporting.

Learn more:

{% embed url="<https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/~/changes/352/recommendations-and-merchandising-1/how-tos/deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/mix-front-end-integration-using-the-tag-and-custom-javascript/recos-analytics-event-format>" %}

### **Tracking Volume and Cost**

Each recommendation view or click generates a tracking event.\
This increases the total number of events processed by your analytics tools (e.g., GA4 and BigQuery).

While these events are lightweight, exporting them at scale (especially to BigQuery) can generate additional costs depending on your data volume.

Learn more: **Impact of BigQuery exports and tracking volume**


---

# 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/mix-front-end-integration-using-the-tag-and-custom-javascript.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.