Pour beaucoup, il semble que l’une des justifications les plus importantes de Google Tag Manager côté serveur est sa résistance à bloqueurs de publicités et de contenu. Après tout, en servant le conteneur JavaScript de votre propre domainevous échappez à de nombreux dispositifs heuristiques utilisés par les technologies de blocage d’aujourd’hui.
Eh bien, j’ai enregistré maintes et maintes fois pour dire comment c’est mauvaise justification pour utiliser GTM côté serveur. En contournant les souhait pour bloquer les scripts, vous leur manquez de respect et forcez leur navigateur à télécharger des scripts qu’ils voulaient éviter de télécharger en premier lieu.
Puisqu’il est côté serveur, vous pourriez être tenté de l’utiliser pour contourner les listes de blocage du navigateur, les protections de suivi, les consentements, etc.
Oui, vous pouvez faire tout cela. Mais tu n’as pas besoin d’être un connard. Toujours pécher par excès de max. respect de la vie privée des utilisateurs. 5/6
– Simo Ahava (@SimoAhava) 29 janvier 2020
Cependant, il ne s’agit pas d’un autre article déplorant cette déconnexion entre les analystes avides de données et les visiteurs sans méfiance de leur site.
Au lieu de cela, je veux prendre la technologie qui vous permet de circonvenir et l’utiliser à la place pour détecter.
Alors que les bloqueurs de publicités et de contenu devraient être autorisés à suivre leur cours, je pense qu’il est absolument vital que leur impact soit mesuré. De cette façon, vous pouvez calculer combien de vos analyses et demandes d’annonces sont bloquées en raison de ces outils.
Vous pouvez même utiliser la technologie de détection pour bloquer conditionnellement vos balises côté serveur ! De cette façon, vous pouvez vraiment agir selon les souhaits de l’utilisateur et garder ces flux de données entre le navigateur et le conteneur du serveur en vie.
Au fait, si vous souhaitez en savoir plus sur les bloqueurs de publicités et de contenu en général, je vous recommande d’écouter cet épisode de podcast du manuel de marketing technique, où j’ai interviewé Pete Snyder de Brave sur ce sujet même.
Mesurer l’impact des bloqueurs
Commençons par une mise en garde majeure (la première d’une longue série) :
C’est un preuve de concept. Ce que je vous montre ici, ce sont certains des composants dont vous avez besoin pour créer le système de détection, mais la plupart du travail doit être effectué côté client (là où la détection a lieu), vous devez donc ajuster ces idées pour qu’elles aient un sens pour Quel ton le site fonctionne.
Dans cet article, je vais vous montrer comment je mesure trois choses différentes :
- Le ratio de vues de la page d’accueil où les publicités étaient bloqués.
- Le ratio de vues de la page d’accueil où Google Analytics a été bloqué.
- Le ratio de vues de la page d’accueil où Gestionnaire de balises Google a été bloqué.
Il y a des mises en garde supplémentaires liées à chacune de ces mesures, mais je les aborderai quand elles se présenteront.
Notez que pour comprendre tout ce qui se passe ici, il faut une assez bonne maîtrise de balisage côté serveur. Si vous ne l’avez pas encore configuré, je vous recommande de jeter un œil à mon article sur le sujet.
Modèle client personnalisé
J’utilise un modèle Client personnalisé dans le conteneur Serveur pour récupérer les demandes du bloqueur de publicités fichier appât ainsi que pour le pixel utilisé pour générer un objet de données d’événement.
Le fichier appât contient des instructions permettant au navigateur de générer un élément avec l’ID GxsCRdhiJi. C’est l’élément que vous devez rechercher pour voir si le fichier a été bloqué ou non.
Script côté client
La plupart de la magie doit être effectuée côté client.
Dans le modèle de page de mon site, j’exécute le script suivant dans la page HTML. Oui, vous devez le faire en dehors de Google Tag Manager, car si GTM est bloqué, vous ne pourrez pas mesurer l’impact en raison du blocage du script côté client également.
(function() { // Set these to the endpoints configured in the Client template var baitPath = 'https://sgtm.simoahava.com/ads-min.js'; var pixelPath = 'https://sgtm.simoahava.com/4dchk'; // Prevent the script from running outside the home page if (document.location.pathname !== '/') return; // Inject the bait file var el = document.createElement('script'); el.src = baitPath; document.body.appendChild(el); var gaBlocked = false; // Run the detections at page load to avoid race conditions window.addEventListener('load', function() { // Send a HEAD request for the Universal Analytics library to see if it's blocked fetch('https://www.google-analytics.com/analytics.js', {method: 'HEAD', mode: 'no-cors'}) .catch(function() { // If the load failed, assume GA was blocked gaBlocked = true; }) .finally(function() { // Build the GA4 parameters, add additional parameters at your leisure var params = { ads_blocked: !document.querySelector('#GxsCRdhiJi'), // Detect if the bait file was blocked gtm_blocked: !(window.google_tag_manager && window.google_tag_manager.dataLayer), // Detect if gtm.js was blocked ga_blocked: gaBlocked // Detect if analytics.js was blocked }; // Build the pixel request with a unique, random Client ID var cid = Math.floor((Math.random() * 1000000) + 1) + '_' + new Date().getTime(); var img = document.createElement('img'); img.style = 'width: 1; height: 1; display: none;'; img.src = pixelPath + '?client_id=' + cid + '&' + Object.keys(params).reduce(function(acc, cur) { return acc.concat(cur + '=' + params[cur]);}, []).join('&'); document.body.appendChild(img); }); }); })(); Je veux seulement exécuter ce script sur la page d’accueil, et parce que je suis tellement paresseux pour éditer mes modèles, je quitte simplement la fonction si le chemin de la page actuelle n’est pas la racine du site.
Pour baitPath et pixelPath, configurez les paramètres correspondants que vous avez ajoutés au modèle Client. Les valeurs par défaut sont /ads-min.js pour le chemin du fichier appât, et /4dchk pour le chemin des pixels.
Dans les chapitres suivants, je vais vous expliquer comment je mesure l’utilisation des bloqueurs de publicités, le blocage de Google Analytics et le blocage de Google Tag Manager.
Mesurer les bloqueurs de publicités
Pour mesurer l’impact de bloqueurs de publicitésj’utilise un système heuristique séculaire pour détecter si le navigateur bloque les publicités.
Le navigateur envoie une requête au conteneur Serveur, où le modèle Client la récupère. La demande doit concerner un fichier qui est le plus souvent bloqué par des bloqueurs de publicités, tels que ads-min.js.
... var baitPath = 'https://sgtm.simoahava.com/ads-min.js'; var el = document.createElement('script'); el.src = baitPath; document.body.appendChild(el); ... 
Le but du fichier est de créer un élément HTML factice sur la page avec un ID spécifique (GxsCRdhiJi si vous utilisez le modèle par défaut). Si l’élément n’existe pas lorsque vous l’interrogez, cela signifie que le téléchargement a échoué pour une raison ou une autre, dont l’une pourrait être due à des bloqueurs de publicités.
Mise en garde: Nous ne savons pas pourquoi le téléchargement a échoué. Cela peut être dû à un bloqueur de publicités, mais cela peut aussi être dû à une erreur de réseau ou à autre chose. Il y a donc toujours une certaine incertitude à cet égard.
Notez également que les listes de filtres telles que Disconnect.me, utilisées par exemple dans Mozilla Firefox et Microsoft Edge, correspondent au nom de domaine, ce qui rend leur détection très difficile avec une solution personnalisée.
Mesurer les bloqueurs de GA
Pour mesurer si Google Analytics est bloqué ou non, j’utilise une méthode très simple. je lance un fetch() appeler la bibliothèque JavaScript Universal Analytics. Si cette demande échoue, je le signalerai au blocage de GA.
La requête est envoyée avec la méthode HEAD pour éviter d’utiliser les ressources du navigateur, et elle est envoyée avec la méthode no-cors mode pour éviter les problèmes CORS.
Voici à quoi ressemble la requête :
... fetch('https://www.google-analytics.com/analytics.js', {method: 'HEAD', mode: 'no-cors'}) .catch(() => { // GA is blocked }); ... Mise en garde: Encore une fois, nous ne savons pas si c’est un bloqueur qui empêche GA de se charger. De plus, dans Firefox par exemple, même dans Windows privé, Google Analytics est autorisé à se charger, mais ses principales méthodes sont calé pour l’empêcher de fonctionner. Cette approche particulière ne serait pas en mesure de détecter ce type de blocage.
Mesurer les bloqueurs de GTM
Pour GTM, nous prenons un même approche plus simple. Au moment du chargement de la fenêtre, nous vérifierons si le window.google_tag_manager l’interface a été créée et qu’elle contient également l’objet imbriqué window.google_tag_manager.dataLayer.
... gtm_blocked: !(window.google_tag_manager && window.google_tag_manager.dataLayer) ... Mise en garde: Toutes les mises en garde susmentionnées s’appliquent, encore une fois. Et il est important de se rappeler que, par exemple, sur Firefox, le global
window.google_tag_managerinterface est créé, mais depuisdataLayer.pushest calé, GTM lui-même ne fonctionnera pas.
Envoi de la requête de pixel au conteneur du serveur
Une fois que vous avez vos booléens pour savoir si ces trois vecteurs sont bloqués ou non, il est temps de tout mettre ensemble.
window.addEventListener('load', function() { fetch('https://www.google-analytics.com/analytics.js', {method: 'HEAD', mode: 'no-cors'}) .catch(function() { gaBlocked = true; }) .finally(function() { var params = { ads_blocked: !document.querySelector('#GxsCRdhiJi'), gtm_blocked: !(window.google_tag_manager && window.google_tag_manager.dataLayer), ga_blocked: gaBlocked }; var cid = Math.floor((Math.random() * 1000000) + 1) + '_' + new Date().getTime(); var img = document.createElement('img'); img.style = 'width: 1; height: 1; display: none;'; img.src = pixelPath + '?client_id=' + cid + '&' + Object.keys(params).reduce(function(acc, cur) { return acc.concat(cur + '=' + params[cur]);}, []).join('&'); document.body.appendChild(img); }); }); La requête de pixel attend que la fenêtre se charge complètement et pour Google Analytics fetch() demande à compléter. De cette façon, toute condition de course asynchrone possible ne gâchera pas la mesure.
Dans le params objet, vous pouvez ajouter tous les paramètres que vous souhaitez voir se retrouver dans l’objet de données d’événement. Si vous ne pas fournir le page_location paramètre, vous devrez l’ajouter à la balise (voir ci-dessous). Vous pouvez également fournir un personnalisé event_name paramètre, et le modèle Client sera par défaut page_view si vous ne le faites pas.
Les client_id est automatiquement généré en tant que valeur unique et aléatoire pour chaque requête.
Mise en garde: Cela signifie que nous ne mesurons pas utilisateurs qui utilisent des bloqueurs mais plutôt coups individuels et s’ils sont bloqués ou non. je voulais ignorer utilisateurs simplement parce que je ne veux pas commencer à configurer des cookies ou des empreintes digitales uniquement dans le cadre de cet exercice.
Enfin, une requête de pixel est envoyée à votre conteneur de serveur, qui la récupère et crée un objet de données d’événement avec les paramètres :
Configurer la balise GA4
Dans le conteneur Serveur, vous pouvez ensuite configurer une balise GA4 pour qu’elle se déclenche lorsque cet objet de données d’événement particulier est généré. Dans ce but, Je vous recommande de créer un nouveau flux de données uniquement pour ces données. De cette façon, vous ne polluez pas vos données d’analyse marketing avec cette couverture de bloqueur de publicités.
Comme vous pouvez le voir, je supprime l’adresse IP du visiteur (je considère qu’il s’agit d’un paramètre requis dans TOUTES les mesures GA4).
N’oubliez pas d’ajouter votre ID de mesure de flux de données à la balise. Vous n’avez pas besoin d’ajouter l’un des paramètres personnalisés de la demande de pixel – ils seront automatiquement envoyés à GA4 simplement parce qu’ils se trouvent dans l’objet de données d’événement.
Enfin, voici à quoi ressemble le déclencheur :
Dans Google Analytics 4, pensez à configurer les paramètres personnalisés en tant que dimensions personnalisées.
Testez la configuration
Une fois que tout est en place, vous pouvez vérifier le mode de prévisualisation du conteneur du serveur lors du chargement de la page d’accueil de votre site.
Vous devriez voir une demande de /ads-min.js suivie peu après d’une demande de /4dchk pixels.
Dans Google Analytics 4, vous devriez voir vos événements atterrir dans le rapport en temps réel.
Notez que tout le reste dans GA4 devrait être à peu près plat. Comme vous n’utilisez pas les SDK recommandés, vous ne mesurez pas non plus correctement l’activité et l’engagement des utilisateurs. Mais nous ne nous soucions pas de cela – nous ne nous soucions que des événements.
Vous pouvez ensuite les compiler dans les rapports de votre choix en utilisant le Explorer section de Google Analytics 4 ou même Google BigQuery si vous avez configuré l’exportation pour ce flux de données.
N’oubliez pas de tester également avec une variété de bloqueurs ! Par exemple, voici à quoi cela ressemble dans les requêtes réseau du navigateur lorsque je charge la page d’accueil avec le navigateur Brave :
Comme vous pouvez le voir, les trois paramètres ont la valeur trueindiquant que sur Brave, tout est bloqué.
Dans Firefox Private Windows, cependant :
Rien n’est bloqué !
Eh bien, j’utilise ads-min.js comme fichier appât, et la liste de filtres utilisée par Firefox (Disconnect.me) ne correspond pas aux noms de fichiers mais plutôt aux domaines de suivi eux-mêmes. Et tandis que GA et GTM ne sont pas techniquement bloquéleurs principales méthodes sont caléce qui signifie qu’ils ne fonctionneront pas dans Firefox.
Calage signifie que les méthodes existent pour éviter que les pages ne se cassent en raison d’erreurs de référence, mais elles sont écrasées d’une manière qui les empêche de faire ce qu’elles étaient censées faire.
Résumé
Vous avez peut-être remarqué le nombre de mises en garde qu’il y avait dans l’article. En effet, la détection des bloqueurs de publicités et de contenu est difficile.
Les bloqueurs sont conçus de manière à les rendre aussi discrets que possible, et bien qu’ils réussissent rarement à être transparents, ils rendent difficile la détection et l’ajustement dans le code.
Je suis sûr qu’il existe des moyens plus sophistiqués de détecter différents mécanismes de blocage que ceux que j’ai présentés dans cet article, mais le but de cet article n’était pas de vous montrer comment détecter bloqueurs mais plutôt comment mesure leur impact.
Avec un conteneur Google Tag Manager Server, vous disposez d’un point de terminaison d’API peu coûteux et relativement facile à configurer. Il fonctionne sur votre propre domaine, de sorte que le détecteur de bloqueur de publicité lui-même n’est pas bloqué par, eh bien, les bloqueurs de publicité.
C’est encore une fois un bon cas d’utilisation pour un conteneur de serveur.
Avec cette méthode, vous pouvez bloquer de manière sélective le déclenchement de vos balises de serveur si l’utilisateur utilise un bloqueur de publicités. Bien sûr, cela n’aiderait pas les cas d’utilisation où l’utilisateur utilise des bloqueurs pour simplement empêcher quelconque scripts superflus de se déclencher dans leur navigateur. C’est à vous de décider jusqu’où vous voulez aller dans le respect des souhaits de l’utilisateur.
Si vous êtes curieux, dans mes tests, j’ai trouvé ce qui suit :
- ~7 % des chargements de page se sont produits là où Gestionnaire de balises Google a été bloqué.
- ~10 % des chargements de page se sont produits là où Google Analytics a été bloqué.
- ~18 % des chargements de page se sont produits là où ads-min.js et ainsi, par procuration, les publicités étaient bloqués.
Veuillez me faire savoir dans les commentaires si vous avez des questions sur cette configuration ou des commentaires sur le blocage des publicités / contenus en général.
