ActionLab Analytics for React
Add privacy-first, AI-powered analytics to your React site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to React in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About React
React is the most widely used JavaScript library for building user interfaces, powering everything from single-page applications to complex enterprise dashboards. React applications typically use client-side routing (React Router, TanStack Router) for navigation, which creates a challenge for analytics: page transitions happen in the browser without triggering traditional page load events. ActionLab handles this automatically by detecting History API changes, meaning React SPAs get complete pageview tracking without manual route change listeners or React-specific hooks.
Why Add Analytics to React
React developers invest significant effort in application performance, and any tool that increases bundle size or introduces re-renders is rightfully scrutinized. ActionLab approach of loading as an external script completely outside the React component tree means it has zero impact on your application bundle, zero interaction with React state management, and zero risk of causing unnecessary re-renders. The automatic SPA detection handles the most common React analytics challenge — tracking client-side route changes — without requiring developers to add hooks, event listeners, or analytics SDKs to their component code. This clean separation between analytics and application code is how developers expect tooling to work.
Installation Code
<!-- Add to your public/index.html -->
<script
src="https://cdn.actionlabanalytics.com/actionlab.js"
data-site="YOUR_SITE_ID"
defer
></script>
<!-- Or dynamically in your App component -->
<!-- ActionLab auto-detects SPA route changes -->Step-by-Step Setup
- 1
Open your public/index.html file (Create React App) or the HTML entry point for your React application.
- 2
Add the ActionLab script tag to the <head> section, before the closing </head> tag.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
ActionLab automatically detects React Router navigation and other client-side route changes. No React component, hook, context provider, or additional configuration is needed.
Why Use ActionLab with React
- Automatic SPA route change detection captures every page transition in your React application without requiring manual tracking calls or route change event listeners.
- No React components, hooks, or contexts to install and maintain — the script is completely external to your React component tree, meaning it never causes re-renders or interferes with your application state.
- Works with React Router v5 and v6, Reach Router, TanStack Router, and any custom routing solution that uses the History API.
- Zero bundle size impact — the script is loaded externally from the CDN and does not become part of your React application JavaScript bundle.
Frequently Asked Questions
Does ActionLab work with React SPAs?
Yes. ActionLab automatically detects client-side route changes using the History API (pushState and replaceState events) and records them as pageviews. This works with React Router, Reach Router, TanStack Router, and any other routing library that uses the standard History API. When a user navigates between routes in your React SPA, each transition appears as a separate pageview in your ActionLab dashboard. No additional React code, hooks, or configuration is needed — the detection happens at the browser API level, below your React application.
Can I track custom events from React components?
Yes. ActionLab provides a JavaScript API for firing custom events from your application code. You can call the event tracking function from any React component, event handler, or effect. This lets you track specific user interactions like button clicks, form submissions, or feature usage. The custom event API is lightweight and does not require importing an SDK or wrapping components in providers.
Does ActionLab affect React application performance?
No. The script loads externally from the CDN using the defer attribute, meaning it does not block React rendering, does not add to your JavaScript bundle, and does not interact with the React reconciler or state management. Your React application renders and becomes interactive exactly as fast with ActionLab installed as without it. The sub-2KB script size is negligible compared to a typical React application bundle.
Does ActionLab work with React Server Components?
If your React application uses Server Components (as in Next.js App Router), ActionLab works correctly. The script loads on the client side and tracks page views and navigation regardless of whether components are server-rendered or client-rendered. Server Components do not affect ActionLab because the analytics script operates in the browser after the HTML has been delivered.
Can I conditionally load ActionLab in development?
Yes. You can conditionally include the script tag based on environment. In Create React App, use process.env.NODE_ENV to conditionally render the script only in production. In Vite-based setups, use import.meta.env.PROD. This prevents development and staging traffic from appearing in your production analytics.