How to create a banner on iOS platform that won't overlap with content?

[wuxiaomo6174]

Hi all, I am using the example code to use banner ad on IOS platform:

    cordova.plugins.emiAdmobPlugin.loadBannerAd({
        adUnitId: Banner_ID, //Banner_ID,
        position: "bottom-center", // "Recommended: bottom-center"
        //size: "banner", // autoResize: true (only responsive_adaptive)
        size: "leaderboard",
        collapsible: "bottom", // position: top | bottom (disable, empty string)
        autoResize: true, // default false
        autoShow: true, // default false

    });

Admob doestn't allow "Ad overlapping with app content" like my screenshots.
How to create a banner on iOS platform that won't overlap with content?

[merbin2012]

Follow the example
https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/blob/main/example/www/js/bannerAd.js

[wuxiaomo6174]

It doesn't work in IOS.
The body and the banner don't separated.

[merbin2012]

It won't work automatically. In the on.banner.load event, you will get the banner ad height. Using this height, you need to add padding to separate the banner ad from the HTML content.

Note: Currently, I believe only anchor banner ads return the correct banner ad height. I'll fix this for other banner ad types while working on the iOS project.

[EMI-INDO]

@wuxiaomo6174

You can ask @merbin2012,
whether the overlap in iOS can be manipulated,
or whether the body and baner should be separated completely.
feasible like Android's .styleBannerAd method

Currently I don't have free time, to make a lot of changes, it requires a lot of testing and changes such as .styleBannerAd method android

[wuxiaomo6174]

Thanks for your reply.
In my test , the overlap in iOS doesn't be manipulated now.
Admob doestn't allow "Ad overlapping with app content". So maybe we can not use banner in iOS now.

[merbin2012]

I'm currently busy with Android projects. I may move to the iOS project within 3 to 7 days. I'll check and let you know at that time.

[wuxiaomo6174]

Thanks advanced~

[EMI-INDO]

I will start this work, but gradually, it will not be immediately maximized, like what you want, but this is the foundation of a later achievement that will be perfect.

Usually @merbin2012 will debug changes, or new features that I make, and suggest appropriate changes as appropriate.

[merbin2012]

Currently I'm working in Android. I'll check it in iOS after finished this work. I think he not consider the banner ad height, and not adjust the html view based on it.

[EMI-INDO]

Yes, no problem, I will not burden or trouble anyone in this case, all of this is my own responsibility.

[EMI-INDO]

I have solved it.

next release, by default IOS

• this change includes counting navigationBars

+-------------------+
| WebView | (webViewContainer)
| |
+-------------------+
| BannerView | (bannerContainer)
+-------------------+

NOTE

To prevent damage to the elements/html that old users have set up in their projects, I still add a boolean condition

[EMI-INDO]

• New release [email protected]

• Note release
  https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/releases/tag/v2.0.3

[wuxiaomo6174]

Thanks for your new update.
I tested the new version 2.0.3. The result is following:
The banner will freeze the app with no banner. The error is following:

Using AdManager request
Invalid callback id received by sendPluginResult
[AdPlugin] Error adjusting layout for banner and WebView: layer <CALayer: 0x600000235900> is a part of cycle in its layer tree

The Open Ad function is good.
The interstitial function is good.
The Rewarded_Interstitial function is good.

My Xcode is 16.2.
Call me if any help.

[EMI-INDO]

Could you please post your problem in more detail, including logs, examples of your code, if there is a little video recorder.

• To avoid problems during production, separate the methods by platform.

Example

function loadBanner() {

    if (typeof cordova !== 'undefined') {

        // IOS Still under development
        if (isPlatformIOS){
            // If there is a problem isOverlapping: false
            cordova.plugins.emiAdmobPlugin.styleBannerAd({
                isOverlapping: true, // default false IOS | Android
                paddingWebView: 1.0 // Only IOS
            });
            
        } else {

         // Android

         cordova.plugins.emiAdmobPlugin.styleBannerAd({
            isOverlapping: true, // default false IOS | Android
            isStatusBarShow: true, // default true Only Android
            overlappingHeight: 0, // default 0 (Automatic) Only Android
            padding: 0, // default 0 Only Android
            margins: 0 // default 0 (Automatic) Only Android
        });


        }

        
        
    

        cordova.plugins.emiAdmobPlugin.loadBannerAd({
            adUnitId: Banner_ID, //Banner_ID,
            position: "bottom-center", // "Recommended: bottom-center"
            size: "banner", // autoResize: true (only responsive_adaptive)
            collapsible: "bottom", // position: top | bottom (disable, empty string)
            autoResize: true, // default false
            autoShow: true, // default false

        });
    }

}

[EMI-INDO]

• I just tested it, adding red color to debug paddingWebView: 10.0

[EMI-INDO]

I didn't get any error

[EMI-INDO]

If this is a problem, or any problem, it should be posted in its proper place,

Open a new issue https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/issues/new

[wuxiaomo6174]

Thanks for your new version.
I test the new code of "showPrivacyOptionsForm ". It runs good in iOS in Europe IP.
The Banner function seems not Ok.
So I create the issue of #56