🤑AdMob Integration Guide

Natively integrates with Google AdMob to help you monetize your iOS and Android applications through high-quality advertisements. This guide covers the end-to-end process of setting up AdMob, configuring the Natively wrapper, and implementing ads via Bubble.io or the JavaScript SDK.

Currently, Natively supports Banner and Interstitial ad formats.

Prerequisites

A Google AdMob account.
A Natively account with an active app project.

Google AdMob Configuration

You must register your applications in the AdMob console to generate the necessary App IDs.

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 have existing ones).
Select the Platform (iOS or Android).
- Note: If you are building for both platforms, you must repeat this process to create two separate apps in AdMob.
Is the app 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.

Retrieve App ID

Once the app is created, you need the App ID to link it with Natively.

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

View AdMob's full setup guide here: Setup Admob App

Natively Dashboard Setup

You must link your AdMob App IDs to your Natively project and rebuild the app.

Open your Natively App Dashboard.
Navigate to Features > AdMob and toggle the feature to Enabled.
Paste the App IDs you copied in the AdMob dashboard into the respective fields:
- iOS App ID
- Android App ID
Enter a Permission Description. This text explains to the user why the app requests tracking permissions (App Tracking Transparency). Failure to provide a clear description may result in App Store rejection.
Order a new build. The AdMob SDK and keys are injected into your app bundle during the build process.

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code) or JavaScript SDK (Code).

Inizialization

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 ad 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.20.0) .

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

Banner Ads

Drag the Natively - Banner element onto your page.
Configure the following fields in the property editor:
- iOS UnitId: Test unitId 'ca-app-pub-3940256099942544/2934735716' or your own.
- Android UnitId: Test unitId 'ca-app-pub-3940256099942544/6300978111' or your own.
- Position: TOP, BOTTOM.
- Size Type: AUTO, CUSTOM.
- Banner Width: Will be applied only when Size Type is CUSTOM.
- Banner Height: Will be applied only when Size Type is CUSTOM.
- Preload Ad on Initialize: Load ad on initialization.
- Show Ad on Initialize: Display ad on initialization.

Element Logic (Events, States, & Actions)

Use the following data points to build your ad logic.

Events:
- Did finish setup: When the banner has finished setting up and is ready to load an ad.
- Did load ad: When ad loading is finished and the banner is ready to be displayed (called after 'Load Ad' action).
- Did fail to receive ad: When loading the ad failed (can occur after 'Load Ad' action).
- Did record click: When the user clicks on the banner.
- Did record impression: When the user sees the ad.
- Did show banner: When the banner is successfully shown.
- Did hide banner: When the banner is successfully hidden.
States:
- Banner Is Ready: (Yes/No)
- Banner Is Visible: (Yes/No)
- Ad Is Loaded: (Yes/No)
- Latest Error Message: Text description of the last error.
- Latest Event: Returns the specific event code received from the app:
  - DID_FINISH_SETUP
  - DID_SHOW_BANNER
  - DID_HIDE_BANNER
  - DID_LOAD_AD
  - DID_RECORD_CLICK
  - DID_FAIL_TO_RECEIVE_AD
  - DID_RECORD_IMPRESSION
  - 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. Checks if the banner is ready to load the ad.
  How to Use (Workflow Logic) Automatic Setup: The Banner element sets itself up automatically on page load.
  1. Manual Loading (If 'Preload Ad' is disabled):
    Create a workflow for the event Did finish setup.
    Add the action Load Ad.
  2. Manual Showing (If 'Show Ad' is disabled):
    Create a workflow for the event Did load ad.
    Add the action Show Banner.

Use the following code to configure the Banner ad. Note that setting showAd and preloadAd to true handles the initial display automatically.

// for release use your own unitID
const androidUnitId = "ca-app-pub-3940256099942544/6300978111"
// for release use your own unitID
const iOSUnitId = "ca-app-pub-3940256099942544/2934735716"
const position = "BOTTOM" // or "TOP"
const sizeType = "AUTO" // or "CUSTOM"
const custom_width = 320 // used only if sizeType is "CUSTOM"
const custom_height = 50 // used only if sizeType is "CUSTOM"
const showAd = true;
const preloadAd = true;

const bannerConfig = {
    androidUnitId,
    iOSUnitId,
    position,
    sizeType,
    custom_width, // used only if sizeType is "CUSTOM"
    custom_height // used only if sizeType is "CUSTOM"
};

