React Analytics Setup: Add Tracking to Any React App

Traditional analytics scripts assume full page loads. In React single-page apps, route changes happen client-side, so pageviews can be undercounted unless you trigger them manually.

This is the most common reason teams think analytics is working while reporting is incomplete.

You have two main approaches for React apps:

• GA4: broad ecosystem and integrations, but higher setup and compliance complexity.
• Privacy-first tools: faster setup, simpler dashboards, and lower consent overhead.

If you are migrating from GA4 complexity, compare with a migration guide.

Trigger pageview events on route transitions, not just initial load. Hook into your router location object and fire analytics when pathname or search params change.

1. Initialize analytics once at app boot.
2. Listen for route changes in a top-level layout component.
3. Send normalized path + title data to your analytics tool.
4. Exclude internal admin/dev routes from reports.

Prioritize events by business value. Track core events first: signup started, signup completed, pricing clicked, and feature adopted.

Keep payloads small and avoid sending personal data. This improves both privacy posture and query performance.

For deeper implementation details, see our event tracking guide.

• Verify pageviews and events in staging and production.
• Validate UTM attribution and campaign source mapping.
• Confirm consent behavior for required regions.
• Set alerting for sudden traffic or event drop-offs.
• Document ownership for analytics schema changes.

This process keeps your React tracking stable as your app ships new features.