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.

1

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

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

2

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

3

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.

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:

GitBookapp.gitbook.com

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