const bannerad_callback = function(resp) {
    const event = resp.event;
    // Possible events:
    // DID_FINISH_SETUP - when banner finished setup and is ready to load the ad
    // DID_SHOW_BANNER
    // DID_HIDE_BANNER
    // DID_LOAD_AD - when ad loading is finished and now banner is ready to be displayed (called after Load Ad action)
    // DID_RECORD_CLICK - when the user click on the banner ad
    // DID_FAIL_TO_RECEIVE_AD - when loading ad failed (can be called after Load Ad action)
    // DID_RECORD_IMPRESSION - when the user saw an ad
    console.log(event);
};

const admobBanner = new NativelyAdmobBanner(
    bannerConfig,
    bannerad_callback, // setup callback function(resp){}
    preloadAd,         // true/false (mapped from 'preloadAd' variable)
    bannerad_callback, // setup callback function(resp){}
    showAd,            // true/false (mapped from 'showAd' variable)
    bannerad_callback  // show ad callback function(resp){}
);

// All available methods
// admobBanner.loadAd(callback); - Manually fetches a new ad from the AdMob network.
// admobBanner.showBanner(callback); - Makes the banner visible on the screen.
// admobBanner.hideBanner(callback); - Hides the banner from the screen (does not destroy the instance).
// admobBanner.bannerIsReady(callback); - Checks if an ad has been successfully loaded and is ready to show.
// admobBanner.bannerIsVisible(callback); - Checks if the banner is currently visible to the user.

// How to use?
// If you disabled preloadAd or showAd in the configuration, follow this event loop to display ads manually:
// 1. Wait for Setup: Listen for the DID_FINISH_SETUP event.
// 2. Load the Ad: Call admobBanner.loadAd().
// 3. Wait for Load: Listen for the DID_LOAD_AD event (confirming the ad is ready).
// 4. Show the Ad: Call admobBanner.showBanner().

// --- Banner Ads. Quick Start (Automatic Handling) Example. Start ---
// Use this for simple implementations where you want the ad to appear immediately.
// 1. CONFIGURATION
const bannerConfig = {
    androidUnitId: "ca-app-pub-3940256099942544/6300978111", // Test ID
    iOSUnitId: "ca-app-pub-3940256099942544/2934735716",     // Test ID
    position: "BOTTOM", // or "TOP"
    sizeType: "AUTO"    // or "CUSTOM"
};

// 2. OPTIONAL LOGGING
const onBannerEvent = function(resp) {
    console.log("Banner Event:", resp.event); 
};

// 3. INITIALIZE
// Setting both booleans to 'true' handles loading and showing automatically
const banner = new NativelyAdmobBanner(
    bannerConfig,
    onBannerEvent, 
    true, // preloadAd: Auto-fetch ad from network
    onBannerEvent,
    true, // showAd: Auto-display when ready
    onBannerEvent 
);

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

// --- Banner Ads. Advanced Usage (Manual Control) Example. Start ---

// 1. CONFIGURATION
const manualConfig = {
    androidUnitId: "ca-app-pub-3940256099942544/6300978111", // Test ID
    iOSUnitId: "ca-app-pub-3940256099942544/2934735716", // Test ID
    position: "BOTTOM", // or "TOP"
    sizeType: "AUTO" // or "CUSTOM"
};

// 2. DEFINE THE HANDLER
// We use one function to handle the entire lifecycle
const lifecycleHandler = function(resp) {
    const event = resp.event;
    console.log("Current State:", event);

    // Step 1: SDK is ready -> Load the Ad
    if (event === "DID_FINISH_SETUP") {
        console.log("Setup done. Fetching ad...");
        manualBanner.loadAd(); 
    }

    // Step 2: Ad is loaded -> Show the Ad
    if (event === "DID_LOAD_AD") {
        console.log("Ad ready. Displaying now...");
        manualBanner.showBanner();
    }
    
    // Error Handling
    if (event === "DID_FAIL_TO_RECEIVE_AD") {
        console.warn("Ad failed to load.");
    }
};

// 3. INITIALIZE MANUAL INSTANCE
// We set boolean flags to 'false' to prevent auto-loading
const manualBanner = new NativelyAdmobBanner(
    manualConfig,
    lifecycleHandler, 
    false, // preloadAd: FALSE (We will call loadAd() manually)
    lifecycleHandler,
    false, // showAd: FALSE (We will call showBanner() manually)
    lifecycleHandler 
);

