htmx
Add OnyxMetric analytics to your htmx app
htmx apps serve ordinary server-rendered HTML. The tag belongs in the <head> of the template that produces the full page, next to the htmx script.
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 htmx
In the template that renders the whole document (the one loading htmx), add the tag inside <head>:
<head>
<meta charset="utf-8" />
<title>My htmx app</title>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js"></script>
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>
</head>
<body>
<main id="content" hx-boost="true">...</main>
</body>Only full-page responses need the tag. Fragments that htmx swaps into the page must not contain it, or the script would run again on every swap.
Navigation that htmx writes to browser history is tracked as a pageview: hx-push-url and hx-boost use pushState, hx-replace-url uses replaceState, and back/forward fire popstate. A swap that leaves the URL alone is not a pageview; record a custom event for those.
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
Put data-onyx-event on the element that triggers the request. The tracker listens for clicks on the whole document, so it also works for content htmx swapped in later:
<button
hx-post="/subscribe"
hx-target="#form"
data-onyx-event="newsletter_subscribe"
data-onyx-prop-plan="free"
>
Subscribe
</button>To record the event only after the server handled the request, listen for htmx:afterRequest and call window.onyx.event() there.
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.