Empêcher Adblock / uBlock Origin de bloquer Piwik ou Google Analytics sur son site

Après une longue pause sur le blog, genre quasiment un an. Voici un sujet ô combien utile pour les white hats comme moi qui seraient frustrés de rater le parcours de grosso modo 30% de leurs visiteurs. Si vous êtes utilisateur d’un bloqueur publicitaire du type AdBlock ou uBlock Origin, vous savez certainement que ces extensions ne se contentent pas de bloquer les publicités, elles se chargent aussi d’empêcher toutes intrusions par les réseaux sociaux, Facebook en tête, et les outils de suivi des visiteurs tels Google Analytics ou Piwik.

De mon côté, j’utilise Piwik selon les recommandations de la Cnil (pas d’enregistrement entier de l’adresse IP, etc.) et je respecte les demandes DoNotTrack (DNT) des navigateurs. Je suis clean, j’aimerai que les visiteurs le soient, le problème est qu’en règle générale, on laisse son bloqueur activé par défaut et on oublie juste de le désactiver sur les sites « sympas ». Et patatra, Piwik ou Google Analytics se retrouvent bloqués !

La console affiche : GET https://www.google-analytics.com/ga.js net::ERR_BLOCKED_BY_CLIENT

Comment empêcher les bloqueurs de pub de bloquer Piwik ?

Il y a deux solutions, une qui ne tient pas dans le temps, c’est-à-dire qu’à chaque mise à jour de Piwik il faut refaire la manipulation. En revanche, il n’y a pas besoin de disposer d’un serveur que vous pouvez configurer, à minima, un hébergement mutualisé où un « RewriteEngine On » fonctionnera. La solution B implique d’avoir cela, son avantage est que les MAJ de Piwik sont totalement transparentes.

À retenir, Piwik fonctionne avec deux fichiers, un fichier JS et un fichier PHP, ce deuxième sert à récupérer une image d’un pixel transparent lorsque Javascript est désactivé. Trop souvent oublié, il faut savoir que les bloqueurs bloquent les deux.

Voici à quoi ressemble le code javascript que vous placez habituellement sur vos pages pour assurer le tracking :

  var _paq = _paq || [];
  
  _paq.push([function() {
  var self = this;
  function getOriginalVisitorCookieTimeout() {
   var now = new Date(),
   nowTs = Math.round(now.getTime() / 1000),
   visitorInfo = self.getVisitorInfo();
   var createTs = parseInt(visitorInfo[2]);
   var cookieTimeout = 33696000; // 13 mois en secondes
   var originalTimeout = createTs + cookieTimeout - nowTs;
   return originalTimeout;
  }
  this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
  }]);
  
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//domainedepiwik.com/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();

On y retrouve la mention de piwik.js et piwik.php, les deux fichiers bloqués par AdBlock ou uBlock notamment.

Solution A : renommer le fichier JS

Sur le serveur hébergeant Piwik, il faut dupliquer le fichier piwik.js et le renommer comme bon vous semble. Pour ma part, j’enlève toute mention du terme piwik, AdBlock empêche même les images dont le nom contient piwik, c’est dire l’agressivité des bloqueurs. Dans le code ci-dessus, vous mettez tout simplement à jour le fichier appelé et roulez jeunesse !

Problème, lors d’une mise à jour de Piwik, si le fichier piwik.js est modifié, votre fichier dupliqué ne profitera pas de la mise à jour et rendra peut-être le système inopérant.

Solution B : le rewriting pour NGinx ou Apache

Pour pallier à cela, il suffit de faire appel à la réécriture d’URL. Ce que nous devons faire, c’est faire pointer une URL vers le fichier .js sans redirection. Si redirection il y a, le bloqueur n’est pas dupe et place un gros uppercut dans la tronche de Piwik.

Commençons par NGinx, je pars du principe que vous êtes root.

Direction le dossier de config des sites de Nginx dans lequel vous serez celui qui concerne votre Piwik :

cd /etc/nginx/conf.d

Puis vous ouvrez le fichier de configuration de Piwik avec nano ou votre outil préféré.

Dans la partie server du fichier de configuration, nous allons rajouter simplement un location.

#Redirection piwik JS
location ~ /redirectiondufichierjs {
        rewrite "/redirectiondufichierjs" /piwik.js$1 break;
}

Vous remplacez « redirectiondufichierjs » par ce que vous voulez. La mention break est importante, c’est elle qui va empêcher que la redirection se fasse. En d’autres termes, aller sur mondomaine.tld/redirectiondufichierjs affichera le contenu du fichier piwik.js. De cette manière, les bloqueurs n’y voient que du feu et vous n’avez pas à vous souciez des mises à jour de Piwik.

Note : dans l’exemple, Piwik se trouve dans le dossier racine, à vous de modifier en conséquence s’il est dans un sous-dossier du domaine. Genre piwik/piwik.js.

Au tour d’Apache, pour aller au plus simple, nous exploiterons le fichier .htaccess dans lequel il suffit de mettre :

#Redirection piwik JS
RewriteEngine On
RewriteRule ^redirectiondufichierjs /piwik.js$1 [L]

[L] est un flag équivalent à break pour Nginx.

Solution A & B : un bête include pour le fichier PHP

Il faut maintenant s’occuper du fichier PHP piwik.php et la méthode ne change pas entre les deux solutions, vous créez un fichier .php au nom quelconque genre monfichierphp.php à déposer dans le même dossier que piwik.php et dans lequel vous placez :

<?php include('piwik.php'); ?>

Ouais, il n’en faut pas plus. Vous remarquerez que je n’applique pas la méthode de la redirection, j’ai constaté que les bloqueurs réussissaient parfois à identifier l’entourloupe.

Configurer Piwik sur son site

Il reste à mettre à jour le code JS de Piwik présent sur votre site :

  [...]
  
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//domainedepiwik.com/";
    _paq.push(['setTrackerUrl', u+'monfichierphp.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'redirectiondufichierjs'; s.parentNode.insertBefore(g,s);
  })();

Notez la disparition de l’extension .js pour « redirectiondufichierjs ». Ne copiez/collez pas tout le code, modifiez juste les fichier PHP et JS pour ne pas casser votre code initial (le setSiteId entre autre)

Et pour Google Analytics ?

Vous appliquez la même méthode mais vers un domaine externe (celui de Google Analytics). Cela dit, je préfère vous encourager à passer à Piwik qui répondra à tous vos besoins dans bien des cas et dont les résultats vous appartiendront sans transformer vos visiteurs en cible marketing.

Commentaires