React / Vite
One tag in index.html covers the whole app.
Steps
- Open index.html in your project root (Vite) or public/index.html (Create React App).
- Paste the snippet below inside <head>. Replace SITE_ID with your Site ID.
- Rebuild and deploy.
The snippet
Replace SITE_ID with the ID from your Glyphex site settings.
<script defer src="https://glyphex.io/t/SITE_ID.js"></script>
SPA routing is automatic. Glyphex tracks history changes, so React Router, TanStack Router, and similar work without extra code.
Verify it works
Open your live site in a new tab, then open Realtime in your Glyphex dashboard. Your visit should show up within a few seconds.
Track custom events
Call window.analytics.track in any handler:
export function SignupButton() {
return (
<button
onClick={() =>
window.analytics?.track("signup_click", { plan: "pro" })
}
>
Sign up
</button>
);
}Events can also be sent with window.analytics.track(name, props) or the declarative data-glyphex-event and data-glyphex-event-<prop> attributes.
Troubleshooting
- No data? Check that the Site ID matches exactly and the page was republished or the cache cleared.
- Ad blockers can block analytics scripts. Disable yours to test.
- Content Security Policy: allow https://glyphex.io in both script-src and connect-src.
- Check DevTools > Network for a request to glyphex.io/t/. A 404 means the Site ID is wrong.