Installation

Une balise, et tout ce qu'il faut savoir d'elle.

Coller la balise prend dix secondes. Cette page est pour les heures d'après : ce qui quitte votre site, ce qui n'en sort jamais, et ce qui, sur votre propre page, peut fausser les chiffres.

La balise

<script defer
  src="https://panel.raicode.tech/v1/p.js"
  data-panel-key="pk_live_…"></script>

Remplacez la clé par la vôtre, prise dans le tableau de bord. Il n'y a pas de deuxième étape, pas de bibliothèque de consentement à brancher, et rien à ajouter à une politique cookies.

L'attribut defer compte : la balise s'exécute une fois votre document analysé, donc elle n'entre jamais dans votre premier rendu.

Charge utile

Ce que la balise envoie

Un petit objet par page vue et par événement nommé, envoyé en text/plain pour que navigator.sendBeacon puisse encore partir d'une page qui se ferme. Les clés tiennent en une lettre parce que cet objet part sur la connexion mobile de vos visiteurs, pas sur la nôtre.

Ce qu'elle n'envoie jamais

  • Aucun cookie, aucun localStorage, aucun sessionStorage, aucune base IndexedDB.

    Rien du tout n'est écrit sur l'appareil du visiteur — c'est précisément ce qui retire le bandeau de consentement de votre site. Le script de build cherche les quatre API dans les octets livrés et fait échouer la construction si l'une d'elles apparaît.

  • Aucune chaîne de requête et aucun fragment, sauf cinq noms.

    ?token=…, ?email=… et #… sont précisément là où un jeton de réinitialisation ou l'adresse de quelqu'un finit dans un outil d'analyse, et aucune syntaxe ne distingue un paramètre sûr d'un paramètre dangereux — la chaîne de requête est donc supprimée par sa forme. L'exception : utm_source, utm_medium, utm_campaign, utm_term et utm_content, lus par leur nom. Un nom n'est pas une forme : une URL qui porte un jeton de réinitialisation et une campagne donne la campagne et pas un octet du jeton. Il n'y a ni gclid ni fbclid — un identifiant par clic est la seule chose que ce produit refuse partout — et data-panel-utm="false" désactive même les cinq.

  • Aucun titre de page.

    « Commande n° 4471 — Jean Dupont » est une barre de titre, et c'est la fuite accidentelle la plus courante du nom d'un client de notre client.

  • Aucun référent complet.

    L'hôte répond à « d'où vient ce trafic » ; le reste regarde quelqu'un d'autre.

  • Aucune adresse IP.

    Celle de vos visiteurs sert, côté serveur, à dériver une empreinte qui tourne chaque nuit et à résoudre un pays, puis elle est jetée. Elle n'est écrite dans aucune table et dans aucune ligne de journal.

  • Aucune taille d'écran.

    La fenêtre est rangée dans l'une de trois classes dans le navigateur lui-même, donc le nombre ne voyage jamais.

  • Aucun identifiant qui survive à la journée.

    Il n'y a rien que ce script puisse stocker pour vous reconnaître demain, puisqu'il ne stocke rien.

Les segments identifiants sont effacés du chemin avant l'envoi : /orders/3f2504e0-… devient /orders/:id, et les nombres nus, les adresses e-mail et les chaînes qui ressemblent à un jeton subissent le même sort. La règle est partagée avec le serveur, qui l'applique une seconde fois à l'arrivée. Elle sur-rédige volontairement — /produits/iphone-15-pro-max devient /produits/:id, ce qui coûte un peu de finesse de rapport, quand l'erreur inverse coûterait la vie privée de quelqu'un.

Réglages

Les attributs

Seul data-panel-key est obligatoire.

L'API JavaScript

panel('signup', { plan: 'pro', seats: 3 });
panel.pageview();
panel.pageview('/cart');

Les propriétés doivent être des chaînes, des nombres ou des booléens. Les objets et les tableaux imbriqués sont jetés plutôt qu'aplatis : l'aplatissement est la façon dont une fiche utilisateur entière finit dans quatre colonnes parce que quelqu'un a passé l'objet qu'il avait sous la main. Ce qui ressemble à une adresse e-mail dans une valeur est remplacé avant de quitter la page. Les noms commençant par $ sont réservés.

Si votre code appelle avant le chargement

<script>
window.panel=window.panel||function(){
  (panel.q=panel.q||[]).push(arguments)
}
</script>

La balise porte defer, donc elle s'exécute après l'analyse de votre document. Si votre propre code appelle panel(…) avant, ajoutez cette amorce au-dessus de vos autres scripts : tout ce qui est mis en file est envoyé dans l'ordre au chargement. Elle n'est volontairement pas dans la balise collée — l'installation tient en une ligne, et une deuxième ligne dont la plupart des gens n'ont pas besoin est une deuxième chose à rater.

Diagnostic

Les autres scripts de votre page.

Presque tous les signalements « mes chiffres sont faux » au sujet d'un script de mesure parlent en réalité d'autre chose sur la page.

Alors Panel regarde, une fois par chargement, et vous le dit. Deux champs seulement, et ils décrivent votre page et jamais votre visiteur : les hôtes des autres scripts tiers, et un drapeau si quelqu'un avait déjà enveloppé history.pushState avant nous. Ce sont des faits que vous liriez vous-même dans le source de votre site, identiques pour deux personnes qui chargent la même page, et ils ne contiennent aucun identifiant. Des hôtes et jamais des URL : l'URL d'un script tiers contient couramment un identifiant de compte ou un jeton de session.