// --- Banner Ads. Advanced Usage (Manual Control) Example. End ---

Interstitial Ads

Drag the Natively - Interstitial element onto your page.
Configure the following fields in the property editor:
- iOS UnitId: Test unitId 'ca-app-pub-3940256099942544/2934735716' or your own.
- Android UnitId: Test unitId 'ca-app-pub-3940256099942544/6300978111' or your own.
- Auto Ad Reload: Automatically load new ad after 'Did dismiss ad' event. You will be notified once it's ready with 'Did load ad' event.
Element Logic (Events, States, & Actions)
Use the following data points to build your ad logic.
- Events:
  - Did Load Ad: When the ad view has finished setup and is ready to be displayed.
  - Did record click: When the user clicks on the ad.
  - Did fail to present: When presenting the ad failed (can be fired after 'Show Ad' action).
  - Did fail to load ad: When loading the ad failed (can be fired after 'Load Ad' action).
  - Did show ad: When the ad view is displayed to the user.
  - Did dismiss ad: When the user dismisses (closes) the ad view.
  - Did record impression: When the user saw the ad.
- States:
  - Interstitial Is Ready: When the ad view is ready to be displayed.
  - Latest Error Message
  - Latest Event: The latest event received from the app:
    DID_FAIL_TO_LOAD_AD
    DID_LOAD_AD
    DID_SHOW_AD
    DID_RECORD_CLICK
    DID_FAIL_TO_PRESENT
    DID_DISMISS_AD
    DID_RECORD_IMPRESSION
- Actions:
  - Show Ad: Displays the interstitial ad.
  - Load Ad: Loads a new ad manually.
  - Check Interstitial Ready: Checks if the ad view is active and can be displayed.
How to Use (Workflow Logic)
The Interstitial will set up automatically on page load.
1. Show Ad: Run the Show Ad action when you want to display it.
2. Reloading Strategy:
  - After each time the ad is shown, a new ad must be fetched.
  - If 'Auto Ad Reload' is enabled: This happens automatically. You will be notified via the Did Load Ad event.
  - If 'Auto Ad Reload' is disabled: Listen to the Did dismiss ad event and call the Load Ad action manually.

Interstitial ads cover the full screen and require a strict "Load → Show → Dismiss" lifecycle. You can control this flow using the methods below.

// for release use your own unitID
const androidUnitId = "ca-app-pub-3940256099942544/4411468910"
// for release use your own unitID
const iOSUnitId = "ca-app-pub-3940256099942544/1033173712"
const autoReloadAd = true;

const interstitialad_callback = function(resp) {
    const event = resp.event;
    // Possible events:
    // DID_LOAD_AD - when ad view finished setup & load ad and is ready to be displayed
    // DID_FAIL_TO_LOAD_AD - when loading of ad failed (can be called after 'Load Ad' action)
    // DID_SHOW_AD - ad view displayed to user
    // DID_FAIL_TO_PRESENT - when presenting of ad failed (can be called after 'Show Ad' action)
    // DID_RECORD_CLICK - when the user clicks on the ad
    // DID_DISMISS_AD - when the user clicks close ad view.
    // DID_RECORD_IMPRESSION - when the user saw an ad
    console.log(event);
};

const admobInterstitial = new NativelyAdmobInterstitial(
    iOSUnitId,
    androidUnitId,
    interstitialad_callback, // setup & load callback
    autoReloadAd,            // true/false
    interstitialad_callback  // auto reload callback
);

// All available methods
// admobInterstitial.loadAd(callback); - Manually fetches a new ad from the network.
// admobInterstitial.showInterstitialAd(callback); - Displays the ad over the current screen.
// admobInterstitial.interstitialIsReady(callback); - Checks if an ad is currently loaded and ready to be displayed.

// How to use?
// 1. Listen to DID_LOAD_AD
// 2. Call admobInterstitial.showInterstitialAd to show ad
// 3. Listen to DID_DISMISS_AD
// 4. Load new ad with admobInterstitial.loadAd
// 5. Call admobInterstitial.showInterstitialAd to show ad

// --- Interstitial Ads. Standard Usage (Auto-Reload) Example. Start ---
//The SDK automatically fetches the next ad as soon as the current one is closed, ensuring an ad is always ready.

// 1. CONFIGURATION
const autoConfig = {
    androidId: "ca-app-pub-3940256099942544/4411468910", // Test ID
    iosId: "ca-app-pub-3940256099942544/1033173712",     // Test ID
    autoReload: true // SDK handles reloading automatically
};

// 2. DEFINE LOGIC
const onInterstitialEvent = function(resp) {
    const event = resp.event;
    console.log("Interstitial Event:", event);

    if (event === "DID_LOAD_AD") {
        console.log("Ad ready! Enable your 'Show Ad' button now.");
    }

    if (event === "DID_DISMISS_AD") {
        console.log("User closed ad. Resuming app flow...");
        // No need to call loadAd() here, SDK does it automatically.
    }
};

// 3. INITIALIZE
const interstitial = new NativelyAdmobInterstitial(
    autoConfig.iosId,
    autoConfig.androidId,
    onInterstitialEvent, // Initial Setup Callback
    autoConfig.autoReload, 
    onInterstitialEvent  // Auto-Reload Callback
);

// 4. TRIGGER THE AD (Example Function)
function triggerLevelCompleteAd() {
    // Check if ready before showing to avoid errors
    interstitial.interstitialIsReady(function(status) {
        if (status.result) {
            interstitial.showInterstitialAd();
        } else {
            console.log("Ad not ready yet, skipping...");
        }
    });
}

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

// --- Interstitial Ads. Advanced Usage (Manual Control) Example. Start ---
// Use this if you need strict control over network usage and want to load ads only at specific moments.

// 1. CONFIGURATION
const manualConfig = {
    androidId: "ca-app-pub-3940256099942544/4411468910", // Test ID
    iosId: "ca-app-pub-3940256099942544/1033173712", // Test ID
    autoReload: false // We will load manually
};

// 2. DEFINE LOGIC
const manualHandler = function(resp) {
    const event = resp.event;

    // A. Ad is loaded and waiting
    if (event === "DID_LOAD_AD") {
        console.log("Manual Ad Loaded. Ready to show.");
    }

    // B. User closed the ad
    if (event === "DID_DISMISS_AD") {
        console.log("Ad closed.");
        // OPTIONAL: Load the next one immediately
        // manualInterstitial.loadAd(); 
    }
};

// 3. INITIALIZE
const manualInterstitial = new NativelyAdmobInterstitial(
    manualConfig.iosId,
    manualConfig.androidId,
    manualHandler,
    manualConfig.autoReload, 
    manualHandler
);

// 4. MANUAL LOAD TRIGGER
// Call this early (e.g., when a level starts) so the ad is ready by the end
function prepareAd() {
    console.log("Pre-loading ad...");
    manualInterstitial.loadAd();
}

// --- Interstitial Ads. Advanced Usage (Manual Control) Example. End ---

Testing & Release

Testing with Test Devices

Never click your own live ads, as this violates AdMob policy. Always use Test Devices and Test Unit IDs during development.

Add Test Device:
- Go to AdMob Settings > Test devices.
- Click Add Test Device.
- Enter your device name and Advertising ID/IDFA
Use Test Unit IDs: Google provides dedicated test IDs that always return test ads:
- iOS Test Unit ID: ca-app-pub-3940256099942544/2934735716
- Android Test Unit ID: ca-app-pub-3940256099942544/6300978111

View AdMob's full app testing guide here:

Moving to Production

Create real Ad Units in your AdMob Console.
Replace the Test Unit IDs in your Bubble plugin or JavaScript code with your real Unit IDs.
Submit your app to the App Store and Google Play.
Once approved, go to Apps > Your App > App Settings in AdMob and click Add Store to link the live app stores to AdMob. This process takes ~1 day for review.

Troubleshooting

If you have more questions, please read the Admob FAQ page: Google Admob Help

PreviousHow to get started?NextAdmob

Last updated 15 days ago

