Écouteurs d’événements personnalisés pour GTM

(MISE À JOUR 1 octobre 2014 En raison d’un changement dans le fonctionnement des macros en mode débogage, la macro {{gestionnaire d’événements génériques}} ne fonctionne plus lors des tests en mode débogage. Cela signifie que vous devrez tester votre écouteur personnalisé dans un conteneur en direct (je sais, aïe !). Si vous souhaitez tester en mode débogage, vous devrez ignorer l’utilisation du {{gestionnaire d’événements génériques}} en tant que macro et copier à la place la fonction interne dans la balise HTML personnalisée, donner un nom à la fonction et l’utiliser comme le rappel dans addEventListener ou alors attachEvent.

Aussi, pour préserver le “gtm.” espace de noms pour les fonctionnalités GTM natives uniquement, j’ai changé le préfixe du nom de l’événement personnalisé de “gtm”. à ‘événement.’)

Lorsque les bonnes gens de Mountain View ont introduit le suivi automatique des événements pour Google Tag Manager, un soupir collectif a été entendu dans le monde entier (j’exagère juste un peu).

Enfin, la véritable puissance de GTM a été libérée.

Avec le suivi automatique des événements, l’un des aspects les plus difficiles de l’analyse Web, le suivi des interactions des utilisateurs au-delà du chargement de la page, a été considérablement simplifié.

Cependant, en tant qu’espèce, nous sommes dans un état perpétuel d’insatisfaction.

Lorsque nous avons eu le clic, le clic sur le lien et la soumission du formulaire, nous en voulions plus. Alors nous avons eu l’écouteur History. Encore une fois, nous en voulions plus. Et nous avons obtenu l’écouteur d’erreur. Et puis nous en voulions encore plus.

Pour satisfaire cette soif éternelle de plus d’auditeurs, la communauté a été d’une grande aide. En fait, avant de poursuivre votre lecture, je souhaite que vous vous familiarisiez avec l’excellent article de Doug Hall sur l’extension des auditeurs d’événements automatiques de GTM. Le guide suivant développera les idées avancées par Doug, tout en s’efforçant d’approcher l’élégance de sa prose et sa sagesse.

J’ai également écrit de nombreux articles sur les auditeurs de GTM. Je les mettrai en lien à la fin de cet article.

Ce qui suit est un guide étape par étape pour créer un écouteur générique pour tous les différents événements que vous souhaitez capturer et qui sont pas encore capté par les propres auditeurs de GTM. Une fois que GTM introduit un écouteur propriétaire pour tout événement que vous souhaitez gérer, il serait préférable de commencer à l’utiliser.

Le prototype d’écouteur

Le prototype de l’écouteur d’événement personnalisé nécessitera deux composants :

1. Une balise HTML personnalisée pour chaque type d’écouteur que vous souhaitez activer (par exemple monnaie, se brouiller, copie)

2. Une macro JavaScript personnalisée générique, qui renvoie la fonction de gestionnaire qui pousse l’événement dans le dataLayer

Comme vous pouvez le voir, cela semble assez simple. Et c’est. Tant que vous respectez les modèles de conception appropriés et les meilleures pratiques, ces deux composants vous mèneront loin.

La macro de gestionnaire d’événements générique

Commençons par la macro, car c’est le composant vraiment générique ici.

La macro retourne une fonction, qui sert de gestionnaire pour l’écouteur que vous allez créer à l’étape suivante. Pour que cette fonction soit la plus générique possible, elle sera agnostique quant à la nature de l’événement. Il le fera en acceptant l’objet Event comme paramètre et en l’analysant pour toutes les données dont il a besoin.

Il est plus facile de montrer que de dire, alors voici le code à copier-coller :

Nom de la macro: {{gestionnaire d’événement générique}}
Type de macro: JavaScript personnalisé

function() {   return function(e) {     dataLayer.push({       'event': 'event.'+e.type,       'gtm.element': e.target,       'gtm.elementClasses': e.target.className || '',       'gtm.elementId': e.target.id || '',       'gtm.elementTarget': e.target.target || '',       'gtm.elementUrl': e.target.href || e.target.action || '',       'gtm.originalEvent': e     });   } } 

Ceci, à mon avis, est une émulation assez proche du fonctionnement des auditeurs de GTM. Ce qui est important, c’est que l’objet poussé dans dataLayer fasse de son mieux pour imiter le modèle de conception des propres écouteurs de GTM.

