Image for post
Image for post
Photo by Webaroo on Unsplash

Scale your Bubble analytics with Airtable

Step-by-step creating custom analytics with Bubble and Airtable

Vincent Krouwels
Apr 16 · 5 min read

We’re always looking to increase the performance of our apps in Bubble and have tried and implemented our share of external database solutions.

But recently, Bubble published a plugin that allows for a very easy integration with Airtable. This makes it a lot easier to use the Airtable API, and their amazing spreadsheet database.

We use it to store analytics data. Your Bubble app generates a lot of data and sometimes you even purposefully generate data, simply for analytics. This can range from creating a dashboard to track user conversion of your app, all the way to a full auditing system with a log of every action taken by users in your app.

In this case, we’ll be using Airtable to store anonymous data around the use of Bubble UI Builder tool openBuild. (more on that coming soon!)

We want to know what UI elements users pick the most so we can see which elements are popular and we should be creating variations or examples of. We can also get some insights in what elements might be missing.

So, let’s go through setting that up, step by step!

Step 1. Setting up Airtable

  1. Create a Base
Image for post
Image for post

3. Inside the new Base we create the table we want to store our Analytics in. I name it ‘UI Components’.

Image for post
Image for post

4. Now we create the fields. The first field will be the component name. It is a simple text field. Create as many fields as you want.

Image for post
Image for post

5. I said we collect anonymous data, that’s true, but I do want to know which User used which component, so I’m storing the User unique ID into the Airtable too. If we wish to know which user did what, we can always look that up in the Bubble App Data.

Image for post
Image for post

6. We have to create a first row of data or else the API does not return the field names. So create some dummy data in the first row. Finally, go to your Airtable Account overview and generate an API key. You need this in the Airtable Plugin in Bubble.

Image for post
Image for post

STep 2. Setting up the Airtable API in Bubble

2. Click to add a Base. Use the name of the Base in Airtable and paste the Base ID. To get your Base ID, go to airtable.com.api and find your Base in the list. It is the string between the first and second slash.

Image for post
Image for post

3. Create a new Table and make sure to name it exactly as the table in Airtable. As for permissions, I want to read this data (maybe at some point we want to pull in some of the analytics data in the app) and I want to Create&Modify as we are using Bubble to create new records in Airtable. I don’t need to delete anything through API at this point.

Image for post
Image for post

4. Then we let the magic happen! Click Initialize Table and if your table has a row of data, it should retrieve it. Your Airtable is now connected to Bubble.

Image for post
Image for post
Perfect!

Step 3. The Bubble workflows to create Airtable records.

  1. Find the action in your Bubble app you want to trigger this workflow for. In my case, it’s when a user clicks the button to select a UI component.
Image for post
Image for post

2. In the workflow steps, add a new step and select ‘Create a new Airtable record’.

Image for post
Image for post

3. It could be that the Table you just initialized is not visible in the dropdown list of ‘Type’. In that case, simply refresh the browser and it should be there. Map the fields you want to store in Airtable to the right Bubble data. For example, find the Current User’s unique id to store as the ‘User’ field. And that’s it! You setup the workflow.

Image for post
Image for post

4. Now, let’s test it. Go and preview your app and trigger the action. Head over to your Airtable and check if the new row is created.

Image for post
Image for post
yay!

Tip: You don’t have to create a ‘Created Date’ field in Airtable. This is handled automatically. You just need to add another field in your Airtable table called ‘Created Time’.

Image for post
Image for post

Wrap up

You can then use the power or Airtable to create views, add Airtable Blocks to create graphs and charts to further analyze your data.

Image for post
Image for post

As always, be careful about what data you store. If you store any Personally Identifiable Information (PII), you should update your privacy policy to add Airtable as a data processor.

Bonus: joinsecret.com has a pretty amazing deal on Airtable. Check it out: https://www.joinsecret.com/fr/offers/airtable-coupon-1800?r=4424b1b1bedb

Ideable*

Digital product design agency embracing no-code

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store