Add DataFast to your React Router project

Follow these steps to integrate DataFast analytics into your React Router application.

Add tracking script to root component

The recommended way to add scripts to all pages in a React Router application is by adding it to your root component.

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

Add the DataFast tracking script to the <head> section:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Add DataFast script
    const script = document.createElement('script');
    script.defer = true;
    script.setAttribute('data-website-id', 'dfid_******');
    script.setAttribute('data-domain', 'you_domain.com');
    script.src = 'https://datafa.st/js/script.js';
    document.head.appendChild(script);

    // Cleanup on unmount
    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    // Your app content
  );
}

Replace dfid_****** with your actual Website ID from DataFast. Replace you_domain.com with your website's root domain.

Alternative: Using public/index.html

You can also add the script directly to your public/index.html file:

<script
  defer
  data-website-id="dfid_******"
  data-domain="you_domain.com"
  src="https://datafa.st/js/script.js"
></script>

Verify installation

After implementing either method:

Visit your live website
Check your DataFast dashboard for incoming data
It might take a few minutes for the first pageviews to appear

For advanced configuration options like localhost tracking, custom API endpoints, or cross-domain setup, see the script configuration reference.

Something missing? Suggest features ✍️