Segment

In your Segment workspace, click Connections → Sources → Add Source. Choose the source type: select 'Website' if your Bubble app is a browser-based app where the Analytics.js snippet will run, or 'HTTP API' if you plan to use server-side Tracking API calls only without the snippet. Click Add Source, give it a name like 'Bubble App – Production', and confirm. Go to the source's Settings → API Keys. Copy the Write Key — it looks like a 28-character string starting with a random prefix. This write key is intentionally designed to be a send-only credential: it can create events but cannot read data. Do not confuse it with the Segment Public API Bearer token (used for workspace management), which is a separate, secret credential. The write key can safely appear in client-side HTML because anyone who obtains it can only send events to your source, not read your data.

The Analytics.js snippet enables automatic page-view tracking and gives you access to analytics.track() and analytics.identify() functions in any JavaScript running in your Bubble app. In your Bubble editor, go to Settings (gear icon) → SEO / metatags → Script / meta tags in header. In the text area, paste the Segment Analytics.js snippet. The standard snippet loads the library asynchronously, sets your write key, and sends an initial page() call. The snippet is documented in your Segment source's Overview tab — click 'See snippet'. Replace 'YOUR_WRITE_KEY' in the snippet with your actual write key. Save and close Settings. This snippet will load on every page of your Bubble app automatically. You do not need to add it to each page individually — Bubble injects header scripts globally. Publish your app to a live URL (Bubble preview mode does not run header scripts in the same way as the deployed app). After publishing, visit your app and check Segment's Debugger tab (Sources → your source → Debugger) to confirm page() events are arriving.

1<script>
2  !function(){var i="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware","register"];analytics.factory=function(e){return function(){if(window[i].initialized)return window[i][e].apply(window[i],arguments);var n=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){var c=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void 0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);return analytics}};for(var n=0;n<analytics.methods.length;n++){var key=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/"+key+"/analytics.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="5.2.0";analytics.load("YOUR_WRITE_KEY");analytics.page()}}();
3</script>

Tracking page views is useful, but Segment's real power comes from linking events to specific users. After a user logs into your Bubble app, call analytics.identify() to associate all subsequent events with their Bubble user ID and traits. In your Bubble editor, find the workflow that runs after a successful user login — typically the workflow triggered by the 'Log in' button. Add a new step: Action → General → Run JavaScript (requires the Toolbox plugin). In the JavaScript field, write the identify call. Use Bubble's dynamic data syntax to insert the current user's unique ID, name, and email into the JavaScript. Note that Bubble's 'Run JavaScript' action does not wait for analytics.track() or analytics.identify() to resolve before the next workflow step executes. If your next workflow step redirects the user to another page immediately, the identify call may not complete before navigation interrupts it. For critical identification calls, use the server-side Tracking API path (next step) or add a short delay workflow step before the redirect.

1analytics.identify("[Current User's unique id]", {
2  name: "[Current User's Full Name]",
3  email: "[Current User's email]",
4  plan: "[Current User's plan field]",
5  createdAt: "[Current User's Created Date]"
6});

Client-side events require the user's browser to be active. For events generated by Bubble backend workflows — subscription renewals, automated status changes, or scheduled data operations — you need to call the Segment Tracking API directly from Bubble's server using the API Connector. In your Bubble editor, open Plugins → API Connector plugin. Click Add another API. Name it 'Segment Tracking API'. Set the base URL to 'https://api.segment.io/v1'. Under Authentication, select 'HTTP Basic Auth'. In the Username field, enter your Segment write key. Leave the Password field empty (Segment uses the write key as the username with an empty password). Click the Private checkbox next to the Username field to mark the write key as private. This is the correct approach — though the write key is technically public (send-only), using the Private checkbox keeps it out of Bubble's client-side bundle. Click Add another call. Name the first call 'Track Event'. Set Method to POST, URL path to '/track'. Under Use as, select Action. In the Body section, select JSON and add the required fields: type (text, default 'track'), event (text, leave blank — this will be dynamic), userId (text, leave blank — dynamic), and a properties object.

1{
2  "method": "POST",
3  "url": "https://api.segment.io/v1/track",
4  "authentication": "HTTP Basic Auth",
5  "username": "<private: your_write_key>",
6  "password": "",
7  "body": {
8    "type": "track",
9    "event": "<dynamic: event name>",
10    "userId": "<dynamic: bubble user unique id>",
11    "properties": {
12      "plan": "<dynamic: plan name>",
13      "revenue": "<dynamic: amount>"
14    }
15  }
16}

Now wire the server-side Track call to a meaningful Bubble event. A great first use case is tracking when a user upgrades their subscription plan — an event that happens as the result of a Bubble workflow step (after Stripe payment confirmation), not a user clicking a specific button. In your Bubble editor, find the workflow that runs after a successful Stripe payment (or after you update the user's 'plan' field in your database). Add a new step at the end of this workflow. Click Click here to add an action → Plugins → Segment Tracking API - Track Event. In the action's parameter fields, set event to a static text value like 'Subscription Upgraded', set userId to 'Current User's unique id', and set properties fields to relevant values like the new plan name and the subscription price. This track call runs from Bubble's server — even if the user closes the browser tab immediately after payment, this event will fire. Add a second API Connector call for Segment's /identify endpoint using the same authentication, with a JSON body containing userId and a traits object. Call this after the Track call to update the user's plan trait in Segment, which propagates to CRM and email tool destinations.

1{
2  "method": "POST",
3  "url": "https://api.segment.io/v1/identify",
4  "authentication": "HTTP Basic Auth",
5  "username": "<private: your_write_key>",
6  "password": "",
7  "body": {
8    "type": "identify",
9    "userId": "<dynamic: bubble user unique id>",
10    "traits": {
11      "email": "<dynamic: user email>",
12      "plan": "<dynamic: new plan name>",
13      "plan_updated_at": "<dynamic: current date/time>"
14    }
15  }
16}

The final step is enabling the analytics tools that receive your Segment events. In Segment, go to Connections → Destinations → Add Destination. Search for Google Analytics 4 (GA4) and click Add Destination. Select your Bubble source and configure the GA4 Measurement ID. Repeat for Amplitude, Mixpanel, or any other tool your team uses. Important: once destinations are enabled, every event Bubble sends to Segment — both client-side and server-side — is automatically forwarded. No changes to your Bubble app are needed. Review your tracking plan to avoid double-counting. The most common mistake in Bubble apps is tracking the same event from both the Analytics.js snippet (client-side button click) and the API Connector workflow action (server-side step). For example: do not fire analytics.track('Button Clicked') from a 'Run JavaScript' action AND fire a Segment Tracking API /track call for the same event from the same workflow. Choose one path per event type. Use client-side for UI interactions (button clicks, form views) and server-side for database-driven events (subscription created, record approved).