Add PageLens analytics to Remix / React Router

Steps

1. Open app/root.tsx.
2. Add the script inside <head> in your root layout.
3. Navigation between routes is tracked automatically.

<head>
  <Meta />
  <Links />
  <script defer src="https://app.pagelens.io/script.js" data-site-id="YOUR_SITE_ID" />
</head>

Replace YOUR_SITE_ID with the id from your site settings in PageLens. The dashboard shows the exact snippet with your id filled in.

Check that it works

Open your site in a new tab, then open PageLens. The live counter shows your visit within a few seconds. Visits from localhost are ignored by default.

Track custom events

Add data-pagelens-event to any button or form, or call the JavaScript API:

<button data-pagelens-event="signup" data-pagelens-prop-plan="pro">Start trial</button>

<script>
  window.pagelens?.track('signup', { plan: 'pro' })
</script>

You can also turn on autocapture for button clicks, form submissions and copy events in Site Settings → Tracking. No code is needed.

Avoid ad blockers

Some ad blockers drop requests to analytics domains. Serve PageLens from your own domain to count those visits too.

Other frameworks