Set up Flowsery Analytics in a React Router project

This guide explains how to add Flowsery Analytics tracking to a React Router application.

Inject the script from your root component

The best place to load a global script in a React Router app is the root component.

1. Open your root component (usually App.jsx or main.jsx).

2. Dynamically append the Flowsery Analytics snippet inside a useEffect:

import { useEffect } from 'react';
 
function App() {
  useEffect(() => {
    // Inject Flowsery Analytics script
    const script = document.createElement('script');
    script.defer = true;
    script.setAttribute('data-fl-website-id', 'flid_******');
    script.src = 'https://cdn.flowsery.com/main.js';
    document.head.appendChild(script);
 
    // Remove on unmount
    return () => {
      document.head.removeChild(script);
    };
  }, []);
 
  return (
    // Your app content
  );
}

Swap flid_****** for the Website ID from your Flowsery Analytics settings.

Alternative: static HTML approach

You can also drop the snippet directly into public/index.html:

<script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script>

Confirm everything is working

After deploying either approach:

• Navigate to your live site
• Open your Flowsery Analytics dashboard and check for incoming pageviews
• Allow a couple of minutes for the first data to appear

For additional options such as localhost tracking, custom API endpoints, or cross-domain configuration, refer to the script configuration reference.