← Docs home

Add Pinfox to your React app

Follow these steps to integrate Pinfox analytics into your React site (Vite, Create React App, or any React SPA).

Method 1: Add script to index.html (Recommended)

React apps built with Vite or Create React App use a single index.html as the entry point. Adding the Pinfox script there ensures it loads on every page and works with client-side routing.

  1. Open your project's index.html (in the project root for Vite; in public/index.html for Create React App).
  2. Inside the <head>, add the Pinfox script before the closing </head> tag:
<script
  defer
  src="https://freemium.pinfox.io/analytics.js"
  data-site-id="YOUR_WEBSITE_ID"
></script>

Replace YOUR_WEBSITE_ID with your Website ID from the Pinfox Dashboard (add a site there to get the ID).

Example index.html (Vite):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
    <script
      defer
      src="https://freemium.pinfox.io/analytics.js"
      data-site-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Method 2: Load the script with useEffect

If you prefer to load Pinfox from a component (e.g. your root App.jsx), add a useEffect that injects the script once. This works for SPAs with client-side routing.

useEffect(() => {
  const script = document.createElement('script')
  script.defer = true
  script.src = 'https://freemium.pinfox.io/analytics.js'
  script.setAttribute('data-site-id', 'YOUR_WEBSITE_ID')
  document.head.appendChild(script)
  return () => { document.head.removeChild(script) }
}, [])

Replace YOUR_WEBSITE_ID with your actual Website ID. Make sure this effect runs in your root component so the script is only added once.

Verify installation

After implementing either method:

  • Run your app and visit a few pages.
  • Open your Pinfox dashboard and check for incoming pageviews. It may take a minute or two for the first events to appear.

Troubleshooting React Integration

Events not showing in Localhost?

By default, Pinfox might filter out traffic from `localhost` to keep your stats clean. To test in development, ensure you've enabled "Track Production Only" settings or use a staging environment. If you're using a Proxy (like in Vite or CRA), ensure the script is loaded with the absolute URL: `https://api.pinfox.io/script/analytics.js`.

React Router & SPA Support

Pinfox.io handles Single Page Application (SPA) routing automatically. It listens for `pushState` and `replaceState` events, meaning you don't need to manually trigger pageviews on every route change. This makes it significantly easier to maintain than traditional Google Analytics setups.

Pro-tip: Read our guide on why Pinfox is the better choice for React developers looking for speed and privacy.

Best Practices for React

  • Place script in index.html: For the fastest loading and to capture arrivals as early as possible.
  • Environment Variables: Use `import.meta.env.VITE_WEBSITE_ID` to manage different IDs for staging and production.
  • Selective Tracking: You can wrap the script injection in a conditional check if you want to disable tracking for specific user roles.

Why choose Pinfox for your analytics?

Privacy-First & Cookieless

Pinfox doesn't use cookies or any form of persistent tracking. We respect your visitors' privacy and help you comply with GDPR, CCPA, and PECR without needing annoying cookie banners.

Ultra-Lightweight Script

Our tracking script is less than 1KB. It won't slow down your site or affect your Core Web Vitals. Keep your site fast while getting the insights you need.

Real-Time Data Streams

See your traffic as it happens. Our real-time dashboard updates instantly, allowing you to see the immediate impact of your marketing efforts and launches.

No Data Sampling

Unlike Google Analytics, we never sample your data. You get 100% accurate reporting, regardless of how much traffic your website receives.

Frequently Asked Questions

Do I need a cookie banner with Pinfox?

No. Since Pinfox doesn't use cookies and doesn't collect personal data, you don't need to display a cookie consent banner for analytics purposes. This improves your user experience and conversion rates.

Can I track custom events?

Yes! Pinfox supports custom event tracking. You can track button clicks, form submissions, and other user interactions to better understand how visitors engage with your site.

Is Pinfox compatible with SPA frameworks?

Absolutely. Pinfox is built to work seamlessly with modern frameworks like React, Vue, Angular, Next.js, and more. It automatically handles client-side routing and virtual pageviews.

Metrics we track

  • Unique Visitors
  • Total Pageviews
  • Referrer Sources
  • Top Pages & Content
  • Geographic Location
  • Device & Browser Info
← Docs homeStatic HTMLWordPressNext.jsBack to Pinfox