Bubble.io and Segment integration: Step-by-Step Guide 2024

Bubble.io is a powerful tool, providing non-coders with the ability to create dynamic web applications. On the other hand, Segment is an analytics linker that enables businesses to collect, cleanse, and control their customer data. Integrating Segment with Bubble.io allows you to push events to hundreds of tools for marketing, analytics, warehousing, etc., straight from your Bubble app.

Follow the steps below to achieve this integration:

Step 1: Create your Segment Project

First, you will need to create a project in Segment:

1. Log into your Segment account. If you don't have one, create a new account.

2. In the dashboard, click on the "New Workspace" to create a new project.

3. Name your project, description and click on "Create Workspace".

1. In the next screen, click "Add Source".

2. Select "Javascript" as the source and click "Add Source".

3. Save the provided write key. Don’t worry, you can find it later in the settings if necessary.

Step 2: Install the Segment Toolbox Plugin in Bubble

Bubble offers a plugin named Segment – Toolbox where you can easily insert the Segment script and send track and identify calls.

After logging into your Bubble account, follow the steps below to install the plugin:

1. From your Bubble dashboard, open your desired application.

2. Click on the "Plugins" tab on the left-side panel.

3. Click on the "+ Add Plugins" button.

1. In the plugin search bar, type "Segment - Toolbox".

2. Click on the "Segment – Toolbox" from the search results, and then on "Install" button to add it to your application.

Step 3: Configure the Segment – Toolbox Plugin

Once the Segment plugin is added to Bubble, it is time to configure it.

1. Click on the "Plugins" tab on your Bubble App Editor.

2. Under "Installed Plugins", click on "Segment - Toolbox".

3. You will see a settings window for the plugin. In the "API key" field, paste the "write key" from your Segment project created in step 1.

1. Click on the checkbox to enable the "Load Segment At Page Load" to initialize Segment as soon as your page loads. If you are planning on sending server side events, click on the checkbox to enable the "Enable Server Side Events".

2. Click outside the Plugin settings window to close and automatically save the settings.

Step 4: Create Event in Bubble

Once Segment is properly initialized in your Bubble app, you are ready to send events to Segment. To do so:

1. In your Bubble Editor, open the Workflow tab.

2. Click on the "+ Add an action" button.

3. Under "Plugins", select the "Segment - Toolbox" option.

1. Click on the "Track" or "Identify" based on the user interaction or event you want to monitor.

Step 5: Linking Segment to Destinations

In order to forward the tracked events to other Services or tools, you'll need to configure destinations in Segment.

1. Return to your Segment Dashboard.

2. Navigate to your project, and pick the source that you are tracking events from.

3. Click on "Destinations" from the left-hand menu.

1. Click on "Add Destination", search and select the destination tool that you want to send tracked events to.

2. Enable the destination and configure it following the steps provided by each tool.

Now, any events that are tracked through Bubble are forwarded through Segment to your chosen destination. It could be Google Analytics, a data warehousing tool, or any other analytics tooling. You retain control of your data and can add or remove tooling as necessary without having to re-instrument your app each time.

Enjoy analyzing user interaction in your Bubble.io app in a more efficient way!