Vite and single-page apps

Analytics for single-page apps

One tag in index.html. Route changes count as pageviews on their own, so a React, Vue or Svelte app measures like a site with pages.

Let your agent add it

Open Connect agent in your dashboard, click Copy setup prompt, and paste it into your coding agent. It finds your shared layout, installs the tracker once, and verifies MCP access. No StepMetrics npm package is required.

Or add it yourself

<script defer src="https://app.stepmetrics.co/t.js" data-site="YOUR_SITE_ID"></script>

Client-side routing is handled. The tracker hooks history.pushState, which is what React Router, Vue Router and the others call on navigation, so each screen is a pageview with its own path. Nothing to wire into your router.

Local development is not recorded unless you ask for it with data-track-localhost, so your own testing does not become traffic.

Track the steps that matter

Pageviews are automatic. Name the actions you care about and send them with one call; each one appears on the conversions row by itself and can be a step in a funnel.

window.stepmetrics('signup');
window.stepmetrics('purchase', { plan: 'pro' }, { revenueCents: 2900, currency: 'USD' });

Conversions your server knows first, such as a payment confirmed by a webhook, post to the same endpoint from the backend. See server-side events.

Read it from your editor

Connect Claude Code, Cursor or any MCP client with a read-only key, and ask in words: which pages lost traffic this week, where mobile visitors drop out of signup, whether Tuesday's spike was a crawler. The agent gets the same numbers as the dashboard.

claude mcp add --transport http stepmetrics https://app.stepmetrics.co/mcp \
  --header "Authorization: Bearer dak_..."

Claude Code ยท Cursor

Try it on your site.

Add your first site for free. See where visitors come from, what they look at, and how many take the next step.

No credit card required.