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

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