🤑Admob

minimum version is v2.9.0

Before reading this page, please make sure you've set up your AdMob account.

🚑Setup Admob App

• Bubble.io Plugin

• JavaScript SDK

Admob Bubble Examples:

1. Admob Banner Ad - https://bubble.io/page?type=page&name=admob_banner&id=nativelyqa&tab=tabs-1

2. Admob Interstitial Ad - https://bubble.io/page?type=page&name=admob_interstitial&id=nativelyqa&tab=tabs-1

🧋 Bubble.io Plugin

[Element] Natively - Banner

Fields:

• 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 with Size Type is CUSTOM

• Banner Height - Will be applied only with Size Type is CUSTOM

• Preload Ad on Initialize - load ad on initialization

• Show Ad on Initialize - display ad on initialization

Events:

• Did finish setup - when banner finished setup and ready to load ad

• 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 load ad - when ad loading is finished and now banner is ready to be displayed (called after Load Ad action)

• Did hide banner

• Did show banner

• Did record impression - when the user saw an ad

States:

• Banner Is Ready

• Latest Event - the latest event that was received from app:

  • DID_FINISH_SETUP

  • DID_SHOW_BANNER

  • DID_HIDE_BANNER

  • DID_LOAD_AD

  • DID_RECORD_CLICK

  • DID_FAIL_TO_RECEIVE_AD

  • DID_RECORD_IMPRESSION

• Latest Error Message

• Banner Is Visible - yes/no (show/hide banner)

• Ad Is Loaded - yes/no (when ad loading is finished)

Actions:

• Show Banner

• Hide Banner

• Load Ad

• Check Banner Visible - Check if the banner ad is currently visible

• Check Banner Ready - Check if the banner ad is currently ready to load the ad

How to use?

1. Make sure you've set up Admob for your app

2. (Do not forget to rebuild app)

3. Add Natively - Banner element on the page

4. Fill element fields

5. The Banner will set up automatically on the page load

6. (if 'Preload Ad' is disabled) Listen to event 'Did finish setup' event and call 'Load Ad' action

7. (if 'Show Ad' is disabled) Listen to 'Did load ad' event and then call 'Show banner' action

[Element] Natively - Interstitial

Fields:

• 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 loaded new ad after 'Did dismiss ad' event. You will be notified once it's ready with 'Did load ad' event.

Events:

• Did Load Ad - when ad view finished setup and ready to be displayed

• Did record click - when the user click on the banner ad

• Did fail to present - when presenting of ad failed (can be called after 'Show Ad' action)

• 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 dismiss ad - user dismiss ad view

• Did record impression - when the user saw an ad

States:

• Interstitial Is Ready - when ad view ready to be displayed

• Latest Event - the latest event that was received from 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

• Latest Error Message

Actions:

• Show Ad

• Load Ad - Load a new ad manually

• Check Interstitial Ready - Check if the ad view ad is an active ad and can be displayed

How to use?

1. Make sure you've set up Admob for your app

2. (Do not forget to rebuild app)

3. Add Natively - Interstitial element on the page

4. Fill element fields

5. The Interstitial will set up automatically on the page load

6. Show ad view

7. (if 'Auto Ad Reload' is disabled) Listen to event 'Did dismiss ad ' event and call 'Load Ad' action

After each time the ad is shown to the user, you need to make sure the new ad is fetched (after the user dismisses the ad). It happens automatically, or you can do that manually. Do not forget to observe 'Did Load Ad' and 'Did dismiss ad' events.

🛠 JavaScript SDK

NativelyAdmobBanner

// 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,
    custom_height
};

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){}
    preload_ad, // true/false
    bannerad_callback, // preload_ad callback function(resp){}
    show_ad, // true/false
    bannerad_callback // show ad callback function(resp){} 
);


// All available methods (It doesn't mean you need to call them like this):
admobBanner.loadAd(callback);
admobBanner.showBanner(callback);
admobBanner.hideBanner(callback);
admobBanner.loadAd(callback);
admobBanner.bannerIsReady(callback);
admobBanner.bannerIsVisible(callback);

// How to use?
// 1. Listen to DID_FINISH_SETUP
// 2. Call admobBanner.loadAd
// 3. Listen to DID_LOAD_AD
// 4. Call admobBanner.showBanner

NativelyAdmobInterstitial

How to use it?

// for release use your own unit
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
    // DID_SHOW_AD
    // DID_FAIL_TO_PRESENT
    // DID_RECORD_CLICK - when the user clicks on the banner 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 (It doesn't mean you need to call them like this):
admobInterstitial.loadAd(callback);
admobInterstitial.showInterstitialAd(callback);
admobInterstitial.interstitialIsReady(callback);

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