Mesurer l’impact des bloqueurs de publicités et de contenu

Ainsi, il semble qu’iOS 9 dispose d’un support intégré pour l’intégration d’extensions de “blocage de contenu” sur votre iPhone. Maintenant, bloquer les publicités et autres contenus intrusifs n’est pas nouveau, et je ne veux pas non plus entrer dans un débat pour savoir si c’est une bonne chose ou non. Mais en tant que geek des données, je suis très intéressé de savoir quelle part du suivi de mon site a un bloqueur de contenu activé. Dans cet article, je vais montrer deux astuces (faciles et avancées) pour exposer ces bloqueurs de contenu. C’est toujours une bonne idée de garder un œil sur les chiffres, surtout si vous craignez qu’ils bloquent également vos outils d’analyse (comme vous devriez l’être !).

Les deux solutions que je vais introduire diffèrent dans leur précision. Les deux nécessitent que vous téléchargiez un petit fichier sur votre serveur Web. Après cela, la précision dépend de si vous souhaitez ou non savoir combien de ces bloqueurs de contenu bloquent également Google Tag Manager ! Il s’avère que certains le font, et vous voudrez peut-être également mesurer ce trafic.

REMARQUE! Juste pour dissiper toute confusion, les solutions suivantes Ne fera pas fonctionnent si le suivi de Google Analytics est bloqué en empêchant la requête HTTP de quitter le site. Le hack à l’aide d’un XMLHttpRequest() contournera les bloqueurs qui empêchent simplement analytics.js de se charger, mais cela n’aidera pas si la requête HTTP à Google Analytics est bloquée. Pour mesurer CETTE part de trafic dans GA, vous devrez relayer les appels via un point de terminaison de serveur Web local et envoyer l’appel du protocole de mesure à Google Analytics à partir de votre serveur Web, où les bloqueurs de publicités et de contenu ne peuvent pas l’atteindre.

Créez le fichier JavaScript et téléchargez-le

La première chose que vous devez faire est de créer un simple fichier JavaScript appelé advertisement.js et téléchargez-le sur le serveur Web. Ce fichier ne contient qu’une seule ligne :

window['noBlocker'] = true; 

Ce fichier fonctionne comme appât. Il a le nom le plus flagrant que vous pourriez penser donner à une bibliothèque d’annonces, donc la plupart des bloqueurs devraient s’y accrocher avec leurs vrilles avides, décimant les moyens de subsistance des éditeurs.

Vous devez télécharger ce fichier à un emplacement sur votre serveur Web où vous pouvez le lier à partir de votre modèle de page (ou de GTM). Parce que j’utilise WordPress, je l’ai téléchargé dans le répertoire /wp-content/.

Une fois que vous avez fait cela, vous pouvez suivre soit la solution facile (à venir), soit la plus complexe (à venir plus tard dans l’article). Mais commencez par lire la configuration GTM générique dont vous aurez besoin pour l’une ou l’autre approche.

Configuration du gestionnaire de balises Google

Tout d’abord, vous aurez besoin d’un Variable JavaScript personnaliséeque nous appellerons {{JS – pas de bloqueur}}. Cette variable contient le code suivant :

function() {   return window['noBlocker'] ? undefined : 'true'; } 

Cela ne renverra rien si le advertisement.js fichier chargé et créé la variable globale, et ‘vrai’ si le fichier n’a pas été chargé. En d’autres termes, si un bloqueur de contenu bloque advertisement.jscette variable renverra ‘true’.

Ensuite, vous devrez créer une dimension personnalisée dans Google Analytics. j’ai choisi Session comme portée, car le niveau d’accès peut être trop granulaire et le niveau d’utilisateur peut être trop large. Mais c’est à toi de voir. Lorsque vous créez la dimension personnalisée, notez les Indice numéro que GA lui attribue.

Ensuite, modifiez votre générique Affichage des pages Étiqueter. Vous devez y ajouter une nouvelle ligne de dimension personnalisée, avec le numéro d’index dérivé des paramètres de Google Analytics, où vous venez de créer la nouvelle dimension. La valeur de cette dimension doit être la variable JavaScript personnalisée que vous avez créée précédemment. Donc ça ressemblerait à ça :

Regardons ce qui se passe ici. Lorsque cette balise se déclenche, elle essaie de remplir la dimension personnalisée avec le numéro d’index 4 avec la variable {{JS – pas de bloqueur}} Retour. Si le site n’a pas chargé le fichier advertisement.jscette dimension prend la valeur ‘vrai’, c’est-à-dire ce qui est envoyé à Google Analytics. Si le dossier a fait load, la variable renvoie undefinedet la dimension n’est pas envoyée.

