Webflow
Add OnyxMetric analytics to your Webflow site
Webflow takes custom <head> code site-wide in Site settings → Custom code or per page in the page settings. Either way, the code reaches the live site only when you publish.
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 Webflow
- Open your project and go to Site settings → Custom code.
- Paste the snippet into Head code.
- Click Save, then Publish the site.
Use this to track only specific pages.
- In the Designer, open the page's Settings (cog icon next to the page name).
- Scroll to Custom code and paste the snippet into Inside
<head>tag. - Click Save, then Publish the site.
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
Give the element an ID in the Designer (Settings panel, General, ID). Then attach a listener in Site settings → Custom code → Footer code, or in an Embed element on that page:
<script>
document.addEventListener("DOMContentLoaded", function () {
var button = document.getElementById("my-special-button");
if (!button) return;
button.addEventListener("click", function () {
window.onyx?.event("button_click", {
button_id: "my-special-button",
page_path: window.location.pathname,
});
});
});
</script>The same pattern works for a form's submit event. Webflow handles submission itself, so the event fires on the attempt, not on confirmed success.
Troubleshooting
- Changes not on the live site: custom code stays staged until you Publish. Check the published site, not the Designer preview.
- Interactions that show or hide sections without changing the URL produce one pageview. Track them as custom events, or call
window.onyx.pageview()from your own script. - Scripts that read the DOM belong in Footer code, so the elements exist when they run.
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.