Adding Google Analytics 4 to your Bubble app involves inserting the GA4 tracking script in your app's header, configuring custom events to track button clicks and form submissions, and setting up conversion goals for important user actions. This tutorial covers installing GA4, tracking page views automatically, firing custom events from Bubble workflows, and verifying data flows correctly in the GA4 dashboard.
Overview: Google Analytics in Bubble
This tutorial shows you how to add Google Analytics 4 to your Bubble app for tracking user behavior, page views, and conversion events.
Prerequisites
- A Bubble app on any plan
- A Google Analytics 4 account (analytics.google.com)
- Your GA4 Measurement ID (starts with G-)
- Basic understanding of Bubble's Settings tab
Step-by-step guide
Install the GA4 tracking script
Install the GA4 tracking script
Go to Settings in your Bubble editor. Click the SEO / metatags tab. In the 'Script/meta tags in header' section, paste your GA4 tracking script. Get this from GA4: Admin → Data Streams → your stream → View tag instructions → Manual installation. The script includes a gtag.js loader and your Measurement ID. This script loads on every page of your app, automatically tracking page views. Alternatively, install a Google Analytics Bubble plugin for simpler setup.
Expected result: The GA4 tracking script is installed in your app's header and loads on every page.
Verify page view tracking
Verify page view tracking
Preview your Bubble app and navigate between a few pages. Go to GA4 → Realtime report. You should see active users and page view events appearing within a few seconds. Check that the page titles and paths match your Bubble pages. If nothing appears, verify: the Measurement ID is correct, the script is in the header (not body), and your ad blocker is not blocking the tracking script. The GA4 DebugView (Admin → DebugView) provides detailed real-time event monitoring for troubleshooting.
Expected result: Page views appear in GA4's Realtime report as you navigate your app.
Add custom event tracking from workflows
Add custom event tracking from workflows
To track specific user actions, add JavaScript custom event calls in your Bubble workflows. Add an HTML element with a JavaScript snippet that defines a custom event function. Then use the 'Run JavaScript' action (via a plugin like Toolbox) in your workflows to fire events. Common events to track: button_click (which button), form_submit (which form), signup_complete, purchase_complete (with revenue value), and search (with search term). In your workflow, add: gtag('event', 'purchase_complete', {'value': order_total, 'currency': 'USD'}).
Pro tip: Use the GA4 DebugView to verify custom events are firing with the correct parameters before relying on the data for decisions.
Expected result: Custom events fire from Bubble workflows and appear in GA4's event reports.
Set up conversion goals
Set up conversion goals
In GA4, go to Admin → Events. Find your custom events in the list. Toggle the 'Mark as conversion' switch for key events like signup_complete, purchase_complete, and contact_form_submit. Now these events appear in the Conversions report with conversion rate calculations. For purchase events, include the 'value' parameter so GA4 tracks revenue. Set up conversion funnels in Explore → Funnel exploration to visualize drop-off between steps like page view → add to cart → checkout → purchase.
Expected result: Key actions are tracked as conversions in GA4 with revenue data and funnel visualization.
Track user properties and segments
Track user properties and segments
Send user properties to GA4 for segmented analysis. After login, fire a gtag('set', 'user_properties', {'plan_type': 'pro', 'account_age': '30'}) call with the user's plan type and other relevant attributes. This enables GA4 segments like 'free vs paid users' for behavior comparison. Set the user_id property to enable cross-device tracking: gtag('config', 'G-XXXXX', {'user_id': 'bubble_user_unique_id'}). Do not send personally identifiable information (PII) like email or name as user properties.
Expected result: User properties enable segmented analysis in GA4 reports, comparing behavior across user types.
Complete working example
1GOOGLE ANALYTICS SETUP SUMMARY2=====================================34INSTALLATION:5 Settings → SEO/metatags → Script in header6 Paste GA4 gtag.js script with Measurement ID7 Loads on every page automatically89PAGE VIEWS:10 Tracked automatically by gtag.js11 Verify: GA4 → Realtime report12 Debug: Admin → DebugView1314CUSTOM EVENTS:15 Workflow action: Run JavaScript16 gtag('event', 'event_name', {17 'parameter': 'value'18 });1920 Recommended events:21 signup_complete22 purchase_complete (value, currency)23 button_click (button_name)24 form_submit (form_name)25 search (search_term)2627CONVERSIONS:28 GA4 → Admin → Events29 Toggle 'Mark as conversion' for key events30 Include 'value' parameter for revenue tracking31 Set up funnels in Explore → Funnel exploration3233USER PROPERTIES:34 After login: gtag('set', 'user_properties', {35 'plan_type': 'pro',36 'account_age': '30'37 });38 user_id: gtag('config', 'G-XX', {39 'user_id': 'unique_id'40 });41 Never send PII (email, name)Common mistakes when setting up Google Analytics in Bubble
Why it's a problem: Placing the tracking script in the page body instead of the header
How to avoid: Place the GA4 script in Settings → SEO/metatags → Script/meta tags in header
Why it's a problem: Not verifying tracking is working before relying on data
How to avoid: Always check GA4 Realtime and DebugView after installation to confirm events are firing
Why it's a problem: Sending personally identifiable information as event parameters
How to avoid: Never send email, full name, phone, or addresses. Use anonymous identifiers like plan type and account age.
Best practices
- Verify tracking with GA4 Realtime immediately after installation
- Track meaningful custom events, not every click
- Mark key actions as conversions for funnel analysis
- Include revenue values on purchase events
- Set user properties for segmented analysis
- Never send PII to Google Analytics
- Use DebugView during development for event verification
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add Google Analytics 4 to my Bubble.io app to track page views, button clicks, and purchases with revenue data. How do I install it and set up custom events?
Help me set up Google Analytics in my app. I need the tracking script installed, custom events for signup and purchase, and conversion goals configured in GA4.
Frequently asked questions
Does GA4 work on Bubble's free plan?
Yes. You can add the GA4 tracking script on any Bubble plan. The script goes in the Settings header section which is available on all plans.
Why am I not seeing data in GA4?
Common causes: wrong Measurement ID, script placed in body instead of header, ad blocker active, or not enough time (standard reports can take 24-48 hours). Check Realtime first.
Can I track single-page app navigation?
Bubble handles page navigation as full page loads, so GA4 tracks each page transition automatically. For in-page tab or section changes, fire custom events.
Is there a GA4 Bubble plugin?
Yes. Several Bubble plugins simplify GA4 installation. However, the manual script approach gives you more control over custom events.
How do I track e-commerce purchases?
Fire the 'purchase' event with items array, value, and currency parameters. GA4 provides built-in e-commerce reports for these standardized events.
Can RapidDev help set up analytics?
Yes. RapidDev can implement comprehensive analytics tracking in Bubble including GA4, custom events, conversion tracking, and reporting dashboards.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation