Preact
Add Rybbit analytics to your Preact app
A Preact app scaffolded with npm init preact (or Vite's preact template) has a single index.html at the project root. Paste the snippet into its <head> and it loads on every route.
Get your tracking snippet
In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.
Add the snippet to Preact
Open index.html at the root of the project and paste the snippet inside <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Preact</title>
<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>Placing it before </body> also works; <head> lets it start loading sooner. Route changes made by preact-iso, preact-router or a similar router are tracked automatically as pageviews.
Verify installation
Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.
If nothing shows up:
- View the page source and search for
script.js?siteId=to confirm the snippet is on the page. - Open the browser Network tab and check that
script.jsreturns200and thatPOSTrequests go to/api/track. - Disable ad blockers, or set up a proxy so the script loads from your own domain.
- See the script troubleshooting guide for other common causes.
Track custom events
Call window.rybbit.event() from any component. Guard the call so a blocked or still-loading script does not throw.
export function SignupButton() {
const handleClick = () => {
if (window.rybbit) {
window.rybbit.event("signup_click", { location: "hero" });
}
};
return <button onClick={handleClick}>Sign up</button>;
}Next steps
- Track custom events such as signups, purchases and button clicks.
- Identify users to connect sessions to accounts.
- Proxy the script through your own domain to bypass ad blockers.
- Script attributes let you skip or mask URLs and tag events.