React

In a client-rendered React app (Create React App, Vite, or any SPA), add the beacon as a plain <script> tag in your HTML shell. The beacon auto-initializes and records a pageview on the initial document load. You need a publishable key (fs_pub_live_…) from your project’s Settings.

If your app renders HTML on a server, see the Next.js or TanStack Start guide instead — those can also report crawlers server-side.

Add the beacon

Put the script tag in the HTML shell that serves your app. For Create React App that is public/index.html; for Vite it is index.html at the project root. Add it just before </body>.

<!-- public/index.html (CRA) or index.html (Vite) -->
<script
  async
  src="https://api.formshield.dev/js/formshield.js"
  data-fs-project-key="fs_pub_live_…"
  data-fs-action="pageview"
  data-fs-mode="pageload"
></script>

Replace fs_pub_live_… with your key. The tag is async and loads once when the document loads, before React mounts. Open the app and the pageview appears in the dashboard Logs.

Route changes

data-fs-mode="pageload" records one pageview when the document loads. A React SPA changes routes without reloading the document, so client-side navigations are not yet recorded as separate pageviews — that is a follow-up. Today the beacon records a single pageview on initial load.

If you need a pageview per route now, render the HTML on a server and use server reporting, which sees every request the server handles.

Next steps