Qwik
Add OnyxMetric analytics to your Qwik app
A Qwik City app renders its whole document from src/root.tsx, which owns <head> and <body>. Add the tag there and it is on every route.
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 Qwik
In src/root.tsx, add the tag inside <head> after <RouterHead />:
export default component$(() => {
return (
<QwikCityProvider>
<head>
<meta charset="utf-8" />
<RouterHead />
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>
<body lang="en">
<RouterOutlet />
</body>
</QwikCityProvider>
);
});The router-head component only renders each route's head export (title, meta, links). Keep the tag in root.tsx so it does not depend on any route.
Navigation through Qwik City's <Link> is 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.jsreturns200and 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
$ event handlers run only in the browser, so window is always defined there.
export const SignupButton = component$(() => {
return (
<button
onClick$={() => {
(window as any).onyx?.event("signup_click", { location: "hero" });
}}
>
Sign up
</button>
);
});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.