🤑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.

Currently, Natively only supports Banner and Interstitial ad formats.

Prerequisites

This feature requires the Unlimited or Lifetime plan. See all plans

A Google AdMob account.
Your iOS and/or Android app published in the Natively Dashboard.

Google AdMob Configuration

AdMob App configuration

Create app in AdMob

Log in to your Google AdMob Console.
Navigate to Apps and click Add Your First App (or Add App if you already have other apps).
Select the platform - iOS or Android.
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.

Retrieve AdMob app ID

Go to Apps > View All Apps.
Locate your newly created app.
Copy the App ID - it starts with ca-app... .

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.

Go to Apps > [your app] > Ad units.
Click Add ad unit.
Select the ad format (Banner or Interstitial).
Name the ad unit and click Create ad unit.
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

Open your Natively app dashboard and navigate to Features > AdMob.
Toggle the feature to Enabled.
Paste the App IDs you copied from AdMob into the respective fields:
- iOS App ID
- Android App ID
(iOS only) Enter a Permission Description.
Click Save.
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.

You must rebuild your app for these changes to take effect.

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.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
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.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic (Banner Ads)

[Element] Natively - Admob Banner

This element must be set to Visible on page load to initialize correctly. Place it directly on the page root - not inside Popups, Floating Groups, Group Focus elements, or Repeating Groups. To hide it from your UI, set its dimensions to 0x0 px.

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.

Show Ad on Initialize only takes effect if Preload Ad on Initialize is also enabled - showing an ad requires it to have loaded first. If preload is off, the ad will never auto-show, regardless of this setting.

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

// ============================================================================
// NATIVELY ADMOB BANNER - DOCUMENTATION & EXAMPLES
// ============================================================================

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// new NativelyAdmobBanner(config, setupCallback, preloadAd, preloadCallback, showAd, showCallback)
//   - Initializes and sets up the banner.
//   - config.androidUnitId / config.iOSUnitId: string — defaults to Google's test IDs if omitted.
//   - config.position: string — "TOP" or "BOTTOM". Default "BOTTOM".
//   - config.sizeType: string — "AUTO" or "CUSTOM". Default "AUTO".
//   - config.custom_width / config.custom_height: number — used only if sizeType is "CUSTOM".
//   - preloadAd: boolean — automatically loads an ad after setup. Default false.
//   - showAd: boolean — automatically shows the ad after a successful load.
//     Only takes effect if preloadAd is also true. Default false.
//
// banner.loadAd(callback)
//   - Manually fetches a new ad from the AdMob network.
//
// banner.showBanner(callback)
//   - Makes the banner visible on the screen.
//
// banner.hideBanner(callback)
//   - Hides the banner from the screen (does not destroy the instance).
//
// banner.bannerIsReady(callback)
//   - Checks if an ad has been successfully loaded and is ready to show.
//
// banner.bannerIsVisible(callback)
//   - Checks if the banner is currently visible to the user.

// ============================================================================
// CALLBACK RESPONSE FIELDS
// ============================================================================
// resp.event: string — one of:
//   "DID_FINISH_SETUP"       — the banner finished setting up and is ready to load an ad.
//   "DID_SHOW_BANNER"        — the banner was successfully shown.
//   "DID_HIDE_BANNER"        — the banner was successfully hidden.
//   "DID_LOAD_AD"            — ad loading finished; the banner is ready to be displayed.
//   "DID_RECORD_CLICK"       — the user clicked on the banner.
//   "DID_FAIL_TO_RECEIVE_AD" — loading the ad failed.
//   "DID_RECORD_IMPRESSION"  — the user saw the ad.

// --- AdMob Banner. Quick Start (Automatic Handling) Example. Start ---
// Setting preloadAd and showAd to true handles loading and showing automatically.

// Google's official test ad unit IDs — safe to use during development,
// always return test ads. Replace with your own before release.
const androidUnitId = "ca-app-pub-3940256099942544/6300978111";
const iOSUnitId = "ca-app-pub-3940256099942544/2934735716";

const bannerConfig = {
  androidUnitId,
  iOSUnitId,
  position: "BOTTOM",
  sizeType: "AUTO"
};

const onBannerEvent = function (resp) {
  console.log("Banner event:", resp.event);
};

