# How to track performance

## Tracking Setup with Recos Tag

The **AB Tasty Tag** lets you both **display recommendations** and **track interactions automatically** — without writing custom tracking code.\
By enriching your HTML with data attributes, events such as *impressions* and *clicks* are automatically detected, enriched, and pushed into the **dataLayer** for use with **Google Tag Manager (GTM)** and **Google Analytics 4 (GA4)**.

#### 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.recos

{% stepper %}
{% step %}

### Enriching Your HTML for Tracking

Once the AB Tasty Tag is installed, enrich your recommendation banners using **data attributes**.\
These attributes allow the tag to detect user interactions and automatically send tracking events to your analytics tool.

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

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

<table><thead><tr><th width="212.8203125">Attribute</th><th>Purpose</th><th width="306.921875">Example</th><th>Required</th></tr></thead><tbody><tr><td><code>data-reco-id="[RECO_ID]"</code></td><td>Identifies the recommendation container</td><td><code>&#x3C;div data-reco-id="abc123"></code></td><td>✅</td></tr><tr><td><code>data-reco-name="[RECO_NAME]"</code></td><td>Name of the recommendation </td><td><code>&#x3C;div data-reco-name='Add to cart">✅</code></td><td>❌</td></tr><tr><td><code>data-reco-click="[ACTION_ID]"</code></td><td>Tracks user interactions (clicks)</td><td><code>&#x3C;a data-reco-click="click_product"></code></td><td>✅</td></tr><tr><td><code>data-item-id="[ITEM_ID]"</code></td><td>Identifies a specific product in the recommendation</td><td><code>&#x3C;div data-item-id="SKU_123"></code></td><td>✅</td></tr></tbody></table>

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

#### Automatic Event Detection

Once implemented, AB Tasty Tag automatically pushes events to the dataLayer or analytic tools:

* When an element with `data-reco-id` appears in the DOM → **“show”** event
* When an element with `data-reco-click` is clicked → **“click”** event

{% hint style="danger" %}
If your banner is filled asynchronously, add the `data-reco-id` **only after** the content is fully loaded.
{% endhint %}

