You can add Google AdSense to a Bubble app by embedding the AdSense script and ad unit code inside HTML elements. This tutorial covers getting your AdSense approval, adding the verification script, placing ad units on your pages, and positioning ads for good user experience without breaking your Bubble layout.
Overview: Adding Google AdSense to Bubble
Monetizing your Bubble app with Google AdSense lets you earn revenue from display ads. Since Bubble does not have a native AdSense integration, you embed the AdSense code using HTML elements. This tutorial covers the full process from getting approved to placing ads on your pages with proper positioning and responsive behavior.
Prerequisites
- A Google AdSense account (sign up at adsense.google.com)
- A Bubble app deployed to a custom domain (recommended for approval)
- Content on your app that complies with AdSense policies
- Basic understanding of Bubble's HTML element
Step-by-step guide
Add the AdSense verification script to your app
Add the AdSense verification script to your app
Go to Settings in your Bubble editor. Click the SEO / metatags tab. Find the Script/meta tags in header field. Paste your AdSense verification script here — it looks like: <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX" crossorigin="anonymous"></script>. This script loads on every page of your app, which Google requires for site verification.
Pro tip: Add the script to the header, not the body. The header field in Settings ensures it loads on every page automatically.
Expected result: The AdSense script loads on every page of your app, enabling Google to verify your site.
Create ad units in your AdSense dashboard
Create ad units in your AdSense dashboard
Log in to your Google AdSense account. Go to Ads → By ad unit. Click Create new ad unit and choose a format: Display ads (versatile), In-feed ads (for lists), or In-article ads (for content). Configure the ad size — Responsive is recommended for Bubble apps. Copy the generated ad unit code, which includes both a script tag and an ins element with your ad slot ID.
Expected result: You have an ad unit code ready to embed in your Bubble pages.
Embed ad units using HTML elements in Bubble
Embed ad units using HTML elements in Bubble
On the page where you want an ad, click the + icon in the element palette and search for HTML. Drag the HTML element onto your page and position it where you want the ad to appear. Paste your ad unit code into the HTML element's content field. The code typically looks like an ins tag with data-ad-client, data-ad-slot, and data-ad-format attributes, followed by a script tag that pushes the ad to load.
1<ins class="adsbygoogle"2 style="display:block"3 data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"4 data-ad-slot="1234567890"5 data-ad-format="auto"6 data-full-width-responsive="true"></ins>7<script>8 (adsbygoogle = window.adsbygoogle || []).push({});9</script>Pro tip: Set the HTML element's width to 100% of its container and use data-ad-format="auto" with data-full-width-responsive="true" for best responsive behavior.
Expected result: An ad placeholder appears on your page and loads a real ad when viewed on the live site.
Position ads for good user experience
Position ads for good user experience
Place ads strategically: between content sections (not over navigation), in the sidebar of a split layout, or between items in a list using a Repeating Group with an injected HTML element at intervals. Avoid placing ads where they cover interactive elements or interfere with the user flow. Use Bubble's responsive settings to hide ads on mobile if they disrupt the mobile experience — add a conditional on the HTML element to hide it at mobile breakpoints.
Expected result: Ads appear in non-intrusive positions that comply with AdSense policies and maintain good UX.
Test and verify ads are loading
Test and verify ads are loading
Deploy your app to live (ads do not render in Bubble's preview/development mode). Visit your live site and check that ads appear. Use your browser's Developer Tools (Network tab) to verify the adsbygoogle script is loading. In your AdSense dashboard, check the Sites section to confirm your site is verified. Note that new sites may take 24-48 hours for ads to start showing after approval.
Expected result: Ads load and display correctly on your live Bubble app.
Complete working example
1ADSENSE INTEGRATION SUMMARY2============================34STEP 1: Global Script (Settings → SEO/metatags → Header)5 <script async 6 src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX" 7 crossorigin="anonymous">8 </script>910STEP 2: Ad Unit HTML Element (per page)11 <ins class="adsbygoogle"12 style="display:block"13 data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"14 data-ad-slot="1234567890"15 data-ad-format="auto"16 data-full-width-responsive="true"></ins>17 <script>18 (adsbygoogle = window.adsbygoogle || []).push({});19 </script>2021PLACEMENT RECOMMENDATIONS:22 - Banner: top of page, below header (728x90 or responsive)23 - Sidebar: right column of two-column layout (300x250)24 - In-content: between sections (responsive auto)25 - In-feed: every 5th item in a list (in-feed format)2627RESPONSIVE HANDLING:28 - HTML element conditional:29 When page width < 768:30 → This element is visible: no (optional, for mobile)31 - Use data-full-width-responsive="true" for auto-sizing3233TESTING:34 - Ads only render on the live deployed site, not in preview35 - Allow 24-48 hours after approval for ads to appear36 - Check Network tab in browser DevTools for adsbygoogle requestsCommon mistakes when integrating Google Adsense in Bubble.io: Step-by-Step Guide
Why it's a problem: Trying to test ads in Bubble's preview mode
How to avoid: Deploy to live and test on your production URL. Use the AdSense dashboard to verify impressions.
Why it's a problem: Adding the ad script in the HTML element instead of the global header
How to avoid: Add the main script in Settings → SEO/metatags → Header. Only put the ins tag and push script in each HTML element.
Why it's a problem: Placing ads that cover navigation or interactive elements
How to avoid: Place ads between content sections, in sidebars, or at the bottom of pages — never over buttons, menus, or forms
Best practices
- Add the main AdSense script in the global header (Settings → SEO/metatags) so it loads on every page once
- Use responsive ad format (data-ad-format="auto") for best results across screen sizes
- Place ads between content sections rather than over interactive elements
- Hide ads on mobile breakpoints if they disrupt the user experience
- Comply with AdSense policies — no clicking your own ads, no deceptive placement
- Monitor your AdSense dashboard for policy violations and fix them promptly
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add Google AdSense ads to my Bubble.io app. I have a blog-style app with multiple pages. Can you walk me through adding the global script, creating ad units, and embedding them in HTML elements with responsive sizing?
Add Google AdSense to my app. I need the global verification script in the header and responsive ad units on my blog listing page and individual post pages. Position them between content sections.
Frequently asked questions
Do I need a custom domain for AdSense?
Google strongly recommends a custom domain for AdSense approval. While it may be possible with a bubbleapps.io subdomain, a custom domain significantly increases your chances of approval.
Why are my ads not showing after adding the code?
Ads do not show in Bubble's preview mode — deploy to live first. New sites can take 24-48 hours for ads to appear after approval. Check your AdSense dashboard for any policy issues.
How much can I earn with AdSense on a Bubble app?
Earnings depend on traffic, niche, and geographic location of your users. Typical RPMs (revenue per 1000 pageviews) range from $1-$10 for general content and $5-$30 for finance or tech niches.
Will AdSense slow down my Bubble app?
The AdSense script adds some load time. Use async loading (included in the standard code) and limit the number of ad units per page to 3-4 to minimize impact.
Can I use other ad networks besides AdSense?
Yes. Any ad network that provides HTML embed code can be added to Bubble via HTML elements. Media.net, Ezoic, and Carbon Ads are popular alternatives. RapidDev can help integrate and optimize ad placements for maximum revenue.
How do I comply with GDPR and cookie consent for ads?
You need a cookie consent banner before loading ad scripts. Use a consent management plugin or embed a cookie consent script in the header that gates the AdSense script loading based on user consent.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation