# Bubble.io > Add cookieless product analytics to your Bubble.io application import { Steps, Step } from "@/components/docs"; import { Callout } from "@/components/docs"; import { CodeBlock } from "@/components/docs"; import { Card, Cards } from "@/components/docs"; This guide explains how to integrate Databuddy with your Bubble.io application to track user behavior, page views, and custom events. ## How to Add Databuddy to Your Bubble App Bubble allows you to add custom code, including JavaScript snippets, to the header of your pages. Navigate to your [Databuddy dashboard](https://app.databuddy.cc) to get your tracking code snippet. It will look like this: `} /> Remember to replace `YOUR_CLIENT_ID` with your actual Client ID. - Open your Bubble application in the editor - Navigate to the **Settings** tab in the left-hand sidebar - Go to the **SEO / metatags** sub-tab - Scroll down to the section titled **"Script/meta tags in header"** - Paste your Databuddy tracking snippet into this box. This will add the script to the `` 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. After adding the script, ensure you deploy your Bubble application to the live version for the changes to take effect. Open your live Bubble application and navigate through a few pages. Then, check your [Databuddy dashboard](https://app.databuddy.cc) to see if data is being received. You can also inspect your browser's network tab to confirm the script 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). Databuddy automatically detects URL changes in SPAs. - If your Bubble app uses actual URL route changes for different views, Databuddy tracks these automatically - If navigation primarily involves showing/hiding groups without URL changes, Databuddy will only track the initial page load. Track those "virtual" views as custom events instead: fire `window.databuddy.track('screen_viewed', { screen: 'dashboard' })` from a Bubble workflow action that runs JavaScript when a "page" (group) becomes visible ## Custom Event Tracking in Bubble Track custom events in Bubble by using a workflow action that runs JavaScript. 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). 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). In the "Run JavaScript" action's code block, add your Databuddy event tracking code: 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: - Preview your Bubble app and trigger the workflow - Check your [Databuddy dashboard](https://app.databuddy.cc) to see if the custom event data is being received ## Configuration Options Enable additional tracking features by adding data attributes to your script tag: `} /> ## Common Use Cases ### Tracking Button Clicks Track when users click specific buttons: ### Tracking Form Submissions Track form submissions: ### Tracking Virtual Page Views Bubble group swaps do not change the URL, so they cannot be tracked as page views. Track them as custom events instead: ### Tracking User Actions Track user interactions with dynamic data: ## Why Not Data Attributes? Databuddy supports automatic tracking via `data-track` attributes, but Bubble does not let you set custom attributes on its native elements. Use workflow-triggered "Run JavaScript" actions calling `window.databuddy.track()` instead, as shown above. ## Troubleshooting ### Script Not Loading - Verify the script is in the **"Script/meta tags in header"** section - Check browser console for errors - Ensure your Client ID is correct - Deploy your Bubble app to see changes take effect - Clear browser cache and reload ### Events Not Tracking - Confirm `window.databuddy` exists before calling tracking methods - Always check `typeof window !== 'undefined'` for safety - Check browser console for any errors - Verify events appear in your Databuddy dashboard after 2-3 minutes - Use browser dev tools Network tab to confirm requests are being sent ### Virtual Page Views Not Tracked - Bubble apps often use show/hide groups instead of URL changes - Track these as custom events with `window.databuddy.track('screen_viewed', { screen: '...' })` - Create workflows that trigger on group visibility changes ### Dynamic Data Not Passing - Ensure Bubble's "Run JavaScript" action supports dynamic data - Check that variables are properly scoped and accessible - Test with hardcoded values first, then add dynamic data - Verify data types match what Databuddy expects (strings, numbers, etc.) ## Related Integrations No-code integration for Framer websites. Visual builder integration for Webflow sites. Simple setup for Wix websites. Need help with your Bubble.io integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).