AdBlock et Google Analytics / Google Tag Manager

Lors de l’un de mes cours j’ai demandé à une classe d’une quarantaine d’étudiants combien d’entre eux utilisent AdBlock. Plus de 90% d’entre eux ont levé la main, sachant que les timides ne participent jamais à ce genre de sondage vous pouvez imaginer l’impact en terme de perte de revenu publicitaire.

Avec et sans AdBlock

Voici ce à quoi ressemble un site sans AdBlock :

Screenshot 2015-12-29 at 23.22.58

Voici ce à quoi ressemble un site avec AdBlock :

Screenshot 2015-12-29 at 23.46.31

 

Pour des sites qui ne vivent que de la publicité, les utilisateurs possédant AdBlock deviennent d’une certaine manière un trafic sans valeur (même si ce n’est pas exactement vrai car ils peuvent toujours laissés des commentaires ou effectuer des actions similaires). Dans tous les cas chaque seconde, chaque minute qui passent sont potentiellement des précieux centimes qui s’envolent. Le but de ce tutoriel est de vous montrer comment mettre en place un tracking dans Google Tag Manager pour suivre cette activité.

Le tracking d’AdBlock via Google Tag Manager

J’étais chez un client et ai réalisé qu’il y avait forcément quelqu’un à l’autre bout de la planète qui avait déjà planché sur la problématique de ce suivi. Et en effet le voici : Marthijn Hoiting. J’aime beaucoup sa technique car elle est droit au but. Il en existe également sur Google Analytics version classique et Universal Analytics mais elles nécessitent naturellement de mettre les mains dans le code. A noter que Stéphane Bour propose une technique via PHP qui lui permet d’avoir le compte réel de personnes utilisant AdBlock. En effet AdBlock pouvant être configuré dans certains cas pour bloquer Google Analytics la technique présenté dans ce tutoriel ne comptabilisera pas tous les utilisateurs utilisant AdBlock.

Pour mettre en place le suivi des personnes utilisant AdBlock il vous suivi de créer une balise HTML personnalisée, de copier/coller le code suivant et de le déclencher sur toutes les pages de votre site :

<div id="bottomAd" style="font-size: 2px;">&nbsp;</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

$(document).ready( function() {
  window.setTimeout( function() 
  {
    var bottomad = $('#bottomAd');

    if (bottomad.length == 1) 
    {
      if (bottomad.height() == 0) 
      {
        dataLayer.push({'event': 'adBlock', 'adBlockDetected': 1 });
      } 
      else 
      {
        dataLayer.push({'event': 'adBlock', 'adBlockDetected': 0 });
      }
    }      
  }, 1);
});

</script>

En gros si AdBlock est détecté alors on envoi la valeur 1 au dataLayer sinon on lui met un beau 0, pour vérifier si cela marche une fois publiée vous pouvez le vérifier directement dans la console de Chrome :

Screenshot 2015-12-30 at 10.24.37

A partir de là vous êtes libres de travailler comme bon vous semble pour remonter la donnée dans Google Analytics. Dans mon cas de figure on va reprendre ce qu’avait indiqué l’auteur originel, soit création de la variable :

Screenshot 2015-12-30 at 10.29.21

Puis définition d’un déclencheur en fonction de l’événement personnalisé généré par le dataLayer de la balise HTML personnalisée :

Screenshot 2015-12-30 at 10.32.40

Bon après l’auteur part sur la création d’une dimension personnalisée, dans mon cas je vais partir sur un événement Google Analytics qui ne déclenche pas d’interaction afin de faire remonter l’information en temps réel. Disons que le tutoriel d’origine est plus propre et je vous conseille de le suivre car il marche très bien, la preuve 😛 :

Screenshot 2015-12-30 at 10.44.01

 

Confidentialité des Données Mentions Légales CGV