Comment tracker vos lecteurs avec le Groupe de déclencheurs Google Tag Manager.

Franck Scandolera

Ecoutez vos lecteurs avec le Groupe de déclencheurs Google Tag Manager !

Il arrive parfois qu’on souhaite déclencher une balise à partir de plusieurs événements. Par exemple pour tracker les lecteurs de contenu, on pourrait déclencher une balise event GA « reader » quand le contenu est scrollé à plus de 75% et que la durée sur la page est supérieure au temps de lecture moyen du contenu.

La mesure serait basée sur 2 événements, le scroll et la durée sur une page contenu. Pour écouter la réalisation de ces deux événements on peut utiliser un Groupe de déclencheurs. Google Tag Manager activera le Groupe de déclencheurs dès lors que les déclencheurs groupés auront été déclenchés au moins une fois. 

Comment créer un Groupe de déclencheurs Google Tag Manager ?

La création d’un groupe de déclencheur est très simple car il s’agit de préciser les déclencheurs existants qu’on souhaite regrouper.

Pour illustrer la mise en oeuvre d’un groupe de déclencheurs, je vous propose de mettre en place le tracking des lecteurs des articles du site formations-analytics.com/blog.

Création de l’éventement GA « Reader ».

Le but est de créer un événement Google Analytics « Reader » pour tracker le comportement « lecteur » des articles. La mesure de lecture est basé sur un niveau de scroll supérieur à 75% et une durée sur la page supérieur au temps de lecture moyen. 

Trigger « scroll depth 75 ».

Ici, rien de compliqué, il suffit de créer un déclencheur basé sur l’événement « Scroll Depth » en précisant le seuil de 75.

Important, le groupe de déclencheurs ne se déclenche qu’une seule fois par page, quand tous les déclencheurs regroupés ont été déclenchés et cela même s’ils se déclenchent à nouveau.

Par exemple, s’il était précisé d’autre seuils, comme 25%, 50%, 75% le déclencheur regroupé aurait été activé au premier seuil, 25% au lieu des 75%.

Trigger « event reading ».

Ce déclencheur est plus complexe, car il est basé sur un JavaScript, qui va calculer la durée moyenne de lecture de l’article puis déclencher un event personnalisé « reading » dès que la durée moyenne de lecture aura été atteinte.

Balise HTML « html utility event reading ».

<script>
(function(){
try{
  /***  récupération du contenu ("body.wdml-post-content") des pages article "div.single-post" ***/  
  var el_content = document.querySelector("body.single-post div.wdml-post-content");

  if(el_content){

    /***  Découpage du contenu en mots en les isolants grâce aux espaces utilisés comme séparateur dans la méthode split. Elle stockera dans un tableau tous les items qui se trouvaient entre des espaces. ***/
    var el_content_words = el_content.innerText.split(' '); 

    /*** Le nombre d'élément du tableau est divisé par 200 pour obtenir la durée moyenne de lecture. Pour faciliter les traitements suivants, le résultat est arrondi via la méthode Math.round. ***/
	
    var el_content_time_to_read = Math.round(el_content_words.length/200);

    /*** Le résultat est converti en millisecondes. On pourrait multiplier le résultat par 0.80 pour créer un seuil de 80% du temps lecture moyenne. ***/
var el_content_time_to_read_millisecondes = el_content_time_to_read * 60 * 1000;

	/*** La méthode setTimeout déclenchera l'event personnalisé dès que la durée de lecture moyenne en milliseconde "el_content_time_to_read_millisecondes" sera atteinte. ***/

    var st = setTimeout(function(){
    dataLayer.push({
    'event':'reading'
    })    
    },el_content_time_to_read_millisecondes)    
  }  
}  catch(e){}
})();
</script>

La balise HTML est déclenché sur toutes les pages « article ».

En complément des commentaires dans le script, voici quelques explications complémentaire. On commence par récupérer le contenu du div de l’article via une expression Selector CSS. Puis on utilise la méthode « split » pour découper le contenu à partir des espaces et remplir un tableau avec toutes les occurrences qui corresponde aux « mots ».

Pour calculer la durée moyenne il est entendu qu’on peut lire en moyenne 200 mots par minute. La durée moyenne du contenu actif est donc la division du nombre d’items du tableau divisé par 200. Le tout arrondi pour faciliter le calcul et stocké dans la variable el_content_time_to_read.

Pour s’assurer de la durée de lecture, on fait appel à une autre méthode, setTimeout qui permet d’activer une fonction après une certaine durée en millisecondes. Dans notre cas, la durée de déclenchement du dataLayer est celle du temps de lecture moyen en milliseconde stocké dans la variable el_content_time_to_read_millisecondes.

Déclencheur « Groupe de déclencheurs ».

Créez un déclencheur de type « événement personnalisé » pour utiliser l’event « reading » qu’on vient de créer dans le script.

Maintenant que la matière première est disponible, à savoir les déclencheurs « scroll depth 75% » et « event reading », on va pouvoir créer le Groupe de déclencheur « gpe events reader ».

Utilisez le Groupe de déclencheur « gpe events reader » pour activer une balise GA Event Reader, avec par exemple les paramètres event category : « user type » et event action : « reader ».

En conclusion, le Groupe de déclencheurs est très utile, aussi bien pour produire de nouvelle mesure, comme on vient de le voir, mais également pour contourner des problèmes de disponibilité de variable de dataLayers.