Contacter l'assistance

Nous répondons par e-mail, en général sous deux jours.

Pour prévenir les abus, Google reCAPTCHA vérifie cet envoi ; des données sont transmises à Google. Le script n'est chargé qu'à l'ouverture de ce formulaire.

← Tous les articles

Ajouter un compteur Stats4U avec Google Tag Manager

· Lukas Wojcik

Il existe un guide sur ce sujet publié sur le blog en 2015. Ses captures d'écran montrent un Tag Manager qui n'a plus cet aspect, et l'une de ses sept étapes — cocher document.write — n'est plus du tout nécessaire. Cet article le remplace.

Il répond aussi à la question que l'ancien guide avait abandonnée. Celui-ci affirmait qu'il fallait utiliser le compteur invisible avec Tag Manager, au motif que l'emplacement d'affichage de l'image Stats échappe à tout contrôle. C'est possible. La méthode se trouve en bas de cette page.

La version courte

Dans Tag Manager : Tags → New → Custom HTML, puis une seule ligne dans le champ HTML :

20157 — étapesaujourd'hui3 — champs et un déclencheurl'étape document.write disparaît — le script ne l'utilise plus 
<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

Le déclencheur se règle sur All Pages, puis enregistrement et publication du conteneur. Le texte YOUR-ID se remplace par le numéro du compteur, qui figure sur la page de statistiques.

C'est tout le travail — trois champs et un déclencheur, là où 2015 exigeait sept étapes. Rien à cocher au sujet de document.write, puisque le script ne l'utilise plus.

Ce que cela fait réellement, et pourquoi ce n'est peut-être pas l'effet recherché

Le script place le compteur immédiatement après lui-même dans la page. Collé directement dans le code HTML du site, c'est exactement ce qu'il faut : le compteur apparaît à l'endroit du code.

Avec Tag Manager, c'est différent, parce que la décision d'emplacement du code échappe au site. C'est le conteneur qui en décide, et il se trouve généralement dans l'en-tête du document, ou là où l'extrait du conteneur a été installé. Le compteur est donc inséré à cet endroit — pas dans le pied de page, pas dans la barre latérale, mais là où Tag Manager a injecté la balise.

Pour un compteur invisible, cela n'a absolument aucune importance, ce qui explique pourquoi l'ancien guide en recommandait un. Le design 980 n'affiche rien, le design 981 affiche seulement une petite icône qui renvoie vers la page de statistiques. Si cela suffit, la version courte ci-dessus est complète et la lecture peut s'arrêter ici.

Pour un compteur visible à un endroit précis, la suite décrit la marche à suivre.

Contrôler l'endroit où le compteur apparaît

Le script dispose d'un second mode que l'ancien guide ne mentionnait jamais. Au lieu de l'attribut data-id, c'est une liste qui lui est fournie, et il recherche des éléments de substitution par ID.

Étape un — placer un élément de substitution dans la page, à l'endroit où le compteur doit se trouver. Cela se fait dans le modèle du site, pas dans Tag Manager, parce que c'est justement Tag Manager qu'il s'agit de tenir à l'écart de cette décision :

<div id="s4u_cp0"></div>

Étape deux — dans Tag Manager, ceci prend la place de la ligne unique. Même type de balise Custom HTML :

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

Étape trois — le déclencheur change. C'est le point qui piège le plus de monde. All Pages se déclenche aussi tôt que Tag Manager le permet, souvent avant que l'élément de substitution n'existe dans le document. Mieux vaut le déclencheur intégré DOM Ready. Le compteur doit arriver après la div, pas avant.

Le compteur apparaît désormais à l'intérieur de cette div, et nulle part ailleurs.

Contrôler sur quelles pages il apparaît

Il existe deux leviers indépendants, et il vaut la peine de les comprendre séparément.

L'élément de substitution en est un. La première ligne à l'intérieur de la fonction le montre : s'il n'y a pas de s4u_cp0 sur la page, elle s'arrête et le script n'est même jamais téléchargé. Ainsi, un modèle qui inclut la div obtient un compteur, et un modèle qui ne l'inclut pas n'en obtient pas — la décision se prend dans les modèles du site, sans changement dans Tag Manager et sans étape de publication.

Le déclencheur est l'autre. Pour décider cela dans Tag Manager plutôt, il suffit d'ajouter une condition au déclencheur — se déclencher sur DOM Ready uniquement lorsque Page Path correspond au chemin visé. Cette méthode convient quand la règle porte sur des URL, et l'élément de substitution quand la règle porte sur des modèles.

Plusieurs compteurs sur une même page

La liste en accepte autant que nécessaire. La position dans la liste correspond au numéro dans l'ID de l'élément de substitution :

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

Le premier va dans s4u_cp0, le second dans s4u_cp1. Les deux ont été vérifiés dans un navigateur au moment de la rédaction : le premier s'est affiché sous la forme d'une icône de 20 sur 20, le second sous la forme d'un bandeau de 162 sur 25, chacun dans son propre élément de substitution et nulle part ailleurs sur la page.

Quatre pièges classiques

  • Les deux méthodes ne vont pas ensemble. Si la balise possède un attribut data-id et définit la liste, le résultat est deux compteurs, et les deux visites sont comptabilisées séparément.
  • s4ustyleid doit toujours figurer dans la liste. L'attribut data-style retombe silencieusement sur le design 30 en cas d'omission. La version liste n'a pas ce filet de sécurité et demandera un design vide.
  • Un élément de substitution manquant échoue silencieusement. Pas de compteur, pas d'erreur, rien dans la console. Si rien n'apparaît, le premier point à contrôler est l'ID — s4u_cp0, avec un zéro, pas la lettre O.
  • Le compteur invisible n'a volontairement aucun lien. Le design 980 s'affiche sans lien, parce qu'une zone cliquable transparente d'un pixel sur la page de quelqu'un d'autre est un piège plutôt qu'une fonctionnalité. Le lien existe sur le 981, la petite icône.

Vérifier que cela fonctionne

Le mode Preview de Tag Manager sert à cela : au chargement de la page, la balise devrait apparaître parmi les balises déclenchées pour l'événement DOM Ready. La page de statistiques le confirme ensuite — une visite via Preview compte comme n'importe quelle autre, donc le chiffre devrait bouger en quelques secondes.

Si la balise se déclenche mais que rien n'apparaît, il s'agit de l'élément de substitution ou du déclencheur, dans cet ordre de probabilité.

Publicité