Avec la bonne configuration de votre HTML, Recos Tag enverra des événements automatiquement en détectant simplement les attributs dans votre HTML
Installation
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
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é
- 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
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