Segment

Segment is a third party tool that helps you manage the data generated by your web properties. In a nutshell, it lets you connect "Sources" of data (e.g. your Bubble app) with "Destinations" that the data should flow to. Destinations include analytics tools like Google Analytics, marketing tools like Mailchimp, data warehouses like Snowflake, and more.

At Bubble, we use Segment because it lets us implement all the event logging we want in our product once, and lets us direct that stream of data to all the other tools we use. In fact, we use this Segment plugin ourselves on bubble.io!

Note: Segment is a third-party tool that has its own Pricing structure, though there is a free tier.

Track an event with Segment

Segment connects you with more than one analytics service at a time. This action tracks an event, which can be sent to Mixpanel, Hipp, etc. You must create an account with Mixpanel and enter the keys in the Plugins Tab. This action tracks events on the client side.

Event name

Select the name of the event to send. Select an existing one or create a new one.

Additional values

Define more key/values to send more data to Segment, such as age, gender, etc.

Track an event with Segment (Server)

This action tracks an event and sends to Segment from the Bubble server instead of the client. Use this method for tracking events that require greater reliability, as it ensures ad blockers do not disrupt the event. This action uses capacity, so use for only critical events. This option will automatically package some client data such as page, user agent, locale, ip address, and email of the user.

Event name

Select the name of the event to send. Select an existing one or create a new one.

Additional values

Define more key/values to send more data to Segment, such as age, gender, etc.

Send a page view to Segment

This registers a page view with Segment, to send to Google Analytics, for example.

Page category

Define categories for the pages. Select an existing one or create a new one.

Additional values

Define more key/values to send more data to Segment, such as age, gender, etc.

Identify a user with Segment

Calling this action makes sure all events are attached to the relevant user in Segment and the other services Segment connects to.

Setup

Installing the Segment plugin

You can find the Segment plugin just like any other plugin: in the marketplace in the Plugins tab from your Bubble editor. (These instructions are for the Bubble-made Segment plugin.)

After you install it, you should see the plugin's settings like this:

Write key

This key is used to send data from your app to Segment. You can find this information in the Segment UI by navigating to Sources → Settings → API Keys.

Using this with Google Analytics

Google Analytics is a popular tool to measure traffic to your app, as well as log events.Note that if you begin using Segment, you should not also use the Google Analytics Bubble plugin. Instead, you should connect GA as a Destination in your Segment account.

To finish establishing the Segment -> Google Analytics connection, in the Destinations tab -> Settings (for Google Analytics), make sure to set:

• Website Tracking ID (as your Google Analytics id)

• Serverside Tracking ID (same as above, your Google Analytics id)

FAQ

• Note that various browser extensions and settings can interfere with Segment tracking. In practice, this usually only impacts a smaller minority of your potential logs, but may differ by demographics of your audience.

  • If there's a user action you really want to log, consider using the "Track an event with Segment (Server)" action, which does the logging on the Bubble server, but note that these events will be logged without some of the usual metadata (i.e. not the metadata that comes from the user's browser)

• Segment has a live debugger where you can see events being logged by Segment in real time.

• You generally will want to use the "Identify a user with Segment" action if you're using any of the other Segment tracking actions