Documentation

Add analytics to React

For a Vite or CRA app, the plain tag in index.html works too.

Mount the hook once, at the root. The guard against an existing `script[data-site]` matters in development, where a fast-refresh cycle can otherwise append the tag more than once.

If you are on Vite or Create React App, the plain script tag in index.html works just as well and is one fewer moving part.

src/main.tsx

import { useEffect } from "react";

/** Mount once, at the root. The tracker handles SPA route changes itself. */
export function useInqetra() {
  useEffect(() => {
    if (document.querySelector("script[data-site]")) return;

    const script = document.createElement("script");
    script.src = "https://collect.inqetra.com/inqetra.js";
    script.defer = true;
    script.dataset.site = "9f1c4b2e-7a30-4d51-b8c6-2e5a0d7f3c11";
    document.head.appendChild(script);
  }, []);
}

// Anywhere in the app, once it has loaded:
//   window.inqetra("plan_upgraded", { plan: "pro" });

Worth knowing

9f1c4b2e-7a30-4d51-b8c6-2e5a0d7f3c11 is a placeholder. Yours is issued when you add a domain and is shown in the dashboard next to the snippet.

After it is in

Load a page and check the realtime view: it counts the last five minutes, so your own visit should appear within seconds. Then custom events covers naming the things that matter to you.