// for release use your own unitID const androidUnitId = "ca-app-pub-3940256099942544/6300978111" // for release use your own unitID const iOSUnitId = "ca-app-pub-3940256099942544/2934735716" const position = "BOTTOM" // or "TOP" const sizeType = "AUTO" // or "CUSTOM" const custom_width = 320 // used only if sizeType is "CUSTOM" const custom_height = 50 // used only if sizeType is "CUSTOM" const showAd = true; const preloadAd = true; const bannerConfig = { androidUnitId, iOSUnitId, position, sizeType, custom_width, // used only if sizeType is "CUSTOM" custom_height // used only if sizeType is "CUSTOM" }; const bannerad_callback = function(resp) { const event = resp.event; // Possible events: // DID_FINISH_SETUP - when banner finished setup and is ready to load the ad // DID_SHOW_BANNER // DID_HIDE_BANNER // DID_LOAD_AD - when ad loading is finished and now banner is ready to be displayed (called after Load Ad action) // DID_RECORD_CLICK - when the user click on the banner ad // DID_FAIL_TO_RECEIVE_AD - when loading ad failed (can be called after Load Ad action) // DID_RECORD_IMPRESSION - when the user saw an ad console.log(event); }; const admobBanner = new NativelyAdmobBanner( bannerConfig, bannerad_callback, // setup callback function(resp){} preloadAd, // true/false (mapped from 'preloadAd' variable) bannerad_callback, // setup callback function(resp){} showAd, // true/false (mapped from 'showAd' variable) bannerad_callback // show ad callback function(resp){} ); // All available methods // admobBanner.loadAd(callback); - Manually fetches a new ad from the AdMob network. // admobBanner.showBanner(callback); - Makes the banner visible on the screen. // admobBanner.hideBanner(callback); - Hides the banner from the screen (does not destroy the instance). // admobBanner.bannerIsReady(callback); - Checks if an ad has been successfully loaded and is ready to show. // admobBanner.bannerIsVisible(callback); - Checks if the banner is currently visible to the user. // How to use? // If you disabled preloadAd or showAd in the configuration, follow this event loop to display ads manually: // 1. Wait for Setup: Listen for the DID_FINISH_SETUP event. // 2. Load the Ad: Call admobBanner.loadAd(). // 3. Wait for Load: Listen for the DID_LOAD_AD event (confirming the ad is ready). // 4. Show the Ad: Call admobBanner.showBanner(). // --- Banner Ads. Quick Start (Automatic Handling) Example. Start --- // Use this for simple implementations where you want the ad to appear immediately. // 1. CONFIGURATION const bannerConfig = { androidUnitId: "ca-app-pub-3940256099942544/6300978111", // Test ID iOSUnitId: "ca-app-pub-3940256099942544/2934735716", // Test ID position: "BOTTOM", // or "TOP" sizeType: "AUTO" // or "CUSTOM" }; // 2. OPTIONAL LOGGING const onBannerEvent = function(resp) { console.log("Banner Event:", resp.event); }; // 3. INITIALIZE // Setting both booleans to 'true' handles loading and showing automatically const banner = new NativelyAdmobBanner( bannerConfig, onBannerEvent, true, // preloadAd: Auto-fetch ad from network onBannerEvent, true, // showAd: Auto-display when ready onBannerEvent ); // --- Banner Ads. Quick Start (Automatic Handling) Example. End --- // --- Banner Ads. Advanced Usage (Manual Control) Example. Start --- // 1. CONFIGURATION const manualConfig = { androidUnitId: "ca-app-pub-3940256099942544/6300978111", // Test ID iOSUnitId: "ca-app-pub-3940256099942544/2934735716", // Test ID position: "BOTTOM", // or "TOP" sizeType: "AUTO" // or "CUSTOM" }; // 2. DEFINE THE HANDLER // We use one function to handle the entire lifecycle const lifecycleHandler = function(resp) { const event = resp.event; console.log("Current State:", event); // Step 1: SDK is ready -> Load the Ad if (event === "DID_FINISH_SETUP") { console.log("Setup done. Fetching ad..."); manualBanner.loadAd(); } // Step 2: Ad is loaded -> Show the Ad if (event === "DID_LOAD_AD") { console.log("Ad ready. Displaying now..."); manualBanner.showBanner(); } // Error Handling if (event === "DID_FAIL_TO_RECEIVE_AD") { console.warn("Ad failed to load."); } }; // 3. INITIALIZE MANUAL INSTANCE // We set boolean flags to 'false' to prevent auto-loading const manualBanner = new NativelyAdmobBanner( manualConfig, lifecycleHandler, false, // preloadAd: FALSE (We will call loadAd() manually) lifecycleHandler, false, // showAd: FALSE (We will call showBanner() manually) lifecycleHandler ); // --- Banner Ads. Advanced Usage (Manual Control) Example. End ---

