Guías de instalación

Instalar en React

Añada la etiqueta a index.html o inicie el rastreador desde su archivo de entrada. Las navegaciones del router se cuentan automáticamente.

Añada el script a index.html

En una aplicación de una sola página, cada ruta se sirve desde index.html. Añada la etiqueta a su <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>

O inícielo desde su archivo de entrada

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>,
);

Llame a init() fuera de cualquier componente, para que el doble renderizado del modo estricto en desarrollo no pueda iniciarlo dos veces. De todos modos, una segunda llamada se ignora.

Enrutamiento

React Router, TanStack Router y otros routers que usan la API History se siguen automáticamente: cada navegación cuenta como una página vista.

Si su router usa direcciones con almohadilla como /#/pricing, active el seguimiento del fragmento con data-hash="true", o hash: true en init().

Enrutamiento por fragmentoHTML

<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>

Verificación

Abra su aplicación, recorra algunas rutas y luego abra el resumen. Cada ruta debe aparecer entre las páginas principales. Si no llega nada, consulte solución de problemas.