OnyxMetric
Integration Guides

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

  1. Open your project and go to Site settings → Custom code.
  2. Paste the snippet into Head code.
  3. Click Save, then Publish the site.

Use this to track only specific pages.

  1. In the Designer, open the page's Settings (cog icon next to the page name).
  2. Scroll to Custom code and paste the snippet into Inside <head> tag.
  3. 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.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

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

On this page