Install guides

Install on React

Add the tag to index.html, or start the tracker from your entry file. Router navigations are counted automatically.

Add the script to index.html

In a single-page app every route is served from index.html. Add the tag to its <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>

Or start it from your entry file

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

Call init() outside any component, so strict mode rendering twice in development cannot start it twice. A second call is ignored anyway.

Routing

React Router, TanStack Router and other routers that use the History API are tracked automatically: every navigation counts as a page view.

If your router uses hash URLs such as /#/pricing, turn on hash tracking with data-hash="true", or hash: true in init().

Hash routingHTML

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

Verify

Open your app, click through a few routes, then open Overview. Each route should appear under top pages. If nothing arrives, see troubleshooting.