With the right configuration of your HTML, Recos Tag will send events automatically just by detecting attributes in your HTML

Setup

Enrich your recommendation banner with the folllowing attributes

html
<div data-reco-id="[RECO_ID]"  [data-reco-debug="true"]>
	<div data-item-id="[ITEM_ID]">
		<div data-reco-click="[ACTION_ID]">
		</div>
	</div>
</div>

Where

data-reco-debug="true" is optionnal

RECO_ID is the id of a recommendation

ITEM_ID is the id of the item

ACTION_ID is one of the following

Recos Analytic Events Actions

go_to_page

when an item is clicked

add_to_cart_item

when an item is added to cart in a recommendation

add_to_cart_items

when alls the items recommended are added to cart (like in bundles)

when an experience is closed

convert_XXX

when a conversion button is clicked (XXX can be anything)

⚠️

Recos Tag detects sends a show event as soon as an element with a data-reco-id attribute is attached to the DOM. If this element is empty at first and filled with items only later, Recos Tag will send an event without any item_ids. If you plan on filling the banner with items asynchronously, you should add the data-reco-id attribute only at the very end

QA

Once the div with the data-reco-id=[RECO_ID] appeared you should see a show event when typing in your console dataLayer

html
{
    "event": "ab_recos_[uuid]",
    "recos": {
        "reco_id": "[RECO_ID]",
        "action_id": "show",
        "item_id": "",
        "item_ids": "[\"21222\",\"12073\",\"21464\",\"6762\"]",
        "debug_mode": false,
        "non_interaction": false
    },
    "gtm.uniqueEventId": 17
}

Once a div with a data-reco-click=[ACTION_ID] attribue clicked, you should see the following event when typing in your console dataLayer

html
{
    "event": "ab_recos_[uuid]",
    "recos": {
        "reco_id": "[RECO_ID]",
        "action_id": "[ACTION_ID]",
        "item_id": "21222", // the ITEM_ID concerned by the click
        "item_ids": "[\"21222\",\"12073\",\"21464\",\"6762\"]", // a strignified array of all the ITEM_IDs in the reco
        "debug_mode": false,
        "non_interaction": false
    },
    "gtm.uniqueEventId": 17
}

When typing in your console

html
console.log(dataLayer)

Example

The following enriched HTML

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

Will send events

When the data-reco-id="082ecd63-84ec-4f48-90ce-12271d456020" element appears in the DOM, the following event is pushed in the DataLayer

javascript
window.dataLayer.push([
    "event",
    "ab_recos_[uuidXX]",
    { 
			action_id: "show",
			reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-reco-debug is set to true
    }
  ]);

When the buttondata-reco-click=add_to_cart_item is clicked, the following event is pushed in the DataLayer

javascript
window.dataLayer.push([
    "event",
    "ab_recos_[uuidYY]",
    { 
			action_id: "add_to_cart_item",
			reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_id: "X23",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-reco-debug is set to true
    }
  ]);

When the divdata-reco-click=go_to_page is clicked, the following event is pushed in the DataLayer

javascript
window.dataLayer.push([
    "event",
    "ab_recos_[uuidZZ]",
    { 
			action_id: "go_to_page",
			reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
			item_id: "X23",
			item_ids: "[\"X23\",\"Y47\"]",
			debug_mode: true // because data-potions-debug is set to true
    }
  ]);

where uuidXX, uuidyY, uuidZZ are generated on the fly to avoid event collision in the dataLayer

Enriching Recommendations Banner HTML to send events to DataLayer through Recos Tag

Setup

QA

Example