Précisez vos indicateurs en mesurant les éléments selon leur visibilité.
« Toute chose doit être vue pour être utilisée ou lue ». Une évidence qu’on devrait prendre en compte pour préciser nos mesures Analytics. Par exemple, pour calculer le taux de clic d’une promo « x » sur les pages vues de la home « y », on va diviser x par y – (x/y)*100. Si au chargement de la page, la promo en question est visible dans la fenêtre d’affichage (viewport), pas de problème, la mesure est plutôt précise.
[su_pullquote]
Découvrez les Formations et Prestations du WebAnalyste.
- Formation : Google Tag Manager
- Prestation : Plan De Taggage Google Analytics, Google Tag Manager
- Prestation : Configuration Google Tag Manager/Analytics
[/su_pullquote]
Mais si la promo est positionnée en dessous de la ligne de flottaison, la mesure sera peu précise. Comment considérer quelque chose qui n’a pas été vu. Cela est également vrai pour mesurer l’usage d’une fonctionnalité ou CTA (bouton « call to action »).
« Ok Franck, ça fait sens, mais ça à l’air complexe à mettre en oeuvre »… « Détrompe-toi avec Google Tag Manager, c’est très simple. Tu peux même t’en charger sans déranger ton IT »… « Houlala, je demande qu’à voir ! »…. « Voyons ça tout de suite ! ».
Par exemple, sur mon site www.webanalyste.com, supposons que je souhaite mesurer transversalement (sur toutes les pages du site) l’impression des CTA « contact » (« DEMANDE D’INFORMATION ET DE DEVIS ») à chaque fois qu’ils sont « vus » pendant au moins 5 secondes.
Le but est de mesurer les impressions et les clics de chaque « CTA contact » avec un événement GA et une métrique personnalisée, qui me permettront de créer une métrique calculée, « CTR – CTA contact ».
Rendez dans Google Tag Manager pour mesurer la visibilité et les clics des CTA.
Le déclencheur Google Tag Manager, « visibilité de l’élément » (Element Visibility).
Voici le déclencheur GTM « Visibilité de l’élément », qui va nous aider à mesurer l’impression de chaque CTA « contact » visible.
En configurant correctement ce déclencheur, Google Tag Manager va vérifier la visibilité de l’élément DOM précisé dans le champ « sélecteur d’éléments ».
<div id="promo"><a class="cta" href="/contact"><img src="promo.gif" /></a></div>
Pour spécifier l’élément DOM, vous pouvez utiliser s’il existe son ID (« promo ») ou une expression CSS Selector. Je vous recommande de vous approprier par défaut le CSS Selector qui vous permet de préciser très finement un ou plusieurs éléments (RegEx du DOM).
Par exemple utilisez le CSS Selector pour cibler un ID = #promo ou bien plus globalement les images = img[src= »promo.gif »] ou encore les liens qui contiennent « contact » = [href*= »contact »]. Si ces quelques expressions ne vous semblent mystiques, faites un détour sur le site W3School pour apprendre les bases du CSS Selector.
Pour tracker tous les blocs contact sur mon site webanalyste.com, j’utilise l’expression CSS Selector div.swatch-bleuclairgrid > div > a[href*= »contact »].
Une fois que l’objet du désir est ciblé, il est temps d’aborder les options.
Quand exécuter ce déclencheur ?
- Une fois par page. Le déclencheur sera activé dès que le premier élément correspondant sera visible dans la fenêtre d’affichage (viewport).
- Une fois par élément. Avec le CSS Selector, chaque élément correspondant dans la page activera une fois le déclencheur la première fois où il sera visible dans la fenêtre d’affichage. Si plusieurs éléments d’une page ont le même ID, seul le premier élément correspondant activera le déclencheur (à moins qu’il ne soit ensuite supprimé par un changement DOM).
- Chaque fois que l’élément apparaît à l’écran. Le déclencheur sera activé chaque fois que l’élément correspondant sera visible dans la fenêtre d’affichage.
Dans mon exemple, c’est ce dernier mode que j’ai choisi pour mesurer le nombre total de vue du CTA « contact ». Chaque vue représente une occasion de clic !
Pour accentuer la notion d’élément « vu », j’ai conditionné le déclenchement avec une durée minimale d’exposition. Dans mon cas, j’estime que 5 secondes représente un seuil plutôt correct pour considérer que le CTA a été « vu » et « clickable » (à prononcer comme bankable).
Pourcentage visible minimal.
La dernière option consiste à déterminer le pourcentage minimum de visibilité de l’élément dans la fenêtre d’affichage avant d’activer le déclencheur. Dans l’exemple, 90 signifie 90%. En résumé dans notre exemple, au moins 90% de l’élément doit être visible dans la fenêtre pendant au moins 5 secondes pour activer le déclencheur.
Observer les modifications DOM
Cette précieuse option va demander à GTM de considérer également les nouveaux éléments qui ont été ajoutés dans le DOM après le chargement de la page. Indispensable pour tracker les éléments qui apparaissent dynamiquement dans la page, comme un popup, une alerte, un message de confirmation d’envoi de formulaire…
Le plus « dur » est fait, passons à la suite, utiliser ce déclencheur pour activer une balise GA event.
Configurer la balise Google Analytics Event « CTA View » avec une métrique personnalisée.
Commencer par configurer dans l’Admin de votre propriété Google Analytics une métrique personnalisée pour récupérer l’index de référence. Nommez-la (ex « CTA view ») , avec le scope « hit », de type « nombre entier » avec les valeurs min/max de 1.
Si besoin, consultez mon article « utilisez-vous vos statistiques personnalisées Google Analytics ? » pour en savoir plus sur l’usage des métriques personnalisées.
Dans Google Tag Manager, créer une balise Universal Analytics de type événement. Configurez la variable de configuration GA avec votre ID de suivi de votre propriété GA.
Renseignez les paramètres Category (ex. « cta »), Action (ex « view »), Value (ex 1) et surtout configurez l’option « Non-interaction » = TRUE (sinon, double hit minimum à chaque chargement de page et donc votre taux de rebond augmentera, diminuera légèrement ou bien s’écroulera ? – bonne réponse ——————————————————> 3 ).
Autoriser le remplacement des paramètres de cette balise GA pour configurer la métrique personnalisée. Renseignez le champ index avec la valeur correspondante dans Google Analytics et mettez 1 comme valeur pour incrémenter de 1 le compteur « CTA view ». Associez cette balise à notre déclencheur et la mesure des impressions visibles des CTA est terminée. A vous de tester.
Configurer la balise Google Analytics Event « CTA Click » avec une métrique personnalisée.
Commençons par le trigger, car tout commence par le trigger. Pour mon exemple, j’ai créé un déclencheur basé sur les clics « Liens uniquement ». Je demande à GTM d’écouter certains clics qui correspondent à la même expression CSS Selector que le déclencheur de visibilité, div.swatch-bleuclairgrid > div > a[href*= »contact »].
Pour la balise, n’hésitez pas à dupliquer « GA Event CTA View », celle utilisée pour mesurer les impressions des éléments vus. Adaptez les champs de la balise pour faire correspondre l’action de « View » à « Click » et enfin remplacez de déclencheur. Comme précédemment, configurez dans l’Admin de votre propriété Google Analytics une métrique personnalisée pour récupérer l’index de référence. Nommez-la (ex « CTA click ») , avec le scope « hit », de type « nombre entier » avec les valeurs min/max de 1. Modifiez dans la balise l’index de la métrique personnalisée, de celui qui compte les vues, à celui qui compte les clics.
Créer une métrique calculée pour créer le taux de clic de l’élément vu.
La partie sur Google Tag Manager est terminée. Dans l’Admin de Google Analytics, au niveau de la vue, éditez l’interface pour créer une « Statistiques calculées » (limité à 5 max). La formule pour calculer le taux de clics (CTR), il suffit de diviser la métrique personnalisée « clics » (numérateur) par la métrique personnalisée « vues » (dénominateur). Dans mon exemple, dans GA « {{cta contact click}} / {{cta contact viewed}} ».
Maintenant que vous avez un indicateur de référence, à vous d’améliorer le taux de clic (ou d’usage) sur les éléments visibles (ex. auto-promo, CTA, fonctionnalité) en capturant plus de clics ou bien en diminuant le nombre des éléments peu visibles. Voilà, c’est tout pour aujourd’hui. Les licornes peuvent continuer de se reproduire tranquillement.