{% 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>" %}

### Practical example

```html
<div
  data-reco-debug="true"
  data-reco-id="082ecd63-84ec-4f48-90ce-12271d456020"
>
  <div data-item-id="X23" data-reco-click="go_to_page">
    <button data-reco-click="add_to_cart_item"></button>
  </div>
  <div data-item-id="Y47" data-reco-click="go_to_page">
    <button data-reco-click="add_to_cart_item"></button>
  </div>
</div>
```

**When the banner appears**, the following event is pushed to the dataLayer:

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidXX]",
  {
    action_id: "show",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

**When a product is clicked:**

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidYY]",
  {
    action_id: "go_to_page",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_id: "X23",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

**When “add to cart” is clicked:**

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidZZ]",
  {
    action_id: "add_to_cart_item",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_id: "X23",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

{% endstep %}

{% step %}

### Configuring your analytic tools

### For Google Tag Manager (GTM)

Your goal is to configure GTM to send analytics events (GA4) based on AB Tasty Tag events pushed to the dataLayer.

#### Step 1: Create a Trigger

1. Go to **Triggers → New**
2. Create a new trigger:
   * **Name:** `Recos - trigger`
   * **Trigger type:** Custom Event
   * **Event name:** `ab_recos`
   * Check **Use regex matching**
   * Choose **All Custom Events**
3. Save.

#### Step 2: Create the Data Layer Variables

Go to **Variables → User-defined variables → New**, and create the following variables:

| Variable Name | Data Layer Variable | Type                |
| ------------- | ------------------- | ------------------- |
| `action_id`   | `recos.action_id`   | Data Layer Variable |
| `reco_id`     | `recos.reco_id`     | Data Layer Variable |
| `reco_name`   | `recos.reco_name`   | Data Layer Variable |
| `item_id`     | `recos.item_id`     | Data Layer Variable |
| `item_ids`    | `recos.item_ids`    | Data Layer Variable |
| `debug_mode`  | `recos.debug_mode`  | Data Layer Variable |

#### Step 3: Create the GA4 Event Tag

1. Go to **Tags → New**
2. Configure:
   * **Tag name:** `Recos - Event GA4 - recos`
   * **Tag type:** GA4 Event
   * **Measurement ID:** (found in the client’s GA4 → Admin → Data Stream)
   * **Event name:** `ABTastyRecos`
3. Add all six event parameters using the variables created above:

| Event Parameter | Value            |
| --------------- | ---------------- |
| `action_id`     | `{{action_id}}`  |
| `reco_id`       | `{{reco_id}}`    |
| `reco_name`     | `{{reco_name}}`  |
| `item_id`       | `{{item_id}}`    |
| `item_ids`      | `{{item_ids}}`   |
| `debug_mode`    | `{{debug_mode}}` |

4. Select the **Recos - trigger** created earlier.
5. Save your workspace.

You should now have **8 workspace changes**:\
→ 6 variables + 1 trigger + 1 tag.

#### Step 4: Test the Setup

**Connect Tag Assistant**

1. Go to **Tag Assistant** in GTM.
2. Enter the URL of your site.
3. Click **Continue** to launch the preview mode.

**Validate in GA4**

Go to **GA4 → Admin → DebugView** and confirm that the following appear:

* Event: `ab_recos`
* Parameters: `action_id`, `reco_id`, `item_ids`, etc.

**Example**

When a recommendation appears:

* Event: `ab_recos`
* `action_id`: `show`
* `item_ids`: all displayed products
* `reco_id`: ID of the recommendation

When a product card is clicked:

* Event: `ab_recos`
* `action_id`: `go_to_page`
  {% endstep %}

{% step %}

### Retrieving Products from a RECO\_ID

You can also retrieve recommendation data programmatically through the Recos Tag.

#### Example

```javascript
recos.reco(RECO_ID).then(console.log);
```

This returns a JSON list of products:

```json
[
  {
    "id": "id1",
    "title": "title 1",
    "price": 20,
    "strike_price": 40,
    "discount_rate": 50,
    "img_link": "https://image.png",
    "link": "https://link1"
  },
  {
    "id": "id2",
    "title": "title 2",
    "price": 30,
    "strike_price": null,
    "discount_rate": 0,
    "img_link": "https://image.png",
    "link": "https://link2"
  }
]
```

You can also retrieve any variable’s value directly:

```javascript
recos.variable(VARIABLE_NAME).then(console.log);
```

***

**Your tracking setup is now complete.**\
Your recommendation impressions, clicks, and conversions will now flow automatically into your analytics tool through GTM.

#### How to follow performance ?

Once your AB Tasty Tag and analytics integration are live, you can monitor performance directly in the **Reports** section of your AB Tasty dashboard.

**1. Access your performance reports**

* Go to your AB Tasty **Recommendations & Merchandising** dashboard.
* Click **Reports** in the left sidebar.
* Select the **Experience** you want to analyze.

**2. Key metrics available**

| Metric                    | Description                                                                    |
| ------------------------- | ------------------------------------------------------------------------------ |
| **User rate**             | % of visitors interacting with recommendations. Measures visibility and reach. |
| **Weight in revenue**     | % of total revenue driven by users exposed to recommendations.                 |
| **Revenue / user impact** | Average uplift in spend for users who engage with recommendations.             |

**3. Performance over time**

Use the **Evolution** graph to track how impressions, clicks, and revenue evolve.\
You can filter by **date range**, **device**, or **experience** to isolate trends.

**4. Optimization tips**

* Compare multiple experiences to identify high-performing ones.
* Monitor underperforming campaigns to find relevance or display issues.
* Establish a regular review schedule (weekly or monthly).

→ Learn more in [**Analyzing Performance Reports**](/recommendations-and-merchandising/getting-started/recommendations/reporting-recommendation.md)
{% 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-track-performance.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.