[Feature]: Loading and showing ads are too slow

[ezzuah]

What i've noticed is, its very slow when you intialized the sdk and show a banner, it something takes between 5 to 7 seconds to complete the initialization and then show the banner. I do call the ads initialize function in the app.component so i get it to run quickly but like i said its slow.
Another thing on interstitials is also it something takes about 5 to 6 seconds to load it.
I'm reporting because as compared to the admob-plus plugin, it takes between 2 to 3 seconds to load a banner or an interstitial.
Its a great work you've done so far

I'm pasting my code below

import { Injectable, NgZone } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';

import { environment } from 'src/environments/environment';

declare var admobNextGen: any;



@Injectable({
  providedIn: 'root',
})
export class AdmobServices {

  private admob: any = null;
  private isSdkInitialized = false;
  private pendingLoadOnPause = false;



  isShowingFullscreenAd = false;
  isAdSuppressed = false;

  private lastFullscreenDismissedTime = 0;
  private readonly FULLSCREEN_RESUME_DELAY = 1500;



  rewardedAd: any;
  hasUserGotReward = false;
  rewardEarned$ = new Subject<void>();

  private rewardResolver: ((rewarded: boolean) => void) | null = null;
  private rewardPendingShow = false;



  bannerAd: any;



  appOpenAd: any;
  appOpenDismissed$ = new Subject<void>();
  lastAppOpenShownTime = 0;
  readonly APP_OPEN_COOLDOWN = 30000;

  constructor(
    private platform: Platform,
    private zone: NgZone,
  ) {
    this.setupAdEvents();
    this.setupAppOpenLifecycle();
  }

  // Helper to dynamically resolve global plugin reference
  private resolveAdMob(): any {
    if (this.admob) return this.admob;
    this.admob =
      (window as any).admobNextGen ||
      (typeof admobNextGen !== 'undefined' ? admobNextGen : null);
    return this.admob;
  }

  // ==================================================
  // INITIALIZATION
  // ==================================================

  async initializeAds(): Promise<void> {
    await this.platform.ready();

    const admob = this.resolveAdMob();

    if (!admob) {
      console.error('AdMob Next Gen not available.');
      return;
    }

    admob.initialize(
      {
        maxAdContentRating: 'G',
        tagForChildDirectedTreatment: false,
        tagForUnderAgeOfConsent: false,
      },
      () => {
        this.zone.run(() => {
          this.isSdkInitialized = true;
          this.showBannerAd();

          // If the user backgrounded the app while SDK was initializing, trigger load now
          if (this.pendingLoadOnPause) {
            this.pendingLoadOnPause = false;
            this.loadAppOpenAd();
          }
        });
      },
      (error: any) => console.error('AdMob initialization failed:', error),
    );
  }

  // ==================================================
  // BANNER
  // ==================================================

  async showBannerAd(): Promise<void> {
    await this.platform.ready();
    const admob = this.resolveAdMob();
    if (!admob || this.bannerAd) {
      return;
    }

    try {
      admob.createBanner({
        adUnitId: environment.androidBannerAdId,
        position: 'bottom',
        size: 'ADAPTIVE',
        isOverlapping: false,
        collapsible: true,
        retryInterval: 5000,
      });
      this.bannerAd = true;
    } catch (error) {
      console.error('Error creating banner:', error);
    }
  }

  async hideBanner(): Promise<void> {
    await this.platform.ready();
    const admob = this.resolveAdMob();
    if (!admob || !this.bannerAd) {
      return;
    }

    try {
      admob.removeBanner();
      this.bannerAd = false;
    } catch (error) {
      console.error('Error removing banner:', error);
    }
  }

  // ==================================================
  // INTERSTITIAL
  // ==================================================

  async loadInterstitialAd(): Promise<void> {
    await this.platform.ready();
    const admob = this.resolveAdMob();
    if (!admob) {
      return;
    }

    try {
      admob.createInterstitial({
        adUnitId: environment.androidInterstitialAdId,
        isAutoShow: false,
        retryInterval: 5000,
      });
    } catch (error) {
      console.error('Error creating interstitial:', error);
    }
  }

