How do I fix banner ad placement for specific ads

[jeremy-wl-app-lite]

Describe the bug Specific banner (top and adaptive) are displayed off-center in both my android and my ios apps.

To Reproduce Steps to reproduce the behavior:

1. I have not found any examples of this behavior, outside of my app

Expected behavior Banner ad should be centered

Screenshots Quickbooks

KalTire

Smartphone (please complete the following information):

• Device: Pixel 4a, Samsung Galaxy Tab S7 FE, iPhone 8, and many more
• OS: Every iOS and Android version I've tried. This is on completely up to date devices

Additional context This issue happens for specific ads only, some examples include: Scotiabank (shifted up and left), Kraken (shifted left, might be shifted up, can't tell), MB Minerals, QuickBooks, Rogers

[jeremy-wl-app-lite]

Some of my implementation code:

SizeChanged listener setup:

AdMob.addListener(BannerAdPluginEvents.SizeChanged, this._adMobSizeChanged);

Banner ad initialization:

    private async _showBannerAd(position: BannerAdPosition) {
        const settings = this._getSettings();
        const options: BannerAdOptions = {
            adId: settings.bannerAdId,
            adSize: BannerAdSize.ADAPTIVE_BANNER,
            position,
            margin: 0,
            isTesting: settings.isTesting,
        }

        await AdMob.showBanner(options);
    }

_adMobSizeChanged:

    private _adMobSizeChanged = (info: AdMobBannerSize) => {
        console.log("AD SIZE CHANGED: " + info.height);
        const appMargin = info.height;

        this._isServingBannerAd = (appMargin !== 0);
        if (appMargin > 0) {
            const app: HTMLElement = document.querySelector('ion-router-outlet')!;
            app.style.marginTop = `${appMargin}px`;
        } else {
            const app: HTMLElement = document.querySelector('ion-router-outlet')!;
            app.style.marginTop = `${appMargin}px`;
        }
        this.onAdsChanged.next();
    }

[jeremy-wl-app-lite]

An interstitial example:

[distante]

To be honest I haven't seen this before. Have you tried debug it with android studio and see if is the plugin view what is not center?

I have the feeling that it is an Admob issue.

[jeremy-wl-app-lite]

Thank-you @distante for your suggestion. I debugged the ad placement through XCode, and got the following results. After watching the bannerViewDidReceiveAd function get called 79 times, I recorded the following results.

Here is an example of the output gathered:

WL-Log: Wednesday, February 7, 2024 at 12:24:02 PM Central Standard Time -- screen x/y: Optional(0.0) / Optional(20.0) WL-Log: Wednesday, February 7, 2024 at 12:24:02 PM Central Standard Time -- margins (left/top): 8.0 - 8.0 WL-Log: Wednesday, February 7, 2024 at 12:24:02 PM Central Standard Time -- x: 0.0 - 375.0, y: 20.0 - 79.0 WL-Log: Wednesday, February 7, 2024 at 12:24:02 PM Central Standard Time -- bannerViewDidReceiveAd -- width: 375.0, height: 59.0

Are these numbers what you would expect to see? I haven't made any other changes to the plugin's code (v5.3.0).

This is my modified version of bannerViewDidReceiveAd to produce these logs:

• xy = bannerView.superview?.convert(bannerView.frame.origin, to: nil);
• margins = bannerView.layoutMargins
• width = bannerView.frame.width
• height = bannerView.frame.height

` public func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { NSLog("bannerViewDidReceiveAd")

    let width = bannerView.frame.width
    var height = bannerView.frame.height

    let xy = bannerView.superview?.convert(bannerView.frame.origin, to: nil);

    print("WL-Log: \(Date().description(with: Locale.current)) -- screen x/y: \(xy?.x) / \(xy?.y)");
    print("WL-Log: \(Date().description(with: Locale.current)) -- margins (left/top): \(bannerView.layoutMargins.left) - \(bannerView.layoutMargins.top)");
    print("WL-Log: \(Date().description(with: Locale.current)) -- x: \(bannerView.frame.minX) - \(bannerView.frame.maxX), y:  \(bannerView.frame.minY) - \(bannerView.frame.maxY)");
    print("WL-Log: \(Date().description(with: Locale.current)) -- bannerViewDidReceiveAd -- width: \(width), height: \(height)");

    // For fixing issue 160 iOs banner overlapping content on iPhone with rounded corners
    let safeAreaBottom = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
    height += safeAreaBottom

    self.plugin?.notifyListeners(BannerAdPluginEvents.SizeChanged.rawValue, data: [
        "width": width,
        "height": height
    ])
    self.plugin?.notifyListeners(BannerAdPluginEvents.Loaded.rawValue, data: [:])
}

`

I captured examples of correct and of incorrectly placed ads and there were no differences in the logged output.

Correct:

Incorrect:

Thanks for taking a look at this. Given that I've never seen this behaviour in other apps before, I need to know for certain if this is an issue specific to my app, or an admob issue.