Scale your Bubble analytics with Airtable
Step-by-step creating custom analytics with Bubble and Airtable
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
- Go to Airtable and sign up.
- Create a Base
3. Inside the new Base we create the table we want to store our Analytics in. I name it ‘UI Components’.
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.
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.
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.
STep 2. Setting up the Airtable API in Bubble
1. Now go to your Bubble app and install the Bubble Airtable plugin and enter your API key.
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.
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.
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.
Step 3. The Bubble workflows to create Airtable records.
Now we start with the fun part. We will create a workflow that triggers the creation of an Airtable record on a certain action in Bubble. You can get fancy and create a backend workflow for this, especially if you want to create Airtable records from multiple locations in the app. For now, we keep things simple and create the workflows on the front-end.
- 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.
2. In the workflow steps, add a new step and select ‘Create a new Airtable record’.
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.
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.
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’.
Wrap up
And that’s how you create a nice solution to store lot’s of data without putting the strain on Bubble.
You can then use the power or Airtable to create views, add Airtable Blocks to create graphs and charts to further analyze your data.
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
