Set up Flowsery Analytics in a React Router project

Name: Flowsery
Author: Flowsery

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.

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

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.setAttribute('data-domain', 'your_domain.com');
    script.src = 'https://analytics.flowsery.com/js/script.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. Swap your_domain.com for the root domain of your site.

Alternative: static HTML approach

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

<script
  defer
  data-fl-website-id="flid_******"
  data-domain="your_domain.com"
  src="https://analytics.flowsery.com/js/script.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.