React

Add OpenRevenue analytics to any React app — Vite, CRA, or custom setup.

Via index.html

The simplest approach: paste the script tag into your public/index.html or index.html before the closing </body>:

index.html

<body>  <div id="root"></div>   <script    src="https://api.openrevenue.com/tracker.js"    data-site="your-project-id"    defer  ></script></body>

<body>  <div id="root"></div>   <script    src="https://api.openrevenue.com/tracker.js"    data-site="your-project-id"    defer  ></script></body>

Via component

Prefer loading it from your React tree? Add a small effect to your root App.tsx:

App.tsx

import { useEffect } from "react" export default function App() {  useEffect(() => {    const script = document.createElement("script")    script.src = "https://api.openrevenue.com/tracker.js"    script.dataset.site = "your-project-id"    script.defer = true    document.head.appendChild(script)  }, [])   return <>{/* your app */}</>}

import { useEffect } from "react" export default function App() {  useEffect(() => {    const script = document.createElement("script")    script.src = "https://api.openrevenue.com/tracker.js"    script.dataset.site = "your-project-id"    script.defer = true    document.head.appendChild(script)  }, [])   return <>{/* your app */}</>}

ℹ

The empty dependency array ensures the script is injected once on mount (not on every re-render).

npm package

For Vite and other bundlers, install the package and call init once from your root:

terminal

npm install openrevenue

npm install openrevenue

main.tsx

import { init, track } from "openrevenue" init({ siteId: "your-project-id" }) // Later: track("signup")

import { init, track } from "openrevenue" init({ siteId: "your-project-id" }) // Later: track("signup")

Verify

Deploy your app and open it in a browser. Check your OpenRevenue dashboard: a pageview should appear within seconds.

ℹ

OpenRevenue ignores localhost automatically. Test on your deployed URL, not the dev server.