SolidJS

A client-side Solid app built with Vite has one index.html at its root. A SolidStart app builds its document in src/entry-server.tsx. Add the tag to whichever file your project has.

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to SolidJS

Open index.html and add the tag inside <head>:

index.html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Solid App</title>
  <script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>

SolidStart has no index.html. The <html> document is the document prop of <StartServer> in src/entry-server.tsx. Add the tag in <head> beside {assets}:

src/entry-server.tsx

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));

Restart the dev server afterwards.

Route changes from @solidjs/router, including SolidStart file routes, are tracked automatically.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

View the page source and search for script.js?siteId= to confirm the tag is present.
In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
Turn off ad blockers, or proxy the script through your own domain.
Read script troubleshooting for other causes.

Track custom events

src/components/SignupButton.tsx

export default function SignupButton() {
  const handleClick = () => {
    if (typeof window !== "undefined") {
      (window as any).onyx?.event("signup_click", { location: "hero" });
    }
  };

  return <button onClick={handleClick}>Sign up</button>;
}

The typeof window check matters in SolidStart, where components also render on the server.

Next steps

Track custom events such as signups, purchases, and clicks.
Identify users to tie sessions to accounts.
Proxy the script through your own domain to get past ad blockers.
Script attributes let you skip or mask URLs and tag events.

Copy your tracking snippet

Add the snippet to SolidJS

Check that it works

Track custom events

Next steps

On this page