SolidJS

A client-side Solid app built with Vite has a single index.html at the project root; a SolidStart app renders its document from src/entry-server.tsx. Paste the snippet into the <head> of whichever file your project has 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 SolidJS

Open index.html at the root of the project (the file npm create solid@latest generates for the vanilla templates) and paste the snippet inside <head>:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Solid App</title>
    <script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

SolidStart has no index.html. The <html> document is the document prop of <StartServer> in src/entry-server.tsx; src/app.tsx only renders the router inside it. Add the tag to <head> next to {assets}:

src/entry-server.tsx

// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          <script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));

Restart the dev server after the change.

Route changes made by @solidjs/router (including SolidStart's file routes) 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.js returns 200 and that POST requests 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; in SolidStart the guard also covers server rendering.

src/components/SignupButton.tsx

export default function SignupButton() {
  const handleClick = () => {
    if (typeof window !== "undefined" && 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.

Get your tracking snippet

Add the snippet to SolidJS

Verify installation

Track custom events

Next steps

On this page