  async showInterstitialAd() {
    await this.platform.ready();
    const admob = this.resolveAdMob();

    this.isShowingFullscreenAd = true;

    try {
      admob.showInterstitial();
    } catch (error) {
      console.error('Error showing interstitial:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
    }
  }

  // ==================================================
  // REWARDED
  // ==================================================

  async loadAdReward(): Promise<boolean> {
    await this.platform.ready();
    const admob = this.resolveAdMob();
    if (!admob || this.rewardResolver) {
      return false;
    }

    this.hasUserGotReward = false;

    const result = new Promise<boolean>((resolve) => {
      this.rewardResolver = resolve;
    });

    if (this.rewardedAd === true) {
      this.rewardedAd = false;
      this.showRewardedNow();
      return result;
    }

    if (this.rewardedAd === 'loading') {
      this.rewardPendingShow = true;
      return result;
    }

    this.rewardedAd = 'loading';
    this.rewardPendingShow = true;

    try {
      admob.createRewarded({
        adUnitId: environment.androidRewardAdId,
        isAutoShow: false,
        retryInterval: 5000,
      });
    } catch (error) {
      console.error('Error creating rewarded ad:', error);
      this.rewardedAd = false;
      this.rewardPendingShow = false;
      this.resolveReward(false);
    }

    return result;
  }

  private showRewardedNow(): void {
    const admob = this.resolveAdMob();
    try {
      this.isShowingFullscreenAd = true;
      admob.showRewarded();
    } catch (error) {
      console.error('Error showing rewarded ad:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
      this.resolveReward(false);
    }
  }

  private resolveReward(value: boolean): void {
    if (!this.rewardResolver) {
      return;
    }
    const resolve = this.rewardResolver;
    this.rewardResolver = null;
    resolve(value);
  }

  // ==================================================
  // APP OPEN
  // ==================================================

  private setupAppOpenLifecycle(): void {
    document.addEventListener(
      'pause',
      () => {
        this.zone.run(() => {
          if (this.isAdSuppressed || this.isShowingFullscreenAd) {
            return;
          }

          if (this.isSdkInitialized) {
            this.loadAppOpenAd();
          } else {
            // Queue load if SDK is still initializing
            this.pendingLoadOnPause = true;
          }
        });
      },
      false,
    );

    document.addEventListener(
      'resume',
      () => {
        this.zone.run(() => {
          const admob = this.resolveAdMob();
          if (!admob || this.isAdSuppressed || this.isShowingFullscreenAd) {
            return;
          }

          if (Date.now() - this.lastFullscreenDismissedTime < this.FULLSCREEN_RESUME_DELAY) {
            return;
          }

          if (Date.now() - this.lastAppOpenShownTime < this.APP_OPEN_COOLDOWN) {
            return;
          }

          if (this.appOpenAd !== true) {
            return;
          }

          this.showAppOpen();
        });
      },
      false,
    );
  }

  private loadAppOpenAd(): void {
    const admob = this.resolveAdMob();

    if (!admob || !this.isSdkInitialized || this.appOpenAd) {
      return;
    }

    this.appOpenAd = 'loading';

    try {
      admob.loadAppOpenAd({
        adUnitId: environment.androidAppOpenId,
        isAutoShow: false,
        retryInterval: 5000,
      });
    } catch (error) {
      this.appOpenAd = false;
      console.error('Error loading App Open ad:', error);
    }
  }

  private showAppOpen(): void {
    const admob = this.resolveAdMob();
    if (!admob) return;

    this.appOpenAd = false;
    this.isShowingFullscreenAd = true;

    try {
      admob.showAppOpenAd();
    } catch (error) {
      console.error('Error showing App Open ad:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
    }
  }

  // ==================================================
  // AD EVENTS
  // ==================================================

  private setupAdEvents(): void {

    // ---- rewarded ----

    document.addEventListener('on.rewarded.loaded', () => {
      this.zone.run(() => {
        this.rewardedAd = true;

        if (this.rewardPendingShow) {
          this.rewardPendingShow = false;
          this.rewardedAd = false;
          this.showRewardedNow();
        }
      });
    });

    document.addEventListener('on.rewarded.earned', () => {
      this.zone.run(() => {
        this.hasUserGotReward = true;
        this.rewardEarned$.next();
        this.resolveReward(true);
      });
    });

    document.addEventListener('on.rewarded.shown', () => {
      this.zone.run(() => {
        this.isShowingFullscreenAd = true;
      });
    });

    const rewardedClosed = () => {
      this.zone.run(() => {
        this.rewardedAd = false;
        this.rewardPendingShow = false;
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
        this.resolveReward(false);
      });
    };

    document.addEventListener('on.rewarded.dismissed', rewardedClosed);
    document.addEventListener('on.rewarded.canceled', rewardedClosed);

    document.addEventListener('on.rewarded.failed.show', (event: any) => {
      console.error('Rewarded failed to show:', event);
      rewardedClosed();
    });

    document.addEventListener('on.rewarded.failed.load', (event: any) => {
      console.error('Rewarded failed to load:', event);
      this.zone.run(() => {
        this.rewardedAd = false;
        this.rewardPendingShow = false;
        this.resolveReward(false);
      });
    });

    // ---- interstitial ----

    document.addEventListener('on.interstitial.loaded', () => {
      this.zone.run(() => {
        console.log('inter-ad-loaded')
      });
    });

    document.addEventListener('on.interstitial.failed.load', (event: any) => {
      console.error('Interstitial failed to load:', event);
      this.zone.run(() => {
      });
    });

    const interstitialClosed = () => {
      this.zone.run(() => {
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
      });
    };

    document.addEventListener('on.interstitial.dismissed', interstitialClosed);

    document.addEventListener('on.interstitial.failed.show', (event: any) => {
      console.error('Interstitial failed to show:', event);
      interstitialClosed();
    });

    // ---- app open ----

    document.addEventListener('on.appopen.loaded', () => {
      this.zone.run(() => {
        this.appOpenAd = true;
      });
    });

    document.addEventListener('on.appopen.failed.load', (event: any) => {
      console.error('App Open failed to load:', event);
      this.zone.run(() => {
        this.appOpenAd = false;
      });
    });

    document.addEventListener('on.appopen.shown', () => {
      this.zone.run(() => {
        this.appOpenAd = false;
        this.isShowingFullscreenAd = true;
        this.lastAppOpenShownTime = Date.now();
      });
    });

    const appOpenClosed = () => {
      this.zone.run(() => {
        this.appOpenAd = false;
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
        this.appOpenDismissed$.next();
      });
    };

    document.addEventListener('on.appopen.dismissed', appOpenClosed);

    document.addEventListener('on.appopen.failed.show', (event: any) => {
      console.error('App Open failed to show:', event);
      appOpenClosed();
    });
  }
}

Describe the solution you'd like

loading and showing an ad, should be fast

Describe alternatives you've considered

No response

[EMI-INDO]

​Hi @ezzuah,

​First of all, thanks for giving the plugin a try and for the kind words! It's great to see developers migrating over.

​To answer your concern: this is actually not a bug in the plugin, but rather a fundamental shift in how Google's new GMA Next-Gen SDK operates compared to the legacy SDK (which admob-plus uses).

​Here is a breakdown of why this is happening in your code:

• ​Initialization Delay: The new Next-Gen SDK intentionally waits until the core SDK and all mediation adapters are fully initialized before it fires the success callback. The legacy SDK used to fire this almost instantly. Because you are calling showBannerAd() inside the initialization callback, your app is waiting for this entire blocking process to finish first.
• Network Request: Once initialization is done, your code calls createBanner or createInterstitial. This triggers a fresh network request to Google's servers to fetch the ad, which adds another few seconds.
  ​
  The Solution: Use the Preloader Engine ⚡
  ​To solve this exact "slow loading" issue, I built a dedicated Preloader Engine into this plugin. Since you are building a custom buffering/loading state in your Angular service, you will love this: the Preloader Engine handles all of that natively in the background.

​Instead of fetching the ad at the exact moment you want to show it, you start the preloader once, and it caches the ads for you.

• https://github.com/swaplab-engine/cordova-plugin-admob-nextgen#10-preloader-engine-android-only---next-gen-sdk
• https://github.com/swaplab-engine/cordova-plugin-admob-nextgen/tree/main/simple-example/www/js/preloading

​For example, for your Interstitial:

async initializeAds(): Promise<void> {
  await this.platform.ready();
  const admob = this.resolveAdMob();

  if (!admob) return;

  admob.initialize(
    {
      maxAdContentRating: 'G',
      tagForChildDirectedTreatment: false,
      tagForUnderAgeOfConsent: false,
    },
    () => {
      this.zone.run(() => {
        this.isSdkInitialized = true;
        
        // Start caching the ads in the background immediately
        this.startPreloaders(admob);
      });
    },
    (error: any) => console.error('AdMob initialization failed:', error)
  );
}

private startPreloaders(admob: any): void {
  // Preload Banner
  admob.startBannerPreload({
    adUnitId: environment.androidBannerAdId,
    position: 'bottom',
    size: 'ADAPTIVE',
    isOverlapping: false,
    collapsible: true,
    retryInterval: 5000,
    isAutoShow: true // Automatically shows once the buffer is ready
  });
}

// 1. Start preloading early in the background (e.g., right after initialization)
// This only needs to be triggered ONCE.
admobNextGen.startInterstitialPreload({
    adUnitId: environment.androidInterstitialAdId,
    bufferSize: 1, // Caches 1 ad in the background (Max: 3)
    isAutoShow: false,
    retryInterval: 5000
});

// 2. Later, when you actually need to show it, it appears instantly (0 seconds delay!)
if (admobNextGen.isInterstitialAdAvailable()) {
    admobNextGen.showPreloadedInterstitial();
}

The exact same concept applies to Banners (startBannerPreload, showPreloadedBanner), App Open, and Rewarded ads.

​I highly recommend checking out the Preloader Engine section in the README. If you replace your classic methods with the Preload methods, your ads will load and display instantly.
​Let me know if you need help refactoring your Angular service!

[ezzuah]

Thanks @EMI-INDO for getting back. So far, what I've realized with preloaders is that the interstitial doesn't show up and the banner shows up well, but the issue with the banner is that when it displays, it pushes the view to the top, making the app header disappear. I was debugging, so I was thinking because the collapsible is true, I set it to false, and it behaved the same way.
When I used admob.createBanner it wasn't behaving that way, but switching to startBannerPreload method is making the banner behave this way

import { Injectable, NgZone } from '@angular/core';
import { Platform } from '@ionic/angular';
import { Subject } from 'rxjs';

import { environment } from 'src/environments/environment';

declare var admobNextGen: any;

@Injectable({
  providedIn: 'root',
})
export class AdmobServices {

  private admob: any = null;
  private isSdkInitialized = false;
  private pendingLoadOnPause = false;


  private readonly isAndroid = this.platform.is('android');

  isShowingFullscreenAd = false;
  isAdSuppressed = false;

  private lastFullscreenDismissedTime = 0;
  private readonly FULLSCREEN_RESUME_DELAY = 1500;

  // --------------------------------------------------
  // INTERSTITIAL
  // --------------------------------------------------

  interstitialDismissed$ = new Subject<void>();

  // --------------------------------------------------
  // REWARDED
  // --------------------------------------------------

  hasUserGotReward = false;
  rewardEarned$ = new Subject<void>();

  private rewardResolver: ((rewarded: boolean) => void) | null = null;


  appOpenAd: any;
  appOpenDismissed$ = new Subject<void>();
  lastAppOpenShownTime = 0;
  readonly APP_OPEN_COOLDOWN = 30000;

  constructor(
    private platform: Platform,
    private zone: NgZone,
  ) {
    this.setupAdEvents();
    this.setupAppOpenLifecycle();
  }

  private resolveAdMob(): any {
    if (this.admob) return this.admob;
    this.admob =
      (window as any).admobNextGen ||
      (typeof admobNextGen !== 'undefined' ? admobNextGen : null);
    return this.admob;
  }

  // ==================================================
  // INITIALIZATION
  // ==================================================

  async initializeAds(): Promise<void> {
    await this.platform.ready();

    const admob = this.resolveAdMob();
    if (!admob) {
      console.error('AdMob Next Gen not available.');
      return;
    }

    admob.initialize(
      {
        maxAdContentRating: 'G',
        tagForChildDirectedTreatment: false,
        tagForUnderAgeOfConsent: false,
      },
      () => {
        this.zone.run(() => {
          this.isSdkInitialized = true;
          this.startPreloaders(admob);

          if (this.pendingLoadOnPause) {
            this.pendingLoadOnPause = false;
            this.loadAppOpenAd();
          }
        });
      },
      (error: any) => console.error('AdMob initialization failed:', error),
    );
  }

 
  private startPreloaders(admob: any): void {
    if (!this.isAndroid) {
      console.warn('AdMob preload buffering is Android-only; skipping preload on this platform.');
      return;
    }

    admob.startBannerPreload({
      adUnitId: environment.androidBannerAdId,
      position: 'bottom',
      size: 'ADAPTIVE',
      isOverlapping: false,
      collapsible: true,
      retryInterval: 5000,
      isAutoShow: true, // shows itself once buffered - no showBannerAd() call needed
    });

    admob.startInterstitialPreload({
      adUnitId: environment.androidInterstitialAdId,
      bufferSize: 1,
      isAutoShow: false,
      retryInterval: 5000,
    });

    admob.startRewardedPreload({
      adUnitId: environment.androidRewardAdId,
      bufferSize: 1,
      isAutoShow: false,
      retryInterval: 5000,
    });
  }

  // ==================================================
  // BANNER
  // ==================================================

  async hideBanner(): Promise<void> {
    await this.platform.ready();
    const admob = this.resolveAdMob();
    if (!admob) {
      return;
    }

    try {
      admob.removeBanner();
    } catch (error) {
      console.error('Error removing banner:', error);
    }
  }

  // ==================================================
  // INTERSTITIAL
  // ==================================================

  async showInterstitialAd(onDone?: () => void): Promise<void> {
    await this.platform.ready();
    const admob = this.resolveAdMob();

    if (!admob || !this.isAndroid || !admob.isInterstitialAdAvailable?.()) {
      onDone?.();
      return;
    }

    this.isShowingFullscreenAd = true;

    try {
      admob.showPreloadedInterstitial();

      if (onDone) {
        const sub = this.interstitialDismissed$.subscribe(() => {
          sub.unsubscribe();
          onDone();
        });
      }
    } catch (error) {
      console.error('Error showing interstitial:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
      onDone?.();
    }
  }

  // ==================================================
  // REWARDED
  // ==================================================

  async loadAdReward(): Promise<boolean> {
    await this.platform.ready();
    const admob = this.resolveAdMob();

    if (!admob || !this.isAndroid || this.rewardResolver) {
      return false;
    }

    if (!admob.isRewardedAdAvailable?.()) {
      return false;
    }

    this.hasUserGotReward = false;

    const result = new Promise<boolean>((resolve) => {
      this.rewardResolver = resolve;
    });

    try {
      this.isShowingFullscreenAd = true;
      admob.showPreloadedRewarded();
    } catch (error) {
      console.error('Error showing rewarded ad:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
      this.resolveReward(false);
    }

    return result;
  }

  private resolveReward(value: boolean): void {
    if (!this.rewardResolver) {
      return;
    }
    const resolve = this.rewardResolver;
    this.rewardResolver = null;
    resolve(value);
  }

  // ==================================================
  // APP OPEN
  // ==================================================

  private setupAppOpenLifecycle(): void {
    document.addEventListener(
      'pause',
      () => {
        this.zone.run(() => {
          if (this.isAdSuppressed || this.isShowingFullscreenAd) {
            return;
          }

          if (this.isSdkInitialized) {
            this.loadAppOpenAd();
          } else {
            // Queue load if SDK is still initializing
            this.pendingLoadOnPause = true;
          }
        });
      },
      false,
    );

    document.addEventListener(
      'resume',
      () => {
        this.zone.run(() => {
          const admob = this.resolveAdMob();
          if (!admob || this.isAdSuppressed || this.isShowingFullscreenAd) {
            return;
          }

          if (Date.now() - this.lastFullscreenDismissedTime < this.FULLSCREEN_RESUME_DELAY) {
            return;
          }

          if (Date.now() - this.lastAppOpenShownTime < this.APP_OPEN_COOLDOWN) {
            return;
          }

          if (this.appOpenAd !== true) {
            return;
          }

          this.showAppOpen();
        });
      },
      false,
    );
  }

  private loadAppOpenAd(): void {
    const admob = this.resolveAdMob();

    if (!admob || !this.isSdkInitialized || this.appOpenAd) {
      return;
    }

    this.appOpenAd = 'loading';

    try {
      admob.loadAppOpenAd({
        adUnitId: environment.androidAppOpenId,
        isAutoShow: false,
        retryInterval: 5000,
      });
    } catch (error) {
      this.appOpenAd = false;
      console.error('Error loading App Open ad:', error);
    }
  }

  private showAppOpen(): void {
    const admob = this.resolveAdMob();
    if (!admob) return;

    this.appOpenAd = false;
    this.isShowingFullscreenAd = true;

    try {
      admob.showAppOpenAd();
    } catch (error) {
      console.error('Error showing App Open ad:', error);
      this.isShowingFullscreenAd = false;
      this.lastFullscreenDismissedTime = Date.now();
    }
  }

  // ==================================================
  // AD EVENTS
  // ==================================================

  private setupAdEvents(): void {


    document.addEventListener('on.rewarded.earned', () => {
      this.zone.run(() => {
        this.hasUserGotReward = true;
        this.rewardEarned$.next();
        this.resolveReward(true);
      });
    });

    document.addEventListener('on.rewarded.shown', () => {
      this.zone.run(() => {
        this.isShowingFullscreenAd = true;
      });
    });

    const rewardedClosed = () => {
      this.zone.run(() => {
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
        this.resolveReward(false);
      });
    };

    document.addEventListener('on.rewarded.dismissed', rewardedClosed);
    document.addEventListener('on.rewarded.canceled', rewardedClosed);

    document.addEventListener('on.rewarded.failed.show', (event: any) => {
      console.error('Rewarded failed to show:', event);
      rewardedClosed();
    });

    document.addEventListener('on.rewarded.failed.load', (event: any) => {
      // The buffer's own retryInterval handles this - just log it.
      console.error('Rewarded failed to load:', event);
    });

    // ---- interstitial ----
    // Same story: no manual loaded/loading tracking, the buffer owns it.

    document.addEventListener('on.interstitial.failed.load', (event: any) => {
      console.error('Interstitial failed to load:', event);
    });

    const interstitialClosed = () => {
      this.zone.run(() => {
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
        this.interstitialDismissed$.next();
      });
    };

    document.addEventListener('on.interstitial.dismissed', interstitialClosed);

    document.addEventListener('on.interstitial.failed.show', (event: any) => {
      console.error('Interstitial failed to show:', event);
      interstitialClosed();
    });

    // ---- app open ----

    document.addEventListener('on.appopen.loaded', () => {
      this.zone.run(() => {
        this.appOpenAd = true;
      });
    });

    document.addEventListener('on.appopen.failed.load', (event: any) => {
      console.error('App Open failed to load:', event);
      this.zone.run(() => {
        this.appOpenAd = false;
      });
    });

    document.addEventListener('on.appopen.shown', () => {
      this.zone.run(() => {
        this.appOpenAd = false;
        this.isShowingFullscreenAd = true;
        this.lastAppOpenShownTime = Date.now();
      });
    });

    const appOpenClosed = () => {
      this.zone.run(() => {
        this.appOpenAd = false;
        this.isShowingFullscreenAd = false;
        this.lastFullscreenDismissedTime = Date.now();
        this.appOpenDismissed$.next();
      });
    };

    document.addEventListener('on.appopen.dismissed', appOpenClosed);

    document.addEventListener('on.appopen.failed.show', (event: any) => {
      console.error('App Open failed to show:', event);
      appOpenClosed();
    });
  }
}

Let me know what i'm not doing right in my service

[EMI-INDO]

Hello @ezzuah,

Thank you for the detailed feedback and code snippets. You actually helped uncover two distinct issues here!

1. The Banner pushing the header issue

You are absolutely right. I investigated the native Java code and found a bug specifically in the Preloader engine for Cordova environments. The layout adjustment logic that preserves the systemSafeTop (which protects your Ionic header) was accidentally omitted in the BannerPreloadExecutor.java file, causing it to fall back to legacy margin manipulations that push the UI upwards.

I have fixed this internally here: Fix Banner Preload Margins

You can test the fix by removing the plugin and platform, then adding the latest beta version:

cordova plugin rm cordova-plugin-admob-nextgen
cordova plugin add cordova-plugin-admob-nextgen@2.0.2-beta.1 --save --variable APP_ID_ANDROID="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"

Alternative Context for Ionic Layouts:
Sometimes this is also a visual layout conflict with Ionic itself. When you set isOverlapping: false, the plugin forcefully shrinks the height of the webview so your content isn't covered. Because the Preloader renders instantly compared to the slower Classic engine, it abruptly recalculates the Ionic viewport, which often pushes the <ion-header> out of bounds.

To avoid this entirely, you can simply change your preload configuration to isOverlapping: true. This tells the plugin to float the ad over the webview without resizing the DOM, preserving your Ionic layout:

admob.startBannerPreload({
  adUnitId: environment.androidBannerAdId,
  position: 'bottom',
  size: 'ADAPTIVE',
  isOverlapping: true, // <-- Change this to true
  collapsible: false,
  retryInterval: 5000,
  isAutoShow: true,
});

2. The Interstitial Not Showing

For the interstitial, the issue lies in how you are calling admob.isInterstitialAdAvailable(). Since Cordova/Capacitor bridge methods are strictly asynchronous, executing it directly inside a synchronous if statement evaluates to undefined, which prematurely terminates the function.

While you could wrap it in a Promise, the easiest and most reliable way to handle this in Angular/Ionic is to rely on the built-in global events to manage a simple boolean state. The preloader engine fires the exact same events as the classic engine.

You can simply track the availability using the events you already have in your service.

First, add a simple state tracker:

private isInterstitialReady = false;

Then, add the listeners in your setupAdEvents method:

// Set to true when an ad (classic or preloaded) is ready
document.addEventListener('on.interstitial.loaded', () => {
  this.zone.run(() => {
    this.isInterstitialReady = true;
    console.log('Interstitial Ad Loaded & Ready');
  });
});

// Set to false if the preloader pool is completely empty
document.addEventListener('on.interstitial.preload.exhausted', () => {
  this.zone.run(() => {
    this.isInterstitialReady = false;
    console.warn('Interstitial Preload pool is empty');
  });
});

// Set to false when the ad is dismissed
document.addEventListener('on.interstitial.dismissed', () => {
  this.zone.run(() => {
    this.isInterstitialReady = false;
  });
});

Finally, just check that synchronous boolean in your show method:

async showInterstitialAd(onDone?: () => void): Promise<void> {
  await this.platform.ready();
  const admob = this.resolveAdMob();

  if (!admob || !this.isAndroid) {
    onDone?.();
    return;
  }

  // Check the synchronous boolean flag instead of the async bridge method
  if (!this.isInterstitialReady) {
    console.warn('Ad not ready yet.');
    onDone?.();
    return;
  }

  this.isShowingFullscreenAd = true;

  try {
    // Renders instantly from the buffer pool
    admob.showPreloadedInterstitial();

    if (onDone) {
      const sub = this.interstitialDismissed$.subscribe(() => {
        sub.unsubscribe();
        onDone();
      });
    }
  } catch (error) {
    console.error('Error showing interstitial:', error);
    this.isShowingFullscreenAd = false;
    this.lastFullscreenDismissedTime = Date.now();
    onDone?.();
  }
}

Using the global event listener ensures you are always in sync with the native SDK state without dealing with asynchronous callbacks. You can apply this exact same logic for Rewarded and App Open ads.

Let me know if this resolves everything for you!

[ezzuah]

@EMI-INDO thanks for the help; the solution above worked. I applied the same interstitial solution to reward ads, and that too worked. Great job!