Bubble.io

Bubble adds custom header code to every page of your app through the SEO / metatags settings tab, so the snippet goes there once and ships with your next deploy.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to Bubble.io

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

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Bubble workflows can run arbitrary JavaScript through a Run JavaScript action (provided by the free Toolbox plugin). Use it to send events from any workflow trigger.

Open the Workflow tab and pick the trigger, for example When Button Signup is clicked.
Add a Run JavaScript action.
Paste the call, using Bubble's dynamic expressions for the values:

if (window.rybbit) {
  window.rybbit.event("signup_clicked", {
    plan: "Current User's Plan",
  });
}

Troubleshooting

Only the first pageview is tracked: Bubble apps that switch between groups on a single page do not change the URL, so there is nothing for the script to detect. Add a Run JavaScript action that calls window.rybbit.pageview() when the group becomes visible, or track those views as custom events. Apps that navigate between real Bubble pages are tracked automatically.
Snippet missing on the live site: the header script is versioned with your app, so check that you deployed to Live after saving the setting.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.