Dashboard

Getting Started With React.js or React Router

Set up Flowgrid analytics on your React app in just a few easy steps. The guide below shows you how to integrate Flowgrid using React Router (React 18+)

Add the tracking script to app layout

Create your new website and add the following script tag preferably in the layout.jsx section:

  1. Within your project's components folder create InitialScript.jsx file.
  2. Open your project's app.jsx file then import the component above into your app router
  3. Add the Flowgrid tracking script tag inside the head section:
1import { useEffect } from 'react'; 2 3const InitialScript = () => { 4 useEffect(() => { 5 const script = document.createElement('script'); 6 script.src = 'https://www.flow-grid.xyz/scripts/track.js'; 7 script.async = true; 8 script.setAttribute('data-site', 'YOUR_WEBSITE_ID'); 9 document.head.appendChild(script); 10 11 return () => { 12 // Optional cleanup 13 document.head.removeChild(script); 14 }; 15 }, []); 16 17 return null; 18}; 19 20export default InitialScript; 21

Note:

Replace YOUR_WEBSITE_ID with your actual website ID.

Tracking is disabled on localhost. CORS policies ensure only whitelisted sites send data, so local requests will fail and no data is sent to your dashboard during development.

Verify installation

After adding the script do the following to verify that the installation was successful:

  1. Open your website that you are now tracking in the browser.
  2. Go to your dashboard, click on your website and click the go to website's dashboard to see if the incoming traffic are being tracked.