// for release use your own unitID const androidUnitId = "ca-app-pub-3940256099942544/4411468910" // for release use your own unitID const iOSUnitId = "ca-app-pub-3940256099942544/1033173712" const autoReloadAd = true; const interstitialad_callback = function(resp) { const event = resp.event; // Possible events: // DID_LOAD_AD - when ad view finished setup & load ad and is ready to be displayed // DID_FAIL_TO_LOAD_AD - when loading of ad failed (can be called after 'Load Ad' action) // DID_SHOW_AD - ad view displayed to user // DID_FAIL_TO_PRESENT - when presenting of ad failed (can be called after 'Show Ad' action) // DID_RECORD_CLICK - when the user clicks on the ad // DID_DISMISS_AD - when the user clicks close ad view. // DID_RECORD_IMPRESSION - when the user saw an ad console.log(event); }; const admobInterstitial = new NativelyAdmobInterstitial( iOSUnitId, androidUnitId, interstitialad_callback, // setup & load callback autoReloadAd, // true/false interstitialad_callback // auto reload callback ); // All available methods // admobInterstitial.loadAd(callback); - Manually fetches a new ad from the network. // admobInterstitial.showInterstitialAd(callback); - Displays the ad over the current screen. // admobInterstitial.interstitialIsReady(callback); - Checks if an ad is currently loaded and ready to be displayed. // How to use? // 1. Listen to DID_LOAD_AD // 2. Call admobInterstitial.showInterstitialAd to show ad // 3. Listen to DID_DISMISS_AD // 4. Load new ad with admobInterstitial.loadAd // 5. Call admobInterstitial.showInterstitialAd to show ad // --- Interstitial Ads. Standard Usage (Auto-Reload) Example. Start --- //The SDK automatically fetches the next ad as soon as the current one is closed, ensuring an ad is always ready. // 1. CONFIGURATION const autoConfig = { androidId: "ca-app-pub-3940256099942544/4411468910", // Test ID iosId: "ca-app-pub-3940256099942544/1033173712", // Test ID autoReload: true // SDK handles reloading automatically }; // 2. DEFINE LOGIC const onInterstitialEvent = function(resp) { const event = resp.event; console.log("Interstitial Event:", event); if (event === "DID_LOAD_AD") { console.log("Ad ready! Enable your 'Show Ad' button now."); } if (event === "DID_DISMISS_AD") { console.log("User closed ad. Resuming app flow..."); // No need to call loadAd() here, SDK does it automatically. } }; // 3. INITIALIZE const interstitial = new NativelyAdmobInterstitial( autoConfig.iosId, autoConfig.androidId, onInterstitialEvent, // Initial Setup Callback autoConfig.autoReload, onInterstitialEvent // Auto-Reload Callback ); // 4. TRIGGER THE AD (Example Function) function triggerLevelCompleteAd() { // Check if ready before showing to avoid errors interstitial.interstitialIsReady(function(status) { if (status.result) { interstitial.showInterstitialAd(); } else { console.log("Ad not ready yet, skipping..."); } }); } // --- Interstitial Ads. Standard Usage (Auto-Reload) Example. End --- // --- Interstitial Ads. Advanced Usage (Manual Control) Example. Start --- // Use this if you need strict control over network usage and want to load ads only at specific moments. // 1. CONFIGURATION const manualConfig = { androidId: "ca-app-pub-3940256099942544/4411468910", // Test ID iosId: "ca-app-pub-3940256099942544/1033173712", // Test ID autoReload: false // We will load manually }; // 2. DEFINE LOGIC const manualHandler = function(resp) { const event = resp.event; // A. Ad is loaded and waiting if (event === "DID_LOAD_AD") { console.log("Manual Ad Loaded. Ready to show."); } // B. User closed the ad if (event === "DID_DISMISS_AD") { console.log("Ad closed."); // OPTIONAL: Load the next one immediately // manualInterstitial.loadAd(); } }; // 3. INITIALIZE const manualInterstitial = new NativelyAdmobInterstitial( manualConfig.iosId, manualConfig.androidId, manualHandler, manualConfig.autoReload, manualHandler ); // 4. MANUAL LOAD TRIGGER // Call this early (e.g., when a level starts) so the ad is ready by the end function prepareAd() { console.log("Pre-loading ad..."); manualInterstitial.loadAd(); } // --- Interstitial Ads. Advanced Usage (Manual Control) Example. End ---

hashtagPrerequisites

hashtagGoogle AdMob Configuration

hashtagCreate App in AdMob

hashtagRetrieve App ID

hashtagNatively Dashboard Setup

hashtagImplementation

hashtagInizialization

hashtagBanner Ads

hashtagInterstitial Ads

hashtagTesting & Release

hashtagTesting with Test Devices

hashtagMoving to Production

hashtagTroubleshooting