Passons en revue le code ligne par ligne.

return function(e) { ... } est l’emballage. Le point ici est que cette macro doit retourner une fonction, puisque l’écouteur que nous allons créer dans le chapitre suivant nécessite une fonction ou un objet en tant que paramètre. Si la macro ne renvoyait pas de fonction mais exécutait plutôt le code lui-même, vous enverriez des événements vides étranges à chaque fois que la balise d’écouteur est écrite dans le modèle de page.

dataLayer.push({ ... }); c’est là que la magie opère. Ici, l’événement déclenché est poussé dans dataLayer en observant les modèles de conception des propres écouteurs de GTM. Maintenant, vous pouvez observer ces modèles si vous le souhaitez, ou vous pouvez utiliser votre propre syntaxe. Je suis un grand fan de symétrie, c’est pourquoi je préfère suivre la syntaxe de GTM. Cela peut entraîner des conflits si GTM introduit un écouteur d’événement similaire prêt à l’emploi, mais dans ce cas, ce serait quand même une bonne idée de migrer vers cet écouteur propriétaire.

'event': 'event.'+e.type, insère une valeur dans la variable de couche de données ‘event’. Il faut le type propriété de l’objet événement, qui est une chaîne représentant le type d’écouteur qui a été déclenché, par exemple “modifier”, “flou”, “copier”. Donc, si l’événement était de type monnaiecette poussée ressemblerait en fait à : 'event': 'event.change'. (Au fait, vous vous souvenez de la E-Type ?)

'gtm.element': e.target, pousse l’élément sur lequel l’événement s’est produit dans la variable dataLayer ‘gtm.element’. Il s’agit d’un modèle de conception, et si vous regardez vos auditeurs de clic et les auditeurs de clic de lien, un objet similaire est toujours trouvé dans ceux-ci également. L’idée ici est que vous pouvez ensuite utiliser votre macro variable de couche de données pour explorer les propriétés de cet objet ‘gtm.element’ si vous souhaitez approfondir le DOM.

'gtm.elementClasses': e.target.className || '', pousse la classe de la cible de l’événement dans la variable ‘gtm.elementClasses’. S’il n’y a pas de classe sur l’objet HTML, une chaîne vide est poussée à la place.

'gtm.elementId': e.target.id || '', pousse l’ID de la cible de l’événement dans la variable ‘gtm.elementId’. S’il n’y a pas d’ID sur l’objet HTML, une chaîne vide est poussée à la place.

'gtm.elementTarget': e.target.target || '', pousse la cible de la cible de l’événement (semble bizarre) dans la variable ‘gtm.elementTarget’. S’il n’y a pas d’attribut cible sur l’objet HTML, une chaîne vide est poussée à la place.

'gtm.elementUrl': e.target.href || e.target.action || '', insère l’attribut href ou l’attribut action de la cible de l’événement dans la variable ‘gtm.elementUrl’. S’il n’y a pas de tels attributs sur l’objet HTML, une chaîne vide est poussée à la place.

'gtm.originalEvent': e est mon propre ajout à ce modèle de conception. De temps en temps, vous voudrez peut-être accéder à l’événement original, exposé par les auditeurs. Avec les écouteurs prêts à l’emploi de GTM, cela n’est actuellement pas possible, car ils n’exposent que le e.target propriété de cet objet événement. Cependant, surtout si vous voulez faire des choses comme identifier les clics créés par le code et non par l’utilisateur, l’accès à l’objet événement est indispensable. J’espère que ce sera également une fonctionnalité standard dans les propres auditeurs de GTM.

Voilà à quoi ressemble la macro. Il est possible que certains des modèles nécessitent plus de travail, et rien ne vous empêche d’étendre le nombre de variables qui sont poussées dans le dataLayer. Je considère que ces variables sont les le minimum dont vous aurez besoin afin de fournir suffisamment d’informations pour vos balises tout en restant économique et soucieux des meilleures pratiques.

La balise d’écoute

