For the complete documentation index, see llms.txt. This page is also available as Markdown.

πŸ€‘AdMob

Monetize your app with banner and interstitial ads through Google AdMob.

What is AdMob?

Natively provides built-in support for Google AdMob to help you monetize your iOS and Android app through banner and interstitial ads. AdMob manages ad inventory, targeting, and delivery through its own console, and Natively handles displaying ads within your app.

Prerequisites

Google AdMob Configuration

AdMob App configuration

1

Create app in AdMob

  1. Log in to your Google AdMob Console.

  2. Navigate to Apps and click Add Your First App (or Add App if you already have other apps).

  3. Select the platform - iOS or Android.

  4. Indicate whether the app is already listed on a supported app store:

    • Yes - search for your app and click Add.

    • No - select No, enter your app name, and click Add App.

If you're building for both platforms, repeat this process to create two separate apps in AdMob - one per platform.

Step 1-2
Step 3-4
Step 4 - Yes
Step 4 - No
2

Retrieve AdMob app ID

  1. Go to Apps > View All Apps.

  2. Locate your newly created app.

  3. Copy the App ID - it starts with ca-app... .

AdMob app ID

For AdMob's full setup walkthrough, see Google's AdMob setup guide.

AdMob Ad Units configuration

For each ad format you plan to use - Banner and/or Interstitial - create a corresponding Ad Unit in AdMob.

  1. Go to Apps > [your app] > Ad units.

  2. Click Add ad unit.

  3. Select the ad format (Banner or Interstitial).

  4. Name the ad unit and click Create ad unit.

  5. Copy the generated Ad unit ID.

Repeat for each format and platform you support. You'll use these Ad Unit IDs later - for testing on a registered device and for your production build once you're ready to release.

Natively Dashboard Setup

  1. Open your Natively app dashboard and navigate to Features > AdMob.

  2. Toggle the feature to Enabled.

  3. Paste the App IDs you copied from AdMob into the respective fields:

    • iOS App ID

    • Android App ID

  4. (iOS only) Enter a Permission Description.

  5. Click Save.

  6. Rebuild your app(s).

The Permission Description is the text shown to iOS users when the OS asks them to grant tracking permission (App Tracking Transparency). Explain clearly why your app needs this permission - for example: "We use your data to provide personalized advertisements that are relevant to your interests." A vague description may result in App Store rejection.

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

  1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.

  2. Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".

    • If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

  • If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Setup Logic (Banner Ads)

[Element] Natively - Admob Banner

Fields:

  • iOS UnitId - your ad unit ID, or Google's test ad unit ID (ca-app-pub-3940256099942544/2934735716).

  • Android UnitId - your ad unit ID, or Google's test ad unit ID (ca-app-pub-3940256099942544/6300978111).

  • Position - TOP or BOTTOM.

  • Size Type - AUTO or CUSTOM.

  • Banner Width - applied only when Size Type is CUSTOM.

  • Banner Height - applied only when Size Type is CUSTOM.

  • Preload Ad on Initialize - loads the ad automatically on page load.

  • Show Ad on Initialize - displays the ad automatically once loaded.

Events:

  • Did finish setup - fires when the banner has finished setting up and is ready to load an ad.

  • Did load ad - fires when ad loading is finished, and the banner is ready to be displayed (called after Load Ad action).

  • Did fail to receive ad - fires when loading the ad failed (can occur after Load Ad action).

  • Did record click - fires when the user clicks on the banner.

  • Did record impression - fires when the user sees the ad.

  • Did show banner - fires when the banner is successfully shown.

  • Did hide banner - fires when the banner is successfully hidden.

States:

  • Banner Is Ready - Yes/No. Whether the banner has an ad ready to display.

  • Banner Is Visible - Yes/No. Whether the banner is currently shown.

  • Ad Is Loaded - Yes/No. Whether ad loading has finished.

  • Latest Error Message - text description of the last error.

  • Latest Event - the latest event code received from the app:

    • DID_FINISH_SETUP - the banner finished setting up and is ready to load an ad.

    • DID_LOAD_AD - ad loading finished, and the banner is ready to be displayed.

    • DID_FAIL_TO_RECEIVE_AD - loading the ad failed.

    • DID_RECORD_CLICK - the user clicked on the banner.

    • DID_RECORD_IMPRESSION - the user saw the ad.

    • DID_SHOW_BANNER - the banner was successfully shown.

    • DID_HIDE_BANNER - the banner was successfully hidden.

Actions:

  • Show Banner - displays the banner on the screen.

  • Hide Banner - removes the banner from the screen.

  • Load Ad - manually fetches a new ad.

  • Check Banner Visible - refreshes the Banner Is Visible state.

  • Check Banner Ready - refreshes the Banner Is Ready state

Setup Logic (Interstitial Ads)

[Element] Natively - Admob Interstitial

Fields:

  • iOS UnitId - your ad unit ID, or Google's test ID (ca-app-pub-3940256099942544/4411468910).

  • Android UnitId - your ad unit ID, or Google's test ID (ca-app-pub-3940256099942544/1033173712).

  • Auto Ad Reload - automatically loads a new ad after the Did dismiss ad event. You'll be notified once it's ready via the Did Load Ad event.

An ad must be fetched again after each time it's shown. If Auto Ad Reload is enabled, this happens automatically - listen for Did Load Ad. If disabled, listen for Did dismiss ad and call Load Ad manually.

