React Router is the standard routing library for React single-page applications. Whether you're using Vite, Create React App, or another bundler, Loamly integrates in seconds.

Add the tracking script

Add the Loamly script to the <head> of your index.html file:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>

  <!-- Loamly tracking script -->
  <script src="https://app.loamly.ai/t.js?d=yourdomain.com" defer></script>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
</html>

Replace yourdomain.com

Replace yourdomain.com with the domain you registered in your Loamly workspace settings.

If you prefer to load the script programmatically, you can add it in your root component:

// src/App.tsx
import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.loamly.ai/t.js?d=yourdomain.com';
    script.defer = true;
    document.head.appendChild(script);
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        {/* your routes */}
      </Routes>
    </BrowserRouter>
  );
}

SPA route tracking

Loamly automatically detects client-side route changes in single-page applications. When a user navigates between routes using React Router, Loamly tracks each page view without any additional configuration.

Automatic SPA detection

You don't need to manually call any tracking functions when routes change. Loamly listens to History API changes (pushState and popstate) and records page views automatically.

If you need to manually track a page view (for example, in a modal or tabbed interface), you can use:

// Manually track a page view
if (window.loamly) {
  window.loamly.page({ path: '/custom-path', title: 'Custom Page' });
}

Enable AI verification (recommended)

The client-side script tracks page views, but to unlock the full power of Loamly you need server-side setup. This enables AI bot crawl detection, RFC 9421 signature verification, bot-to-click temporal matching, and prompt-to-crawl correlation with your Intelligence data. Without it, you miss the connection between AI bots crawling your site and the humans who visit after.

See the AI Visitor Verification guide for setup instructions.

Verify installation

Start your development server with npm run dev
Visit your site in a browser
Open the browser Network tab and look for the t.js request to confirm the script loaded
Navigate between a few routes
Check your Loamly dashboard — visits should appear within 2 minutes

Troubleshooting

Not seeing visits?

Make sure the domain in the script tag matches the domain registered in your Loamly workspace settings
Wait at least 2 minutes — data is not instant
Check the browser Network tab to confirm t.js loaded successfully

Ad blockers

Some browser extensions may block tracking scripts. Try loading your site in an incognito/private window with extensions disabled

Debug mode

Open your browser's developer console and run:

Loamly.debug(true)

This will log all tracking events to the console so you can verify everything is working.

Need help?

If you're still having trouble, email us at hello@loamly.ai and we'll help you get set up.