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

1

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:

Attribute	Purpose	Example	Required
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">	✅

The RECO_ID corresponds to the ID found in the list of your Recommendations in Recommendations & Merchandising platform.

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

If your banner is filled asynchronously, add the data-reco-id only after the content is fully loaded.

GitBookapp.gitbook.com

Practical example

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

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:

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:

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
  }
]);

2

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

1. Select the Recos - trigger created earlier.

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

3

Retrieving Products from a RECO_ID

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

Example

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

This returns a JSON list of products:

[
  {
    "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:

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