Add Datrika to React

In a Vite or Create React App project, paste the script into index.html.

Replace YOUR_SITE_ID with your site ID in Datrika. Copy the script with the ID filled in from your site settings, on the General tab.

Add the script

Paste the script into the <head> of index.html in your project root. In Create React App the file is in the public folder.

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>
    <script defer
      src="https://cdn.datrika.app/da.js"
      data-datrika
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Datrika tracks regular page changes in your app on its own. It misses only router.replace navigations, which replace the address instead of adding one, and hash-based routing with # in the URL.

Done? Open your site in a browser - the setup guide in Datrika picks up the first visit and takes you to your dashboard.