Ces deux champs s'éteignent avec data-panel-diagnostics="false". Le diagnostic s'éteint avec eux, et c'est le seul arbitrage de cette page qui vous appartient entièrement.

  1. Un autre script avait déjà enveloppé history.pushState

    xPanel le détecte

    Il n'existe aucun événement de navigateur qui dise « une application monopage vient de changer de page ». Tous les outils de mesure enveloppent donc les deux mêmes méthodes de history. Deux enveloppes sur la même méthode, c'est la façon standard dont un comptage monopage se casse : double comptage quand les deux se déclenchent, comptage manquant quand l'une oublie de repasser la main. Nous mesurons l'état avant de poser la nôtre, parce qu'après, la réponse serait toujours oui.

  2. Deux copies de la balise

    sPanel le détecte

    Presque toujours une dans le gabarit du site et une dans un gestionnaire de balises. La seconde refuse de démarrer, donc vous n'êtes pas compté deux fois — mais notre propre hôte apparaît alors dans la liste des scripts tiers, et il faut en retirer une.

  3. Un gestionnaire de consentement qui retient la balise

    sPanel le détecte

    Certains bloquent tous les scripts tiers jusqu'à un clic qui, le plus souvent, ne vient jamais. Panel n'a pas besoin de ce consentement : rien n'est écrit sur l'appareil et rien ne survit à la nuit. La balise peut donc être mise en liste blanche, ou sortie du bloc géré. Si vos pages vues valent une fraction de vos journaux serveur, c'est la première chose à regarder.

  4. Un gestionnaire de balises qui injecte après le chargement

    sPanel le détecte

    La liste s est une photo prise au moment de la première page vue, quelques millisecondes après l'analyse de votre document. Ce qui est injecté plus tard n'y figure pas. Attendre retarderait la page vue, et une page vue retardée est une page vue perdue sur chaque visiteur qui rebondit.

  5. Un outil de test A/B qui recharge ou redirige

    sPanel le détecte

    Une redirection au chargement fabrique deux pages vues pour une seule visite, et un test qui réécrit l'URL peut en fabriquer davantage. L'outil apparaît dans la liste ; c'est à vous de décider laquelle de vos deux mesures a raison.

  6. Un bloqueur de publicité, ou un résolveur DNS filtrant

    Un script bloqué n'envoie rien, et rien ne nous permet de savoir que c'est arrivé. C'est un sous-comptage qui touche tous les outils de mesure, le nôtre compris, et il est inégal : plus fort sur un public technique. Servir /v1/p.js depuis votre propre domaine, avec data-panel-host, est la réponse habituelle.

  7. Une Content-Security-Policy

    Il faut que script-src autorise l'hôte qui sert /v1/p.js, et que connect-src autorise l'hôte qui reçoit les événements — le même, sauf si vous avez posé data-panel-host. Si l'un des deux manque, le script échoue en silence, et c'est volontaire : il n'écrit jamais dans la console, ne lève jamais d'exception et n'apparaît jamais dans votre suivi d'erreurs. Le prix de cette discrétion, c'est qu'il faut cette ligne de documentation pour la rattraper.

  8. Un routeur à fragment, du genre #/panier

    Pas suivi automatiquement, et c'est un refus plutôt qu'une lacune : le compter voudrait dire envoyer le fragment, c'est-à-dire la moitié d'URL que nous jetons par principe. Appelez panel.pageview('/panier') depuis votre routeur. Vous choisissez ce qui sort de votre page, et nous le rédigeons quand même au passage.

  9. Do Not Track et Global Privacy Control

    Honorés, donc une part petite et auto-sélectionnée de vos visiteurs n'est pas comptée. Panel ne peut suivre personne d'un site à l'autre ni d'un jour au suivant, donc le signal ne nous vise sans doute pas ; un produit dont l'argument entier est la retenue ne s'accorde pas cette dispense.

  10. Votre propre machine de développement

    localhost, 127.0.0.1, *.local, *.test et file:// ne sont pas comptés, parce que la première chose que fait quiconque après avoir collé la balise est de recharger son serveur de développement vingt fois. Pour tester une installation, ajoutez data-panel-local="true" — un attribut, et non l'interrupteur localStorage que proposent les autres outils, parce que Panel n'écrit rien sur l'appareil d'un visiteur. Cette contrainte, c'est le produit qui réapparaît dans l'API.

  11. Les pages préchargées par le navigateur

    Chrome charge en arrière-plan des pages que le visiteur n'ouvrira peut-être jamais. Elles ne sont comptées qu'une fois réellement affichées.

  12. Les robots

    Filtrés côté serveur, d'après l'agent utilisateur et le débit, jamais dans le navigateur : un filtre posé dans la page est un filtre qu'un navigateur sans interface désactive en mentant.

Mesurez votre trafic sans rien demander à personne.

Une balise de script, aucun bandeau de consentement, et un serveur dans l’Union européenne. Votre première page vue apparaît en quelques secondes.

Sans engagement. Sans appel de qualification.

L’installation complète

<script defer
  src="https://panel.raicode.tech/v1/p.js"
  data-panel-key="pk_live_…"></script>