Guides d’installation

Installer sur React

Ajoutez la balise dans index.html, ou démarrez le traceur depuis votre fichier d’entrée. Les navigations du routeur sont comptées automatiquement.

Ajoutez le script dans index.html

Dans une application monopage, chaque route est servie depuis index.html. Ajoutez la balise dans son <head>.

index.htmlHTML

<script defer
  src="https://cdn-stg.webmetric.io/v1/b.js"
  data-key="wm_w_your_write_key"
  data-host="https://in-stg.webmetric.io"></script>

Ou démarrez-le depuis votre fichier d’entrée

src/main.tsxTSX

import { init } from "@webmetric/sdk";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { App } from "./app";

init({
  key: "wm_w_your_write_key",
  host: "https://in-stg.webmetric.io",
  assetOrigin: "https://cdn-stg.webmetric.io/v1",
});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Appelez init() en dehors de tout composant, pour que le double rendu du mode strict en développement ne puisse pas le démarrer deux fois. Un second appel est de toute façon ignoré.

Routage

React Router, TanStack Router et les autres routeurs qui utilisent l’API History sont suivis automatiquement : chaque navigation compte comme une page vue.

Si votre routeur utilise des adresses avec dièse comme /#/pricing, activez le suivi du fragment avec data-hash="true", ou hash: true dans init().

Routage par fragmentHTML

<script defer
  src="https://cdn-stg.webmetric.io/v1/b.js"
  data-key="wm_w_your_write_key"
  data-host="https://in-stg.webmetric.io"
  data-hash="true"></script>

Vérification

Ouvrez votre application, parcourez quelques routes, puis ouvrez la vue d’ensemble. Chaque route doit apparaître parmi les pages principales. Si rien n’arrive, consultez le dépannage.