React

Add Produl to any React app. SPAs get automatic route-change tracking with no extra setup.

Install

1. 1

   Add the package

   bash

   npm install produl-tracker

2. 2

   Add Analytics to your app root

   Import Analytics from produl-tracker/react and render it once near the top of your component tree — typically in your root App component.

Usage

import { Analytics } from 'produl-tracker/react'

export default function App() {
  return (
    <>
      <Analytics siteId="YOUR_SITE_ID" />
      {/* rest of your app */}
    </>
  )
}

To send custom events, import track and call it anywhere in your component tree:

import { track } from 'produl-tracker/react'

function SignupButton() {
  return (
    <button onClick={() => track('signup', { plan: 'pro' })}>
      Get started
    </button>
  )
}

SPA routing

The React adapter intercepts history.pushState and history.replaceState so client-side navigations are tracked automatically. This works with React Router, TanStack Router, and any other router that wraps the History API. You do not need to configure anything — just keep disableAutoTrack at its default of false.

Configuration