Bubble.io

Name: Rybbit
Author: Rybbit

This guide explains how to integrate Rybbit with your Bubble.io application to track user behavior, page views, and custom events.

How to Add Rybbit to Your Bubble App

Bubble allows you to add custom code, including JavaScript snippets, to the header of your pages.

1. Retrieve Your Tracking Script

Navigate to your Rybbit dashboard to obtain your code snippet. It will look like this:


<script
  src="https://app.rybbit.io/api/script.js"
  data-site-id="YOUR_SITE_ID"
  async
  defer
></script>

Remember to replace YOUR_SITE_ID with your actual Site ID.

2. Access Your Bubble App Settings

Open your Bubble application in the editor.
Navigate to the Settings tab in the left-hand sidebar.
Go to the SEO / metatags sub-tab.

3. Add the Snippet to the Page Header

Scroll down to the section titled “Script/meta tags in header”.
Paste your Rybbit tracking snippet into this box. This will add the script to the <head> section of every page in your Bubble app.

Alternatively, some Bubble plans or configurations might offer a dedicated section for “Advanced Settings” or “Custom Code” where header scripts can be placed globally or on specific pages. The “SEO / metatags” header script section is generally the most common place for global scripts.

4. Deploy Your App

After adding the script, ensure you deploy your Bubble application to the live version for the changes to take effect.

5. Verify Installation

Open your live Bubble application and navigate through a few pages. Then, check your Rybbit dashboard to see if data is being received. You can also inspect your browser’s network tab to confirm that script.js is loaded.

Page View Tracking in Bubble Apps: Bubble applications often behave like Single Page Applications (SPAs) for navigation between “pages” (which are often groups shown/hidden on a single actual HTML page). Rybbit’s script is designed to detect URL changes in SPAs.

If your Bubble app uses actual URL route changes for different views, Rybbit should track these automatically.
If navigation primarily involves showing/hiding groups without URL changes, Rybbit will only track the initial page load. For more granular tracking of “virtual” page views in such cases, you would need to use custom event tracking.
If URL changes occur but are not automatically tracked, you might need to trigger window.rybbit.trackPageview() manually using a Bubble workflow action that runs JavaScript when a “page” (group) becomes visible.

Custom Event Tracking in Bubble

You can track custom events in Bubble by using a workflow action that runs JavaScript.

1. Create a Workflow

In the Bubble editor, go to the Workflow tab.
Create a new workflow triggered by the event you want to track (e.g., “When Button A is clicked”, “When a user’s data changes”, “When a page is loaded” and a certain condition is met).

2. Add “Run JavaScript” Action

Within your workflow, add a new action.
Search for and select the “Run JavaScript” action (this might be provided by a free official Bubble plugin or a community plugin if not available by default; ensure you have a way to execute arbitrary JS).

3. Add Rybbit Tracking Code

In the “Run JavaScript” action’s code block, add your Rybbit event tracking code:


if (typeof window.rybbit !== 'undefined') {
  window.rybbit.trackEvent('bubble_event_name', {
    // You can use Bubble's dynamic expressions here to pass data
    // For example: 'User Email': Current User's Email,
    // 'Clicked Element': This Button's Text (if applicable)
    property1: 'value1',
    property2: 'value2'
  });
}

Replace 'bubble_event_name' with a descriptive name for your event. You can use Bubble’s dynamic data expressions within the JavaScript if the “Run JavaScript” action supports it, or pass data into the JavaScript action from previous workflow steps.

Example: If tracking a button click for a specific item:


// Assuming you can pass dynamic data to the JS action
// let itemName = "Dynamic Item Name from Bubble"; // This would be set by Bubble's dynamic data
// let itemCategory = "Dynamic Category from Bubble";
 
if (typeof window.rybbit !== 'undefined') {
  window.rybbit.trackEvent('item_interaction', {
    name: itemName,       // Replace with actual dynamic data
    category: itemCategory // Replace with actual dynamic data
  });
}

4. Test Your Event

Preview your Bubble app and trigger the workflow.
Check your Rybbit dashboard to see if the custom event data is being received.

By adding the global script and using “Run JavaScript” workflow actions, you can effectively integrate Rybbit analytics into your Bubble.io application.