const preloadAd = true;
const showAd = true; // only works because preloadAd is also true

const banner = new NativelyAdmobBanner(
  bannerConfig,
  onBannerEvent,
  preloadAd,
  onBannerEvent,
  showAd,
  onBannerEvent
);

// --- AdMob Banner. Quick Start (Automatic Handling) Example. End ---


// --- AdMob Banner. Manual Control Example. Start ---
// Use this when you need to control exactly when the ad loads and shows.

const manualConfig = {
  androidUnitId, // Google's official test ID, defined above
  iOSUnitId,      // Google's official test ID, defined above
  position: "BOTTOM",
  sizeType: "AUTO"
};

const lifecycleHandler = function (resp) {
  if (resp.event === "DID_FINISH_SETUP") {
    manualBanner.loadAd();
  }
  if (resp.event === "DID_LOAD_AD") {
    manualBanner.showBanner();
  }
  if (resp.event === "DID_FAIL_TO_RECEIVE_AD") {
    console.warn("Ad failed to load.");
  }
};

const manualPreloadAd = false; // loading manually instead
const manualShowAd = false;    // showing manually instead

const manualBanner = new NativelyAdmobBanner(
  manualConfig,
  lifecycleHandler,
  manualPreloadAd,
  lifecycleHandler,
  manualShowAd,
  lifecycleHandler
);

// --- AdMob Banner. Manual Control Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively AdMob Banner SDK: new NativelyAdmobBanner(config, setupCallback, preloadAd, preloadCallback, showAd, showCallback) — config.androidUnitId/config.iOSUnitId: ad unit IDs, default to Google's official test IDs ("ca-app-pub-3940256099942544/6300978111" Android, "ca-app-pub-3940256099942544/2934735716" iOS) if omitted. config.position: "TOP" or "BOTTOM". config.sizeType: "AUTO" or "CUSTOM" (with config.custom_width/config.custom_height used only for CUSTOM). preloadAd: boolean, automatically loads the ad after setup. showAd: boolean, automatically shows the ad after a successful load — only takes effect if preloadAd is also true. banner.loadAd(callback), banner.showBanner(callback), banner.hideBanner(callback), banner.bannerIsReady(callback), banner.bannerIsVisible(callback) are available for manual control. All callbacks return resp.event: "DID_FINISH_SETUP" / "DID_SHOW_BANNER" / "DID_HIDE_BANNER" / "DID_LOAD_AD" / "DID_RECORD_CLICK" / "DID_FAIL_TO_RECEIVE_AD" / "DID_RECORD_IMPRESSION". For reference: https://docs.buildnatively.com/natively-platform/features/admob

Replace the placeholder at the beginning with a description of what you want to build - for example: "Show a banner ad at the bottom of the screen that loads and displays automatically".

Setup Logic (Interstitial Ads)

[Element] Natively - Admob Interstitial

Only one Natively - Interstitial element can exist per page. Avoid reloading the page frequently, since each reload re-initializes the ad.

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.

// ============================================================================
// NATIVELY ADMOB INTERSTITIAL - DOCUMENTATION & EXAMPLES
// ============================================================================

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// new NativelyAdmobInterstitial(iOSUnitId, androidUnitId, setupCallback, autoAdReload, autoAdReloadCallback)
//   - Initializes the interstitial and loads the first ad automatically.
//   - iOSUnitId / androidUnitId: string — defaults to Google's test IDs if omitted.
//   - autoAdReload: boolean — automatically loads a new ad after the user
//     dismisses the current one. Default false.
//
// interstitial.loadAd(callback)
//   - Manually fetches a new ad from the network.
//
// interstitial.showInterstitialAd(callback)
//   - Displays the ad over the current screen.
//
// interstitial.interstitialIsReady(callback)
//   - Checks if an ad is currently loaded and ready to display.

// ============================================================================
// CALLBACK RESPONSE FIELDS
// ============================================================================
// resp.event: string — one of:
//   "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.

// --- AdMob Interstitial. Standard Usage (Auto-Reload) Example. Start ---
// The SDK automatically fetches the next ad as soon as the current one is closed.

