React Router

A React app that routes with React Router needs one snippet in your HTML<head>. Navigations are tracked automatically as long as you use BrowserRouter (the default).

1. Get your snippet

Each site has its own snippet with a unique script URL. Copy the exact one from your dashboard’s Install step, with your site’s ID in place of wa-XXXXXXXX.

2. Add the snippet

In a standard React app (Vite or Create React App), paste the snippet into the <head> of your HTML shell — index.html for Vite, or public/index.html for Create React App:

<!-- index.html -->
<head>
  <!-- …your existing tags… -->

  <!-- Privacy-friendly analytics by Wazlytics -->
  <script async src="https://wazlytics.com/js/wa-XXXXXXXX.js"></script>
  <script>
    window.wazlytics = window.wazlytics || function(){(wazlytics.q = wazlytics.q || []).push(arguments)};
    wazlytics.init = wazlytics.init || function(o){ wazlytics.o = o || {} };
    wazlytics.init()
  </script>
</head>

Using React Router as a framework (v7 framework mode)? There’s no static index.html — add the two <script> tags to the document <head> rendered in app/root.tsx instead.

Route changes

BrowserRouter navigates through the browser’s History API (pushState / popstate), which Wazlytics tracks automatically — every navigation records a pageview on its own. See Single-page apps.

wazlytics.init({ hashBasedRouting: true })

Verify

Run or deploy your app, open Realtime in Wazlytics, and load a page — your visit should appear within a few seconds. If nothing shows up, the troubleshooting guide covers the usual causes.