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

Avec la bonne configuration de votre HTML, Recos Tag enverra des événements automatiquement en détectant simplement les attributs dans votre HTML

## Installation <a href="#h_01jhfxnfznpnkmh3vfkna0qdqv" id="h_01jhfxnfznpnkmh3vfkna0qdqv"></a>

Enrichissez votre bannière de recommandation avec les attributs suivants\
\\

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

Où

* data-reco-debug="true" est facultatif
* RECO\_ID est l'identifiant d'une recommandation
* ITEM\_ID est l'identifiant de l'élément
* ACTION\_ID est l'un des suivants

## Actions sur les événements analytiques Recos <a href="#h_01jhfxs6kzpqpba2r0p89szxpx" id="h_01jhfxs6kzpqpba2r0p89szxpx"></a>

| aller à la page                    | aller à la page lorsqu'un élément est cliqué                                                            |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------- |
| ajouter\_un\_article\_au\_panier   | add\_to\_cart\_item lorsqu'un article est ajouté au panier dans une recommandation                      |
| ajouter\_des\_articles\_au\_panier | add\_to\_cart\_items lorsque tous les articles recommandés sont ajoutés au panier (comme dans les lots) |
| fermer                             | Fermer lorsqu'une expérience est fermée                                                                 |
| convertir\_XXX                     | lorsqu'un bouton de conversion est cliqué (XXX peut être n'importe quoi)                                |

La balise Recos détecte l'envoi d'un événement d'affichage dès qu'un élément avec un attribut data-reco-id est attaché au DOM. Si cet élément est vide au début et rempli d'éléments uniquement plus tard, la balise Recos enverra un événement sans aucun item\_id.\
Si vous prévoyez de remplir la bannière avec des éléments de manière asynchrone, vous devez ajouter l'attribut data-reco-id uniquement à la toute fin

## Assurance qualité <a href="#h_01jhfy8zej8qrqaz9nfs4wzwyx" id="h_01jhfy8zej8qrqaz9nfs4wzwyx"></a>

* Une fois que le div avec le **data-reco-id=\[RECO\_ID]** est apparu, vous devriez voir un événement **d'affichage** lors de la saisie dans votre **couche de données de console**

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

* Une fois qu'un div avec un attribut **data-reco-click=\[ACTION\_ID]** a cliqué, vous devriez voir l'événement suivant lors de la saisie dans votre **couche de données de console**

```
{ 
"event": "ab_recos_[uuid]", 
"recos": { 
"reco_id": "[RECO_ID]", 
"action_id": "[ACTION_ID]", 
"item_id": "21222", // l'ITEM_ID concerné par le clic 
"item_ids": "[\"21222\",\"12073\",\"21464\",\"6762\"]", // un tableau strignifié de tous les ITEM_ID de la reco 
"debug_mode": false, 
"non_interaction": false 
}, 
"gtm.uniqueEventId": 17 
}
```

Lorsque vous tapez dans votre console

```
console.log(couche de données)
```

## Exemple <a href="#h_01jhfydrs5ax0g3x8pwa4wvxx2" id="h_01jhfydrs5ax0g3x8pwa4wvxx2"></a>

Le code HTML enrichi suivant

```
<div 
data-reco-debug="true" 
data-reco-id="082ecd63-84ec-4f48-90ce-12271d456020" 
> 
<div 
data-reco-click="aller_à_la_page" 
data-item-id="X23" 
> 
... 
<button data-reco-click="ajouter_au_panier_article"></button> 
</div> 
<div 
data-reco-click="aller_à_la_page" 
data-item-id="Y47" 
> 
... 
<button data-reco-click="ajouter_au_panier_article"></button> </div> 
</div>
```

Enverra des événements

* Lorsque l' élément **data-reco-id="082ecd63-84ec-4f48-90ce-12271d456020"** apparaît dans le DOM, l'événement suivant est poussé dans le 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 // car data-reco-debug est défini sur true 
} 
]);
```

* When the **buttondata-reco-click=add\_to\_cart\_item** is clicked, the following event is pushed in the DataLayer

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

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


---

# 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_deprecated/recommendations/recommendation-banner/introduction/enriching-recommendations-banner-html-to-send-events-to-datalayer-through-recos-tag.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.