Comment puis-je utiliser des événements personnalisés dans la gestion dynamique des balises (DTM) ?

Rechercher

Dernière mise à jour le 1 mai 2021

Ce document décrit comment utiliser les événements personnalisés de votre site web pour déclencher une règle de la gestion dynamique des balises.

Événements du navigateur

Un événement est un signal indiquant que quelque chose s’est produit sur la page web. Les développeurs peuvent utiliser ces signaux pour réagir ou entreprendre une action.

Vous devez concevoir un événement comme une onde radio. Les ondes radios sont une diffusion que tout le monde peut entendre, mais vous devez trouver la bonne fréquence pour les écouter. Si vous diffusez et que personne n’écoute, aucun mal n’est fait. Il en va de même pour les événements : vous pouvez déclencher un événement qui ne générera pas d’erreur si rien, ni personne ne l’écoute. Vous pouvez également écouter un événement qui ne se produit jamais sans que cela ne génère de problème ou d’erreur.

Plusieurs ressources présentent les événements HTML :

Utilisation de règles basées sur des événements dans la gestion dynamique des balises

Lors de la création d’une règle basée sur un événement, vous pouvez la configurer pour des événements par défaut spécifiques. Chaque navigateur comporte des événements par défaut déclenchés par certaines actions, par exemple les suivantes :

Clics de souris
Survols de la souris (la souris pointe sur un élément de la page)
Mise au point sur un champ de formulaire (le curseur se déplace à l’intérieur d’un champ de formulaire)
Effet de flou sur un champ de formulaire (le curseur quitte un champ de formulaire)
Envoi de formulaires

Ces événements sont logiques ; ils sont effectués chaque jour sur le web. Si les événements par défaut du navigateur ne vous permettent pas d’effectuer le suivi des éléments souhaités, vous pouvez utiliser les événements JavaScript.

Quels événements sont intégrés dans la gestion dynamique des balises ?

Les événements suivants sont intégrés dans les règles basées sur des événements de la gestion dynamique des balises :

Souris	Clavier	Forums	Vidéo HTML 5	Mobile	Autre
click mouseover	keypress	focus blur submit change	ended loadeddata play pause stalled volumechange % complete time complete	orientationchange zoomchange	custom enters viewport element exists pushState ou hashchange

Événements personnalisés

Pour pouvoir écouter un événement, vous devez tout d’abord en déclencher un. Les événements sont définis dans le code du site par vos développeurs. Identifier quand et où utiliser un événement peut être un peu délicat. Une règle générale simple : si vous souhaitez effectuer le suivi d’un élément et que vous ne pouvez pas le faire avec un type d’événement DTM prédéfini, utilisez un événement personnalisé.

Déclenchement d’un événement

Considérez l’exemple suivant avec un événement personnalisé, puisqu’il vous permet d’ajouter des données. Disons que vous avez un panier, et qu’il utilise AJAX chaque fois que vous y ajoutez quelque chose. Une nouvelle page ne se charge pas ; à la place, une fenêtre contextuelle ou un message vous informe qu’un élément a été ajouté au panier. Lorsque cela se produit, vous pouvez créer un événement personnalisé qui vous indique exactement ce qui a été ajouté :

var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);

Le code ci-dessus fait référence aux données d’un objet appelé « data ». Les données « detail » personnalisées sont définies comme un objet auquel vous pouvez alors faire référence lors de l’écoute de l’événement. Après avoir généré l’événement, vous le déclenchez ensuite sur un élément spécifique, dans ce cas, un élément sur la page avec l’identifiant « minicart ». Vous disposez maintenant d’un événement personnalisé qui diffuse pour quiconque veut l’écouter.

Ajout d’un écouteur d’événements personnalisés

Dans la gestion dynamique des balises, l’ajout d’un écouteur d’événements personnalisés est aussi simple que d’ajouter une règle basée sur un événement.

Les étapes suivantes configurent une règle pour écouter dans la gestion dynamique des balises :

Ajoutez une règle basée sur un événement.
Donnez-lui un nom.
Sélectionnez le type d’événement personnalisé, puis saisissez le nom de l’événement, qui a été défini en tant que addToCart dans l’exemple ci-dessus.
Définissez la balise ou l’élément qui va comporter cet événement. En utilisant des sélecteurs CSS, il s’agit de #minicart.
Configurez la règle permettant de déclencher les balises appropriées.

Vous avez des questions ?

En cas de questions sur ce document ou d’autres sujets relatifs à la gestion dynamique des balises, visitez les forums de la communauté de la gestion dynamique des balises. Vous pouvez utiliser le forum pour poser des questions, participer à des discussions et rester à jour pour chaque solution.

Merci à Adam de Disruptive Advertising pour nous avoir autorisé à utiliser des parties de son blog pour ce document.