La semaine dernière, l'équipe vedette d'Adobe Dynamic Tag Management a ajouté de nouvelles fonctionnalités attrayantes aux règles basées sur les événements de DTM. Il existe 2 nouveaux types d'événements pour les règles basées sur les événements que vous pouvez utiliser.

1. Coutume
2. pushState ou changement de hachage

Lisez les sections ci-dessous pour plus d'informations sur chaque type d'événement.

Règle basée sur les événements : personnalisée

Commençons par définir un événement personnalisé. Examinons quelques exemples d'autres règles basées sur des événements dans DTM. Vous trouverez ci-dessous la liste des types d'événements pour les règles basées sur les événements.

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 (même Internet Explorer) a des événements par défaut qui peuvent être déclenchés pour certaines actions. Certains des plus faciles sont :

• clics de souris
• survols de la souris (survoler quelque chose sur la page)
• focus sur un champ de formulaire (le curseur va à l'intérieur d'un champ de formulaire)
• le champ de formulaire est flou (le curseur quitte un champ de formulaire)
• formulaire soumis
• etc.

Tout cela a du sens; ce sont des choses que nous faisons tous les jours sur le Web. Parfois, vous devez suivre quelque chose et il est presque impossible de le faire correctement. C'est pourquoi j'aime utiliser les événements JavaScript. Considérez un événement comme des ondes radio. Ils sont diffusés pour que tout le monde puisse les entendre, mais vous devez vous brancher sur la bonne fréquence pour les entendre. Si vous diffusez et que personne n'écoute, ce n'est pas grave (ne le dites pas aux annonceurs radio). Même chose avec les événements : vous pouvez déclencher un événement et il ne causera aucun problème ou ne générera aucune erreur si quelque chose ne l'écoute pas. Et si vous écoutez un événement qui ne se produit jamais, cela ne causera pas non plus de problèmes ni ne générera d'erreurs.

Pourquoi est-ce important? L'une des anciennes méthodes de suivi des actions consistait à créer une fonction JavaScript personnalisée, puis à l'appeler, ou à implémenter un ensemble de code très spécifique qui est soit spécifique à un système de gestion de balises, soit à une autre base de code. Mais que se passe-t-il si cette fonction est en quelque sorte supprimée ou renommée ? Vous obtiendrez des erreurs JavaScript qui pourraient parfois casser un site. Les événements résolvent ce problème.

Si vous connaissez les règles d'appel direct de DTM, vous vous demandez peut-être "Pourquoi ne pas simplement utiliser une règle d'appel direct ?" Une question valable. Le problème est que les règles d'appel direct créent une dépendance vis-à-vis de DTM. Si je suis un développeur et que quelqu'un me dit de mettre un tas de code faisant référence à _satellite.track dans mon code, je le remettrais en question et je dirais très probablement non ! Au lieu de cela, vous pouvez utiliser un événement, qui n'a pas de dépendances.

Pour pouvoir écouter un événement, vous devez d'abord en déclencher un. Les événements doivent être définis dans le code du site par vos développeurs. Identifier quand et où en utiliser un peut être un peu délicat, mais une règle simple est que si c'est quelque chose que vous voulez suivre, et que vous ne pouvez pas le suivre avec un type d'événement DTM prédéfini, utilisez un événement personnalisé. Nous pouvons trouver de bonnes informations sur la façon de procéder auprès de Mozilla. Il existe 2 types d'événements de base :

• Événement - déclencher que quelque chose s'est passé sans envoyer de données supplémentaires sur l'événement
• CustomEvent - ajouter des données à l'événement

Je vais utiliser un exemple avec un événement personnalisé, car ils vous permettent d'ajouter des données. Disons que nous avons un panier d'achat et que lorsque vous ajoutez quelque chose au panier, il utilise AJAX. Cela signifie qu'une nouvelle page ne se charge pas, mais qu'il peut y avoir une fenêtre contextuelle ou un message vous informant qu'un article a été ajouté au panier. Lorsque cela se produit, je peux créer un événement personnalisé qui m'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);

