OnyxMetric
Integration Guides

Bubble

Add OnyxMetric analytics to your Bubble app

Bubble adds custom header code to every page of your app through the SEO / metatags settings tab. Paste the tag there once and it ships with your next deploy.

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 Bubble

  1. Open your app in the Bubble editor and click Settings in the left sidebar.
  2. Open the SEO / metatags sub-tab.
  3. Scroll to Script/meta tags in header and paste the snippet. It is added to the <head> of every page.
  4. Deploy the app to Live. The development version does not pick up the change until you deploy.

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

Bubble can run JavaScript from a workflow through the Run JavaScript action, which comes with the free Toolbox plugin.

  1. Open the Workflow tab and pick the trigger, for example When Button Signup is clicked.
  2. Add a Run JavaScript action.
  3. Paste the call, using Bubble's dynamic expressions for the values:
if (window.onyx) {
  window.onyx.event("signup_clicked", {
    plan: "Current User's Plan",
  });
}

Troubleshooting

  • Only the first pageview is tracked: apps that switch between groups on one page never change the URL, so there is nothing for the script to detect. Add a Run JavaScript action that calls window.onyx.pageview() when the group becomes visible.
  • Tag missing on the live site: header scripts are versioned with your app. Deploy to Live after saving the setting.

Next steps

On this page