Aller au contenu
Toutes les pages de la documentation

Référence

Référence du SDK

Ce que le traceur charge, ce qu’il enregistre, et chaque réglage modifiable depuis la page.

Ce qui se charge sur une page

Fichiers du traceur
FichierCompresséChargé
b.js5,1 KoSur chaque page.
r.js57,2 KoSeulement quand le forfait du projet enregistre les sessions et que la page n’a pas désactivé la relecture.
s.js24,5 KoSeulement sur le chargement de page que le collecteur choisit pour une capture, quand les captures de page pour les cartes de chaleur sont activées sur le projet.

b.js envoie sa première page vue immédiatement, puis demande au collecteur les réglages du projet. r.js et s.js ne se chargent qu’une fois ces réglages reçus, et seulement s’ils l’autorisent. Si la requête échoue, aucun des deux ne se charge.

La requête de paramètres transmet aussi le chemin de la page, la largeur d’écran et une empreinte de la mise en page calculée à partir des noms de balises, jamais du texte. Le collecteur répond s’il lui manque encore une capture de cette page et ne la confie qu’à un visiteur à la fois : s.js n’est donc téléchargé que sur ce chargement. Une nouvelle mise en page donne lieu à une nouvelle capture, et une mise en page qui change à chaque visite n’est capturée qu’à un rythme limité.

Attributs de la balise script

Attributs de la balise script
AttributPar défautEffet
data-keyObligatoireLa clé d’écriture de votre projet.
data-hosthttps://in.webmetric.ioLe collecteur qui reçoit les événements. Le panneau d’installation renseigne le vôtre : https://in-stg.webmetric.io.
data-click="false"ActivéArrête l’enregistrement des clics.
data-click-labels="false"ActivéEnvoie les clics sans le libellé du bouton ou du lien. Leur position et le type de contrôle restent enregistrés.
data-scroll="false"ActivéArrête l’enregistrement de la profondeur de défilement.
data-replaySuit le projetfalse désactive la relecture de session sur cette page. consent ne charge l’enregistreur qu’après consent(true).
data-snapshots="false"Suit le projetDésactive les captures de page pour les cartes de chaleur sur cette page.
data-mask=".a, #b"AucunD’autres sélecteurs CSS, séparés par des virgules, dont le texte est masqué dans les relectures et les captures de page.
data-hash="true"DésactivéCompte les changements de fragment, comme /#/pricing, comme des pages vues.
data-query="true"DésactivéCompte les changements de paramètres seuls, comme ?tab=2, comme des pages vues. Les paramètres UTM comptent toujours.
data-consent="required"DésactivéN’enregistre et n’envoie rien tant que consent(true) n’a pas été appelé.
data-debug="true"DésactivéAffiche dans la console chaque lot envoyé, et chaque raison pour laquelle le traceur s’arrête. Ajouter ?wm_debug=1 à l’adresse d’une page fait de même pour un chargement.

Une page peut seulement désactiver la relecture et les captures de page. C’est le projet qui décide si elles fonctionnent, jamais la page.

Options de init()

Options de init()
OptionPar défautÉquivalent dans la balise script
keyObligatoiredata-key
hosthttps://in.webmetric.iodata-host
autoClicktruedata-click
clickLabelstruedata-click-labels
autoScrolltruedata-scroll
replaySuit le projet. false ou "consent".data-replay
snapshotsSuit le projet. false les désactive.data-snapshots
maskSelectorsAucun. Un tableau de sélecteurs.data-mask
hashfalsedata-hash
queryfalsedata-query
consentAucun. "required" attend le consentement.data-consent
debugfalsedata-debug
assetOriginhttps://cdn.webmetric.io/v1Le répertoire d’où b.js a été chargé. C’est de là que se chargent r.js et s.js.

Le paquet exporte init(options), track(name, props), consent(granted) et flush(). flush() envoie immédiatement les événements en attente au lieu d’attendre le lot suivant.