Events:

  • Did Load Ad - fires when the ad view has finished setup and is ready to be displayed.

  • Did record click - fires when the user clicks on the ad.

  • Did fail to present - fires when presenting the ad failed (can occur after Show Ad).

  • Did fail to load ad - fires when loading the ad failed (can occur after Load Ad).

  • Did show ad - fires when the ad view is displayed to the user.

  • Did dismiss ad - fires when the user dismisses (closes) the ad view.

  • Did record impression - fires when the user sees the ad.

States:

  • Interstitial Is Ready - Yes/No. Whether the ad view is ready to be displayed.

  • Latest Error Message - text description of the last error.

  • Latest Event - the latest event code received from the app:

    • DID_FAIL_TO_LOAD_AD - loading the ad failed.

    • DID_LOAD_AD - the ad finished loading and is ready to display.

    • DID_SHOW_AD - the ad was displayed to the user.

    • DID_RECORD_CLICK - the user clicked on the ad.

    • DID_FAIL_TO_PRESENT - presenting the ad failed.

    • DID_DISMISS_AD - the user closed the ad view.

    • DID_RECORD_IMPRESSION - the user saw the ad.

Actions:

  • Show Ad - displays the interstitial ad.

  • Load Ad - loads a new ad manually.

  • Check Interstitial Ready - checks whether the ad view is active and can be displayed.

How to use

Remember the Preload/Show dependency for Banner

showAd (or Show Ad on Initialize in Bubble) only takes effect if preloadAd is also enabled - showing requires the ad to have already loaded. If you want manual control, disable both and call loadAd() then showBanner() yourself.

Always reload Interstitial ads after they're shown

An interstitial ad is single-use - once dismissed, you need a new one. Enable auto-reload (Auto Ad Reload in Bubble, or the autoAdReload parameter in the JS SDK) to have this happen automatically, or manually call loadAd() after the ad is dismissed.

Only one Interstitial instance per page

Creating multiple NativelyAdmobInterstitial instances on the same page - or reloading the page frequently while one is active - can cause unexpected behavior.

Check readiness before showing an ad

Call bannerIsReady() or interstitialIsReady() (or the corresponding Check Banner Ready / Check Interstitial Ready action in Bubble) before showing an ad, to avoid trying to display one that hasn't finished loading yet.

Testing

Quick testing with sample ads

Use Google's official test unit IDs - they always return test ads, regardless of whether the device is registered as a test device. Safe to use on any device without violating AdMob policy.

  • iOS - ca-app-pub-3940256099942544/2934735716 .

  • Android - ca-app-pub-3940256099942544/6300978111 .

Interstitial:

  • iOS - ca-app-pub-3940256099942544/1033173712 .

  • Android - ca-app-pub-3940256099942544/4411468910 .

Test device for live ads

If you want to preview how your actual, real ad units will render before going live, register your device in AdMob, then use your real ad unit IDs while testing on that device. Registered test devices see real ad content marked as a test, without risking policy violations from real clicks or impressions.

  1. In AdMob, go to Settings > Test devices.

  2. Click Add Test Device.

  3. Enter your device name and Advertising ID/IDFA.

  4. In your Bubble plugin fields or JavaScript code, replace the sample test unit IDs with your real Ad Unit IDs - created in the AdMob Ad Units configuration above.

Steps 1-2
Step 3

For AdMob's full app testing guides, see iOS testing and Android testing.

Release

Once your ads are tested and behaving as expected, the last steps are to switch to live ad units, publish your app, and formally connect it to AdMob - without this final connection, your app will not serve real ads even after it's live in the stores.

1

Switch to live ad units

Swap the test IDs in your Bubble plugin fields or JavaScript code for your real Ad Unit IDs, created in the AdMob Ad Units configuration above.

2

Submit and publish your app

Submit your app to the App Store and Google Play as you normally would. See Testing & Submitting your app for the full release process.

3

Once your app is approved and published on the App Store and/or Google Play:

  1. Go to Apps > [your app] > App Settings in AdMob.

  2. Click Add Store.

  3. Connect your App Store and/or Google Play listing.

This step is required for real ads to serve. Review can take about a day - during that window, ad requests from your live app may return no fill or fall back to test behavior.

Step 2

Troubleshooting

No ads are showing, even with test unit IDs

Confirm the feature is enabled and your App IDs are correctly entered under Features > AdMob, then confirm the app has been rebuilt - AdMob configuration changes only take effect after a rebuild

Interstitial ad fails to show, or showInterstitialAd() does nothing

Confirm interstitialIsReady() returns true before calling showInterstitialAd(). Showing an ad that hasn't finished loading fails silently or triggers DID_FAIL_TO_PRESENT .

No new interstitial ad appears after the previous one was dismissed

An interstitial ad is single-use. Confirm Auto Ad Reload / autoAdReload is enabled, or manually call loadAd() after DID_DISMISS_AD.

Multiple Interstitial ads misbehave, or events fire unexpectedly

Only one NativelyAdmobInterstitial instance is supported per page. Check that you haven't created more than one, and avoid reloading the page frequently while an interstitial is active.

Real ads don't show after publishing

Confirm you've linked your live App Store / Google Play listing to AdMob under Apps > [Your App > App Settings > Add Store. This step is required for real ads to serve and can take about a day to process.

App rejected by Apple for vague tracking permission text

The Permission Description (iOS only) must clearly explain why your app requests tracking. Avoid vague text like "to improve the app" - be specific, e.g., "We use your data to provide personalized advertisements that are relevant to your interests."

Not working in a web browser or the Natively Preview app

AdMob is a native feature and does not work in a standard web browser or in the Natively Preview app. Test on a real device using a full Natively build.

Last updated