How to add analytics to a Bubble app

Bubble applies header scripts on paid plans. Bubble serves your development version under /version-test on the same domain as Live, which is easy to forget: without the exclusion, every test run of a workflow shows up in your analytics.

How to install VisitTrack on Bubble

1. 1

   Step 1: Copy your site id

   Add your app's domain as a site in VisitTrack and copy the snippet from the install step. Replace SITE_ID below.

2. 2

   Step 2: Open Settings → SEO / metatags

   In the Bubble editor, open Settings → SEO / metatags and scroll to Script/meta tags in header.

3. 3

   Step 3: Paste the tag with the version-test exclusion

   data-exclude takes comma-separated paths with * as a wildcard, and is checked on every event — so nothing from the development version is sent.

   Script/meta tags in headerCopy

   <script defer data-site="SITE_ID" data-exclude="/version-test*" src="https://visitrack.app/tracker.js"></script>

4. 4

   Step 4: Deploy to Live

   Deploy the app to Live, then open the live URL (not /version-test) and use it for a minute.

How to check VisitTrack is working on Bubble

1. Open the Live app and visit two pages.
2. VisitTrack's live view shows you within seconds; the Pages tab lists both pages.
3. Open /version-test too and confirm it doesn't appear — with data-debug on the tag, the console logs ignored for those events.

Does VisitTrack track Bubble page navigation?

Each Bubble page (/index, /dashboard, /settings) is counted by its path. Bubble apps often switch "tabs" on one page by changing URL parameters (/dashboard?tab=billing) — the path stays the same, so those aren't separate pageviews.

If those in-page screens matter, fire a custom event when you show them (below) — screen_view with a screen prop works well — and build a funnel from it.

How to track custom events and goals in Bubble

Install the free Toolbox plugin to get a Run javascript action, then add it to a workflow right after the step that matters — for example after Sign the user up. Bubble lets you insert dynamic data into the code with the expression editor, such as the current user's unique id.

To tie visits to accounts, call identify in the same workflow; the person then appears in VisitTrack's People tab with their traits.

// Workflow: Sign the user up → Run javascript
window.visitrack && window.visitrack("signup", { plan: "free" });

// Optional, same workflow: link this visitor to the Bubble user
window.visitrack && window.visitrack.identify("Current User's unique id", { plan: "free" });

For a click-only event, an HTML element containing <a href="/pricing" data-vt-goal="pricing_click"> works too. Then make the event a goal in Settings → Goals. Replace the quoted user id above with Bubble's dynamic expression.

Revenue attribution on Bubble

Revenue attribution needs the visitor id on the payment. If you charge with Stripe Payment Links, the Stripe guide's Payment Link snippet adds it automatically — paste it into the header field after the tracker. If you create Stripe Checkout Sessions through the API Connector, pass the visitor id (read with window.visitrack.visitorId() in a Toolbox "JavaScript to Bubble" element) as client_reference_id.

Script options you might need on Bubble

All optional — add them to the same tag. Full reference: script configuration.

Bubble troubleshooting

Not on Bubble? See all 29 integration guides.