Et c’est la configuration générique ! C’est ainsi que nous saurons si un bloqueur de contenu est en cours d’exécution sur le site ou non.

Ensuite, nous devrons choisir comment lier le fichier au site et si nous voulons ou non tenir compte des bloqueurs qui bloquent également GTM.

Facile : lier le fichier via GTM

Il s’agit de la configuration “facile”, car nous n’utiliserons que Google Tag Manager pour télécharger advertisement.js.

Commencez par créer un nouveau Balise HTML personnaliséenommé CONFIGURATION – Lien vers advertising.js. Cela a le code suivant à l’intérieur:

<script>   (function() {     var d = document.createElement('script');     d.src = '/wp-content/advertisement.js'; // Modify this!     document.head.appendChild(d);   })(); </script>

Cela crée un nouvel élément dans le DOM (un script élément), ajoute un lien vers le fichier que vous avez téléchargé précédemment, puis l’ajoute à l’élément head du document. N’oubliez pas de modifier la ligne avec d.src = ... pour refléter l’emplacement réel où vous avez téléchargé le fichier !

Enregistrez la balise. Note! N’y ajoutez PAS de déclencheurs. Enregistrez-le simplement. Bon.

Ensuite, ouvrez votre Balise de vue de page (celle à laquelle vous venez d’ajouter la dimension personnalisée) et ouvrez Réglages avancés -> Séquençage des balises.

Sous Séquençage des balises, cochez la case “Déclencher une balise avant Balise de vue de page incendies », et choisissez le CONFIGURATION – Lien vers advertising.js dans la liste déroulante.

Enregistrez la balise de vue de page.

Voici ce qui va se passer. Lorsqu’il est temps que la balise de vue de page se déclenche, la balise HTML personnalisée est d’abord exécutée. Cette balise établit un lien vers et exécute le advertisement.js fichier que vous avez téléchargé sur votre serveur Web. Ensuite, la balise de vue de page se déclenche et la variable JavaScript personnalisée détecte un bloqueur de contenu (s’il est activé) ou non (s’il n’est pas activé), et envoie la dimension personnalisée en conséquence.

Encore avec moi? C’est tout ce dont vous aurez besoin. Après cela, les données commenceront à affluer avec vos balises de vue de page, annotant les sessions qui ont un bloqueur de contenu avec la valeur ‘vrai’ dans le nouveau champ Dimension personnalisée.

Avancé : Magie des modèles de page

C’est plus avancé, car cela vous oblige à modifier le modèle de page, mais cela prendra également en compte le trafic qui bloque également Google Tag Manager (les b*stars !). Ce n’est pas une part importante, mais c’est quand même quelque chose dont vous voudrez peut-être vous méfier.

REMARQUE! Cette solution utilise un XMLHttpRequest pour envoyer les données à GA, et de nombreux filtres de blocage bloquent également ces requêtes. Il se peut donc que vous n’ayez d’autre choix que d’envoyer les données à un point de terminaison que vous possédez et que vous êtes certain qu’il n’est pas bloqué par ces outils. Cela dépend de vous et de vos développeurs, bien sûr.

Commençons d’abord par les aspects techniques.

Vous devrez ajouter la balise suivante au modèle de page avant l’extrait de conteneur Google Tag Manager. Sa place logique est dans le <head> du document.

<script src="/wp-content/advertisement.js"></script>

N’oubliez pas de modifier la valeur de src attribut pour refléter l’emplacement réel du fichier.

Ensuite, ajoutez également le code JavaScript minifié suivant au modèle. Vous pouvez l’ajouter n’importe où dans le modèle, bien que l’ajouter à la toute fin soit logique car il ne s’agit que de JavaScript synchrone.

<script>!function(d,e){window.addEventListener('load',function(){if(!window.noBlocker&&!window.google_tag_manager){for(var t=new XMLHttpRequest,n=(new Date).getTime()+Math.floor(1e8*Math.random()),o='ab_gc=',a=document.cookie.split(';'),i=0;i<a.length;i++){for(var c=a[i];' '==c.charAt(0);)c=c.substring(1);0==c.indexOf(o)&&(n=c.substring(o.length,c.length))}t.open('POST','https://www.google-analytics.com/collect');var r='tid='+e+'&cd'+d+'=true&t=pageview&dp='+document.location.pathname+'&v=1&cid='+n;t.send(r);var g=new Date;g.setTime(g.getTime()+63072e6);var d='expires='+g.toUTCString();document.cookie='ab_gc='+n+'; '+d}})}('1','UA-1234567-1');</script>

Ça a l’air méchant, je sais ! Lisez attentivement le bit suivant.

Ce script ajoute un fenêtre.onload listener, qui se déclenche après la totalité window l’objet a été chargé. En d’autres termes, il attend le chargement de la page et tous les scripts, images et ressources externes à charger également.

Ensuite, il vérifie l’existence de noBlocker variable globale, qui, si vous vous en souvenez, est créée dans le advertisement.js dossier. Il vérifie également l’existence des google_tag_manager objet créé par Google Tag Manager.

Si les deux sont manquants, cela signifie qu’un bloqueur de contenu a bloqué les deux advertisement.js et GTM !. Si vulgaire!

S’ils sont bloqués, le script procède comme suit :

1. Créez un nouveau clientId aléatoire, en utilisant l’horodatage actuel et un nombre aléatoire.

2. Si un cookie nommé ab_gc existe, utilisez plutôt sa valeur comme clientId.

3. Envoyez un hit de protocole de mesure à Google Analytics, en utilisant le clientId établi à l’étape (1) ou (2), et envoyez le hit en tant que page vue, en utilisant la page actuelle comme emplacement et en définissant la valeur “true” sur un dimension personnalisée.

4. Écrire/mettre à jour le cookie ab_gc avec le clientId.

Une chose importante à noter ici. Voir les toutes dernières parenthèses dans le script : ('1','UA-1234567-1')? Vous devez les mettre à jour vous-même.

La première valeur entre parenthèses est le numéro d’index de la dimension personnalisée à laquelle vous souhaitez envoyer des détails sur le bloqueur de publicités. Vous pouvez, par exemple, simplement utiliser la dimension personnalisée que vous avez créée précédemment, ou vous pouvez faire ce que j’ai fait.

j’ai créé un nouvelle propriété Google Analytics pour collecter ces appels, et la dimension personnalisée est une dimension d’accès, utilisée dans un Inclure uniquement filtre sur la vue de rapport. En d’autres termes, cette nouvelle propriété n’acceptera que les appels contenant cette dimension personnalisée, ce qui signifie qu’elle ne collectera que les données des utilisateurs qui bloquent à la fois advertisement.js et GTM (grrr !).

C’est donc la deuxième valeur entre parenthèses. Il s’agit de l’ID de la propriété à laquelle vous souhaitez envoyer les données. Personnellement, je n’utiliserais pas ma propriété principale, car ces données ne sont tout simplement pas comparables. Il est créé par programmation et est très limité quant aux informations envoyées. Vous pouvez, bien sûr, remplir tous les champs de dimension avec une magie JavaScript intelligente, mais je ne suis pas très intéressé par tous ces gadgets.

Je souhaite simplement savoir combien de sessions bloquent les deux annonces et GTM (arrêtez ça !).

Résumé

Ce que vous faites ensuite dépend de vous. Vous pouvez créer un rapport personnalisé avec des partages de session pour ceux qui ont un bloqueur de publicités par rapport à ceux qui n’en ont pas. Avec ces données, vous pouvez optimiser votre site, en vous assurant qu’aucune information critique ne se cache derrière des sources potentiellement bloquées.

Il existe également d’autres solutions que vous voudrez peut-être consulter.

Télécharger le advertisement.js n’est peut-être pas la solution la plus robuste, car elle ne nécessite pas trop d’imagination de la part des bloqueurs de contenu pour ignorer ce fichier à l’avenir. Certaines méthodes de détection des bloqueurs incluent la création d’éléments dans le DOM qui ressemblent à des emplacements pour les publicités. Ceux-ci fonctionneront probablement bien aussi.

Avec cette solution, vous obtiendrez des informations utiles sur les partages de bloqueurs de contenu sur votre site, et vous pourrez immédiatement agir sur ces informations.

Je souhaite vraiment, vraiment, que Google Tag Manager ne soit pas bloqué, car ce n’est pas une plate-forme de publicité ou de distribution de contenu en soi. C’est juste un injecteur JavaScript qui peut également être utilisé pour des trucs bienveillants et sympas.

Notez qu’une chose qui manque est de vérifier si oui ou non Google Analytics était bloqué mais Gestionnaire de balises Google n’était pas. C’est aussi un cas d’utilisation intéressant, et c’est assez simple à faire avec une vérification de window['GoogleAnalyticsObject'] lors du chargement de la page. Vous pouvez le faire via GTM ou dans le modèle de page également – cela nécessite juste une certaine personnalisation.

Avez-vous d’autres conseils pour détecter les bloqueurs de publicités et de contenu ? Quels résultats voyez-vous ? Sur mon blog, les bloqueurs de contenu représentent environ 25 % des sessions, et ceux qui bloquent également GTM sont très peu nombreux (mais ils existent).