Dans le code ci-dessus, vous pouvez voir que je fais référence aux données d'un objet nommé "data". Je définis les données « détaillées » personnalisées en tant qu'objet, auquel je peux ensuite faire référence lors de l'écoute de l'événement. Après avoir construit l'événement, je le déclenche ensuite sur un élément spécifique, en l'occurrence un élément de la page avec l'id "minicart". Maintenant, j'ai un événement personnalisé qui diffuse pour tous ceux qui veulent écouter.

Ensuite, je vais configurer une règle pour écouter dans DTM :

1. Ajouter une nouvelle règle basée sur les événements
2. Donne lui un nom
3. Sélectionnez le type d'événement "personnalisé" et entrez le nom de l'événement, que nous avons défini comme "addToCart"
   
4. Définissez la balise ou l'élément qui va avoir cet événement. En utilisant les sélecteurs CSS, ce sera "#minicart"
   
5. Configurez la règle. C'est là que ça devient cool. Vous pouvez utiliser le "détail" fourni dans l'événement et même l'utiliser comme objet. MERCI ADOBE ! Ici, j'envoie un événement Google Analytics avec les données que je veux. Vous pouvez référencer les données en utilisant %event.detail%, ou si vous avez un objet, vous pouvez le référencer en tant que %event.detail.<<name>>%. Voir l'exemple ci-dessous.
   
   Je n'enverrais probablement jamais un événement comme celui-ci, mais vous comprenez comment il peut être utilisé. Et si vous avez besoin de l'utiliser dans un code personnalisé, disons pour l'outil Adobe Analytics, vous pouvez le référencer en tant que _satellite.getVar(“%event.detail.product_id%”). SAUCE EXTRAORDINNAIRE!!!

Ce n'était pas censé être un roman, mais je voulais montrer à quel point cette fonctionnalité est géniale. Même si j'aime les règles d'appel direct, elles passent au second plan dans mes implémentations et les événements personnalisés sont des fusils de chasse.

pushState ou changement de hachage

pushState

Regardons maintenant pushState. Il vous permet essentiellement de mettre à jour l'URL de la page/du site sans avoir à charger une nouvelle page. En soi, cela ne fait rien, mais cela permet d'utiliser des applications d'une seule page. Il existe plusieurs frameworks qui tirent parti de cette fonctionnalité. Donc, si votre site est construit comme ça, la fonctionnalité pushState peut être vraiment pratique !

Lors de la configuration de la règle, vous sélectionnerez bien sûr le nouveau type d'événement.

Aucun sélecteur CSS n'est nécessaire pour le définir davantage. Cependant, vous allez vouloir regarder quelques conditions. Le principal que vous utiliserez, si vous ne regardez que la nouvelle URL, est le chemin. C'est ça!

changement de hachage

Grâce à Twitter, nous savons tous ce qu'est un hachage (tags de hachage), donc hashchange doit faire référence à une modification du hachage ! Ce qui est cool avec le hachage, c'est que vous pouvez le changer autant que vous voulez et que cela ne charge pas la page. Les hachages peuvent être utilisés à de nombreuses fins, nous n'entrerons donc pas dans les raisons pour lesquelles quelqu'un aurait cela. Avant que pushState ne soit là, il n'était pas rare de mettre à jour le hachage avec du nouveau contenu pour AJAXy ou des sites à page unique.

Pour configurer une nouvelle règle, sélectionnez le même type d'événement que pushState. La seule différence est que vous pouvez maintenant considérer le hachage comme critère. Par exemple:

Conclusion

Adobe DTM est le meilleur système de gestion de balises, et heureusement pour vous clients Adobe, c'est gratuit ! Utilisez ces conseils utiles pour vous aider à tirer parti de sa puissance et de son potentiel, et revenez souvent pour en savoir plus ! Si vous cherchez de l'aide pour l'analyse de votre site Web, contactez-nous et nous vous enverrons une proposition gratuite sur la façon dont nous pouvons vous aider !