Pages vues et changements de route

  • La première page vue est enregistrée dès que le traceur démarre.
  • Les applications monopages sont couvertes : history.pushState, history.replaceState et les boutons précédent et suivant enregistrent chacun une page vue pour la nouvelle route.
  • Une page vue n’est enregistrée que si la page change. Par défaut, cela signifie le chemin plus les éventuels paramètres UTM. Activez data-query pour compter chaque changement de paramètres, et data-hash pour compter les changements de fragment. Dans tous les cas, l’adresse envoyée ne garde que le chemin et les paramètres UTM.
  • Le référent n’est envoyé qu’avec la première page vue d’un chargement de page : les déplacements dans votre application ne sont donc pas comptés comme des provenances.
  • La profondeur de défilement est le point le plus bas atteint sur chaque page, par paliers de 10 %.
  • Les envois de formulaires sont décrits par la structure de l’élément (balise, id, classes et position). Un clic sur un bouton, un lien, un onglet, un élément de menu, un interrupteur ou une option porte aussi le type de contrôle et son libellé, pour que les rapports nomment ce qui a été cliqué. Un libellé ne vient jamais d’un champ de formulaire ni d’un élément masqué : voir les libellés de clic.
  • Les événements partent par lots : toutes les cinq secondes, à 50 événements, et quand le visiteur quitte ou masque la page.

Événements personnalisés

Envoyez un événement quand il se passe quelque chose qu’une page vue ne montre pas, comme une inscription terminée.

Balise scriptJavaScript
window.webmetric.track("signup_completed", { plan: "growth", seats: 3 });
npmTypeScript
import { track } from "@webmetric/sdk";

track("signup_completed", { plan: "growth", seats: 3 });
  • Le nom est nettoyé des espaces et mis en minuscules, puis doit compter de 1 à 64 caractères parmi a à z, 0 à 9, tiret bas, point, deux-points et tiret. Un nom qui ne convient toujours pas est ignoré, avec un seul avertissement dans la console.
  • Les propriétés sont facultatives. Jusqu’à 10 sont conservées, avec des clés de 40 caractères au plus. Les nombres et booléens deviennent des chaînes, les valeurs sont coupées à 200 caractères, et tout le reste est ignoré.
  • Ne mettez jamais de donnée personnelle, comme une adresse e-mail ou un nom, dans un nom d’événement ou une propriété.
  • Un événement personnalisé ne compte jamais comme une page vue. Il compte comme un événement dans votre forfait.

Les événements personnalisés sont listés sur la page Événements et peuvent être exportés en CSV. Les étapes d’un entonnoir correspondent à des pages vues, des clics et des envois de formulaire.

Appeler track() avant le chargement du script

La balise script se charge avec defer : window.webmetric n’existe donc pas avant son exécution. Pour l’appeler plus tôt, par exemple depuis du code en ligne, ajoutez ce bouchon avant la balise script. Les appels passés par lui sont envoyés dès que le traceur démarre.

Avant la balise scriptHTML
<script>
  window.webmetric = window.webmetric || {
    q: [],
    track: function () { this.q.push(arguments); },
    consent: function (granted) { this.c = granted; },
  };
</script>

Avec le paquet npm, les appels à track() faits avant init() sont conservés, jusqu’à 50, et envoyés dès son exécution.

Confidentialité par défaut

  • Rien n’est stocké sur l’appareil du visiteur : ni cookie, ni stockage du navigateur.
  • Un navigateur qui envoie Do Not Track ou Global Privacy Control n’envoie rien du tout.
  • La relecture masque chaque champ de formulaire dans le navigateur, avant tout envoi. Les captures de page masquent en plus tout le texte de la page.
  • Un libellé de clic est le nom visible d’un bouton ou d’un lien, jamais le texte d’un champ de formulaire ni d’un élément masqué, sans adresse e-mail ni long numéro.
  • Les adresses de page sont envoyées sans la partie qui suit un # ni aucun paramètre de requête autre que utm_*, et les référents sous forme d’origine et de chemin.
  • La clé d’écriture est publique par conception. Elle figure dans le code source de vos pages, et elle sert uniquement à écrire, uniquement dans son propre projet.

Le détail figure dans confidentialité et collecte des données.