// Google's official test ad unit IDs — safe to use during development,
// always return test ads. Replace with your own before release.
const iOSUnitId = "ca-app-pub-3940256099942544/1033173712";
const androidUnitId = "ca-app-pub-3940256099942544/4411468910";

const onInterstitialEvent = function (resp) {
  console.log("Interstitial event:", resp.event);

  if (resp.event === "DID_LOAD_AD") {
    console.log("Ad ready — enable your Show Ad button now.");
  }
  if (resp.event === "DID_DISMISS_AD") {
    console.log("User closed the ad. No need to call loadAd() — auto-reload handles it.");
  }
};

const autoReloadAd = true;

const interstitial = new NativelyAdmobInterstitial(
  iOSUnitId,
  androidUnitId,
  onInterstitialEvent,
  autoReloadAd,
  onInterstitialEvent
);

function triggerLevelCompleteAd() {
  interstitial.interstitialIsReady(function (resp) {
    if (resp.status) {
      interstitial.showInterstitialAd();
    } else {
      console.log("Ad not ready yet, skipping...");
    }
  });
}

// --- AdMob Interstitial. Standard Usage (Auto-Reload) Example. End ---


// --- AdMob Interstitial. Manual Control Example. Start ---
// Use this if you need strict control over when ads are loaded.

const manualHandler = function (resp) {
  if (resp.event === "DID_LOAD_AD") {
    console.log("Manual ad loaded. Ready to show.");
  }
  if (resp.event === "DID_DISMISS_AD") {
    console.log("Ad closed.");
    // Optionally load the next one immediately:
    // manualInterstitial.loadAd();
  }
};

const manualAutoReload = false; // loading manually instead

const manualInterstitial = new NativelyAdmobInterstitial(
  iOSUnitId,     // Google's official test ID, defined above
  androidUnitId, // Google's official test ID, defined above
  manualHandler,
  manualAutoReload,
  manualHandler
);

function prepareAd() {
  console.log("Pre-loading ad...");
  manualInterstitial.loadAd();
}

// --- AdMob Interstitial. Manual Control Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively AdMob Interstitial SDK: new NativelyAdmobInterstitial(iOSUnitId, androidUnitId, setupCallback, autoAdReload, autoAdReloadCallback) — only one instance can be used per page. iOSUnitId/androidUnitId: ad unit IDs, default to Google's official test IDs ("ca-app-pub-3940256099942544/1033173712" iOS, "ca-app-pub-3940256099942544/4411468910" Android) if omitted. autoAdReload: boolean, automatically loads a new ad after the user dismisses the current one. interstitial.loadAd(callback), interstitial.showInterstitialAd(callback), interstitial.interstitialIsReady(callback) are available for manual control. All callbacks return resp.event: "DID_FAIL_TO_LOAD_AD" / "DID_LOAD_AD" / "DID_SHOW_AD" / "DID_RECORD_CLICK" / "DID_FAIL_TO_PRESENT" / "DID_DISMISS_AD" / "DID_RECORD_IMPRESSION". For reference: https://docs.buildnatively.com/natively-platform/features/admob

Replace the placeholder at the beginning with a description of what you want to build - for example: "Show an interstitial ad when the user completes a level, with automatic ad reloading".

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

Never click your own live ads - this violates AdMob policy. Choose one of the two approaches below, depending on what you're 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.

Banner:

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.

In AdMob, go to Settings > Test devices.
Click Add Test Device.
Enter your device name and Advertising ID/IDFA.
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.

Real ad units will still serve real ads to any device that isn't registered as a test device - only use your real IDs on a registered test device until you're ready to release.

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.

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.

Double-check you've replaced test IDs in every Banner and Interstitial element or SDK call before submitting - a build shipped with test IDs will only ever serve test ads to real users.

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.

Link your live listing to AdMob

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

Go to Apps > [your app] > App Settings in AdMob.
Click Add Store.
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.

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

Banner never appears, even though showAd / Show Ad on Initialize is enabled

Confirm preloadAd (or Preload Ad on Initialize) is also enabled - showing an ad only happens automatically if the ad has been preloaded first. If you want manual control instead, disable both and call loadAd() followed by showBanner() yourself.

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.

PreviousFeatures NextAnalytics

Last updated 6 days ago