Maintenant que nous avons notre gestionnaire d’événements générique, l’étape suivante consiste à créer une balise qui configure l’écouteur. La clé ici est de reconnaître exactement quel écouteur vous souhaitez configurer. De plus, par souci de symétrie, je ne montrerai que comment amorcer l’écouteur d’événement sur le document node, car c’est la manière générique ET la manière dont fonctionnent les auditeurs propriétaires de GTM. Si vous le souhaitez, vous pouvez attacher les écouteurs à des nœuds DOM spécifiques, ce qui réduit le risque de problèmes de propagation, mais en tant que solution, il ne sera plus aussi générique.

Tout d’abord, voici le code d’écoute lui-même. Mettez ceci dans une balise HTML personnalisée et ajoutez une règle de déclenchement qui utilise soit {{event}} est égal à gtm.js si vous attachez l’écouteur sur le document nœud, ou {{event}} est égal à gtm.dom si vous écoutez des éléments HTML spécifiques.

<script>   (function() {     var eventType = "change"; // Modify this to reflect the event type you want to listen for     if (document.addEventListener) {        document.addEventListener(eventType, {{generic event handler}}, false);      } else if (document.attachEvent) {        document.attachEvent('on' + eventType, {{generic event handler}});      }   })(); </script>

Sur la première ligne, vous spécifiez simplement le type d’événement que vous souhaitez écouter. Pour la liste complète des types pris en charge, suivez ce lien. N’oubliez pas que vous pouvez également envoyer et écouter vos propres événements personnalisés, ce qui rend cette solution encore plus flexible. Voici l’excellent guide de MDN sur la création et le déclenchement d’événements.

Quoi qu’il en soit, voici une liste de certains des types d’événements les plus populaires :

• avant le déchargement – Lance un écouteur lorsque la fenêtre, le document et toutes les ressources sont sur le point d’être déchargés (par exemple, lorsque quelqu’un ferme la fenêtre du navigateur).

• se brouiller – Un élément a perdu le focus (par exemple, l’utilisateur a quitté un champ de formulaire). Notez que cela ne bouillonne pas par défaut, ce qui signifie qu’un auditeur sur le document node ne pourra pas l’attraper. Pour activer la délégation d’événement, vous devez définir le dernier paramètre dans le document.addEventListener() appeler pour vrai à la place de faux.

• monnaie – La valeur d’un élément change entre la réception et la perte du focus (par exemple, l’utilisateur entre dans un champ de formulaire, saisit quelque chose et quitte le champ).

• Cliquez sur – Un clic est enregistré sur un élément (utilisez plutôt le Click Listener de GTM).

• menu contextuel – Le bouton droit de la souris est cliqué.

• copie – Le texte est copié dans le presse-papiers.

• couper – Le texte est coupé dans le presse-papiers.

• dblclick – Un double-clic est enregistré sur un élément.

• se concentrer – Un élément a reçu le focus (par exemple, l’utilisateur a quitté un champ de formulaire). Notez que cela ne bouillonne pas par défaut, ce qui signifie qu’un auditeur sur le document node ne pourra pas l’attraper. Pour activer la délégation d’événement, vous devez définir le dernier paramètre dans le document.addEventListener() appeler pour vrai à la place de faux.

• touche Bas – Une touche est enfoncée.

• keyup – Une touche enfoncée est relâchée.

• souris vers le bas – Le bouton de la souris est enfoncé.

• mouseenter – Le pointeur de la souris est déplacé sur l’élément auquel l’écouteur est attaché. Ne fonctionnera pas vraiment si l’auditeur est sur le document nœud.

• congé de souris – Le pointeur de la souris est déplacé hors de l’élément auquel l’écouteur est attaché. Ne fonctionnera pas vraiment si l’auditeur est sur le document nœud.

• mouseout – Le pointeur de la souris est déplacé hors de l’élément auquel l’écouteur est attaché ou l’un de ses enfants.

• survol de la souris – Le pointeur de la souris est déplacé sur l’élément auquel est attaché l’écouteur ou l’un de ses enfants.

• souris vers le haut – Le bouton enfoncé de la souris est relâché.

• changement d’orientation – L’orientation (portrait/paysage) de l’écran change.

• réinitialiser – Un formulaire est réinitialisé.

• faire défiler – Une vue ou un élément de document défile.

• nous faire parvenir – Une soumission de formulaire est enregistrée (utilisez plutôt l’écouteur de soumission de formulaire de GTM).

Lorsque la balise HTML personnalisée est écrite sur la page, elle attache l’écouteur de votre choix sur le nœud du document. Le gestionnaire d’événements est la fonction de gestionnaire d’événements générique que vous avez créée au chapitre précédent. Ensuite, lorsque l’événement se produit, la fonction est exécutée avec l’objet événement comme paramètre. Cet objet d’événement est ensuite analysé et poussé dans dataLayer avec un tas de propriétés auxquelles vous pouvez accéder avec la macro variable de couche de données.

Exemple avec le Change Listener

Voici un exemple simple. J’ai des champs de formulaire sur une page Web. Chaque fois qu’une valeur d’un champ de formulaire change, c’est-à-dire qu’un utilisateur y écrit / modifie / supprime du texte, je souhaite pousser une page virtuelle avec le chemin de l’URL /formulaire/(nom-champ)-(valeur-champ). Donc, si le nom du champ de formulaire est “recherche” et que la valeur est “GTM”, je veux envoyer la page vue virtuelle avec le chemin /formulaire/recherche-GTM.

Alors, commençons. J’ai mon {{gestionnaire d’événement générique}} macro que j’ai créée plus tôt, et ma balise Change Listener se déclenche {{event}} est égal à gtm.js comme vous pouvez le voir:

Ensuite, je devrai créer deux nouvelles macros variables de couche de données pour capturer respectivement le nom du champ et la valeur du champ. Tout d’abord, voici la macro variable de la couche de données {{nom de domaine}}:

Comme vous pouvez le voir, j’utilise “(non défini)” comme espace réservé si le champ n’a pas d’attribut de nom.

Et voici la macro variable de la couche de données {{valeur du champ}} pour la valeur du champ :

Encore une fois, j’utilise “(not set)” si le champ n’a pas de valeur.

Enfin, j’aurai besoin de ma balise de page vue virtuelle. Il s’agit simplement d’une balise de page vue Universal Analytics normale, mais elle utilise le Chemin du document domaine. De plus, la règle de déclenchement de cette balise doit être {{event}} est égal à event.changede sorte que la balise ne se déclenche que lorsqu’un événement ‘change’ est enregistré par l’écouteur personnalisé.

Je concatène la chaîne “/form/{{nom du champ}}-{{valeur du champ}}”, puisque les macros sont résolues au moment de l’exécution, et je me retrouverai avec un chemin d’URL agréable et propre.

Je parviens à tester cela en direct en tapant du texte dans le champ de recherche et en quittant le champ. L’écouteur event.change se déclenche et mon panneau de débogage indique que le chemin du document a été traité correctement :

Naturellement, n’oubliez pas de vérifier le rapport en temps réel de GA pour vérifier que les données circulent correctement.

conclusion

Cet article concernait la création d’un gestionnaire d’événements générique pour tous vos besoins d’écoute personnalisés. Je vous invite à explorer au-delà des configurations prêtes à l’emploi fournies par GTM. Cependant, une fois qu’il y a chevauchement avec les fonctionnalités de GTM, je vous suggère fortement de tirer parti des propres auditeurs du gestionnaire de balises, car cela garantira qu’ils resteront à jour avec d’éventuels changements sous le capot. Je vous recommande également d’essayer d’observer les meilleures pratiques et d’imiter au mieux les modèles de conception de GTM.

Comme je l’ai dit, j’ai beaucoup écrit sur les auditeurs de GTM dans divers articles. Voici quelques guides que vous aimerez peut-être également lire :

Pourquoi mes auditeurs GTM ne fonctionnent-ils pas ? C’est toujours l’une des questions les plus posées que je reçois. S’il vous plaît, lisez ce message. Vous en apprendrez davantage sur la délégation d’événements et pourquoi si souvent le code interférant empêche les événements de remonter jusqu’aux auditeurs de GTM. Voici une diatribe plus récente sur le sujet : Ma diatribe Google+.

Google Tag Manager : L’écouteur DOM Vous pouvez utiliser MutationObserver pour écouter les changements sur la page qui se produisent sans déclenchement d’événement réel ni rafraîchissement de la page.

Google Tag Manager : L’écouteur d’historique Un examen de l’écouteur d’historique de GTM.

De plus, je fais allusion aux auditeurs dans la plupart de mes messages Google Tag Manager, alors assurez-vous de lire le reste si vous avez le temps.

C’était un guide long et plutôt avancé. Allez manger une glace, vous l’avez bien méritée !