Collapsible & banner ads display above the content

merbin2012 commented 1 month ago

Today I have decided to move from admob-plus to your awesome plugin. But in the implementation time, I was just check the banner ad only, it had the following issues.

I have tried the following code

emi-bug

1) In the above code, the adaptive banner ad is displayed and compared to the admob-plus plugin working very well. But it displays above the content, so it should be a problem, manually adjusting the CSS or HTML code is not a standard way.

2) collapsible ad also not showing

3) Documentation issue, one careless mistake is there, you have used "}" instead of ")" console.log("AdUnitId: " + data.adUnitId}; => console.log("AdUnitId: " + data.adUnitId);

Please fix those problems, and kindly let me know.

EMI-INDO commented 1 month ago

@merbin2012

sorry it looks like the documentation I made was wrong, I will update it later, the correct example

const bannerConfig = {

   adUnitId: "ca-app-pub-3940256099942544/9214589741", //Banner_ID,
   position: "bottom-center",
   size: "responsive_adaptive", // autoResize: true (only responsive_adaptive)
   collapsible: "bottom", // position: top | bottom (disable, empty string)
   autoResize: true, // on.screen.rotated === orientation.portrait || on.screen.rotated === orientation.landscape
   autoShow: true, // boolean

}

cordova.plugins.emiAdmobPlugin.loadBannerAd(bannerConfig,
// (Optional)
(data) => {
    // this data will be displayed after showBannerAd() applies to all ad types
    console.log("Micros: " + data.micros);
    console.log("Currency: " + data.currency);
    console.log("Precision: " + data.precision);
    console.log("AdUnitId: " + data.adUnitId};

     },
    (error) => {

     console.error("Error: " + error);

    }

);

https://developers.google.com/android/reference/com/google/android/gms/ads/AdValue

Key Point: getValueMicros() returns the value of the ad in micro units. For example, a getValueMicros() returned value of 5,000 means the ad is estimated to be worth $0.005.

merbin2012 commented 1 month ago

@EMI-INDO Please note, not only documentation issues, two more issues are mentioned. Also, "data.micros" and all of you mention properties are undefined.

EMI-INDO commented 1 month ago

@merbin2012

https://support.google.com/admob/answer/11322405

Turn on the setting for impression-level ad revenue in your AdMob account: Sign in to your AdMob account at https://apps.admob.com. Click Settings in the sidebar. Click the Account tab. In the Account controls section, click the Impression-level ad revenue toggle to turn on this setting.

merbin2012 commented 1 month ago

Ooh, ok. Thanks for the information. Please let me know once all the issues are fixed.

merbin2012 commented 3 weeks ago

@EMI-INDO Is there any updates regarding

1) In the above code, the adaptive banner ad is displayed and compared to the admob-plus plugin working very well. But it displays above the content, so it should be a problem, manually adjusting the CSS or HTML code is not a standard way.

2) Collapsible ad also not showing

emi415064 commented 3 weeks ago

@merbin2012

overlapping. It's hard to handle this problem, because you didn't open the problem with the template, I don't know if you are using cordova or ioinc, whether it's capacitor I don't know, if you are using ioinc, when I test it in cordova it won't solve the problem.
Collapsible ad. I tested it in ad sdk 23+ Collapsible ad does not display on android, it works in the old version of the plugin, is this an sdk problem or the responsive banner size code that I created.

while on ios it works on all ad sdk versions.

merbin2012 commented 3 weeks ago

In admob plus overlapping is perfectly working. I am using both Cordova and capacitor, in both I am only using Cordova admob plus plugin . Please tell me can I use this or not!? I think without overlapping it should be waste.

EMI-INDO commented 3 weeks ago

I recommend you to stick with admob plus cordova, retson is more experienced.

I currently have to finish some of my pending projects. All my cordova plugins are maintained as usual.

merbin2012 commented 3 weeks ago

@EMI-INDO Thank you. Please let me know, if you done in future.

merbin2012 commented 1 week ago

Hi This is a great plugin, the admob plus plugin is not working in my capacitor - iOS device, project, but worked in Capacitor - android. Also, I have tied other two capacitor admob plugin, but there app open ad and collapsible banner ad is not supported. BUT this plugin works in Capacitor - Android & Capacitor - iOS, the collapsible banner ad also working in iOS devices. Here in this plugin only major problem is the banner ad is displaying over the content but I have solved by using some mathematical calculation.

Currently, I have decided to use admob-plus in my Capacitor - Android project and emi-indo in my Capacitor-iOS project. Whenever the above two issues are fixed, I will completely move to this plugin.

Thank you very much.

EMI-INDO commented 1 week ago

To really separate the banner ad with the body I can't make it programmatically, If there is free time I will try it with xml

merbin2012 commented 1 week ago

@EMI-INDO I have resolved the banner overlapping issue for the Android device

path: emi/indo/cordova/plugin/admob/emiAdmobPlugin.kt

I have just added "fixForBannerOverlapping()" method only.

        override fun onAdLoaded() {
            .......
            .......
            cWebView!!.loadUrl("javascript:cordova.fireDocumentEvent('on.banner.load');")

            fixForBannerOverlapping()     // <= This line added

            val eventData = String.format(
                "{\"collapsible\": \"%s\"}",
                if (bannerView!!.isCollapsible) "collapsible" else "not collapsible"
            )
            .......
            .......
        }

The method "fixForBannerOverlapping" definition is fixForBannerOverlapping

    private fun fixForBannerOverlapping() {
        if (bannerView != null && mActivity != null && cWebView != null) {
            mActivity!!.runOnUiThread {
                try {
                    val bannerHeightInPx = bannerView!!.height
                    val displayMetrics = DisplayMetrics()
                    mActivity!!.windowManager.defaultDisplay.getMetrics(displayMetrics)
                    val screenHeightInPx = displayMetrics.heightPixels

                    // Adjust the WebView height to account for the banner ad
                    val webViewHeight = screenHeightInPx - (adSize.height+5)
                    val layoutParams = cWebView!!.view.layoutParams
                    layoutParams.height = webViewHeight
                    cWebView!!.view.layoutParams = layoutParams

                    // Log for debugging
                    Log.d("BannerAdjustment", "Adjusted WebView height: $webViewHeight")
                } catch (e: Exception) {
                    Log.e("AdmobPlugin", "Error adjusting WebView for banner: ${e.message}")
                }
            }
        }
    }

Note: 1) I have added +5, in "(adSize.height+5)", this is just for avoid exact position, I think, good, if you are get the this value from the user. The default value should be 0. 2) Also, please add a option to enable overlapping or not. I mean if(userWantNoOverlapping) fixForBannerOverlapping() 3) I have checked in my device "Redmi 11T pro", its working. Please check it from your side too.

Really, I like your plugin very much, because always you are trying to keep the admob latest version. Please let me know, this is ok or not and if you are published. Thank you

EMI-INDO commented 1 week ago

@merbin2012

Good job, this is what I want for any problem. I mean, any problem has to be solved together, but most people just blame and don't want to try to solve the problem, instead they put the problem on me who can't solve the problem, as if I don't have any other projects.

EMI-INDO commented 1 week ago

later I will add the desired function including the parameter if(int){ (adSize.height+int) ...... }

1n3JgKl9pQ6cUMrW commented 1 week ago

@merbin2012

Good job, this is what I want for any problem. I mean, any problem has to be solved together, but most people just blame and don't want to try to solve the problem, instead they put the problem on me who can't solve the problem, as if I don't have any other projects.

Yeah, the community on Github is not always friendly to the devs who do all the work.

But I wanted to say also "thank you" because of your work.

I use the Admob (Plus) plugin for Cordova since about ten years now and at the moment I use the "community" version, because the original version is not really maintained.

But I am looking forward to migrate to your plug-in, once I think it's the time to do so (depending on my needs and active projects).

I am not very good in Java, but try to help others out where I can on Github. I also did fix some bugs in the Admob Plus plug-in, but no one cares.

https://github.com/EYALIN/community-admob-plus/issues/15#issuecomment-2468848447

I even created a Cordova plug-in to to check and fix for this particular bug, so when I migrate to your plug-in I will continue helping here.

EMI-INDO commented 1 week ago

https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/commit/f188586ba7da0ae290809b17cbedf37dc445a770

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

Thank you.

EMI-INDO commented 1 week ago

@merbin2012

Now it's just a matter of Collapsible banner ads not working on android. I will fix it in the next 1 to 2 hours.

EMI-INDO commented 1 week ago

FIX

merbin2012 commented 1 week ago

@EMI-INDO Thank you so much. I will completely check and close this issue in one day. I love your fast response

merbin2012 commented 1 week ago

I have faced some new issue, for example while we hide the banner ad the webview height is not extended to full screen.

So we need to aware of the below three methods cordova.plugins.emiAdmobPlugin.showBannerAd() <= Already Fixed cordova.plugins.emiAdmobPlugin.hideBannerAd() <= When calling we need to adjust the webview height cordova.plugins.emiAdmobPlugin.removeBannerAd() <= When calling we need to adjust the webview height

Kindly check the below code.

    private fun bannerOverlappingToZero() {
        if (bannerView != null && mActivity != null && cWebView != null) {
            mActivity!!.runOnUiThread {
                try {
                    val rootView = (cWebView!!.view.parent as View)
                    rootView.post {
                        // Get the total height of the parent view
                        val totalHeight = rootView.height

                        // Adjust WebView height to match parent height
                        val layoutParams = cWebView!!.view.layoutParams
                        layoutParams.height = totalHeight
                        cWebView!!.view.layoutParams = layoutParams

                        // Ensure no padding/margin in WebView or its parent
                        cWebView!!.view.setPadding(0, 0, 0, 0)
                        (cWebView!!.view.parent as? ViewGroup)?.setPadding(0, 0, 0, 0)

                        // Force layout update
                        cWebView!!.view.requestLayout()

                        Log.d("BannerAdjustment", "WebView set to full height: $totalHeight")
                    }
                } catch (e: Exception) {
                    Log.e("AdmobPlugin", "Error setting WebView to full height: ${e.message}")
                }
            }
        }
    }

We need to call this method in the following place

else if (action == "hideBannerAd") {
            if(mActivity != null) {
                mActivity!!.runOnUiThread {
                    if (isBannerShow) {
                        try {
                            bannerView!!.visibility = View.GONE
                            bannerView!!.pause()
                            isBannerLoad = false
                            isBannerPause = 1

                            bannerOverlappingToZero()   //<= New Line

                        } catch (e: Exception) {
                            callbackContext.error(e.toString())
                        }
                    }
                }
            }
            return true
        }

And

else if (action == "removeBannerAd") {
            if(mActivity != null) {
                mActivity!!.runOnUiThread {
                    try {
                        if (bannerViewLayout != null && bannerView != null) {
                            bannerViewLayout!!.removeView(bannerView)
                            bannerView!!.destroy()
                            bannerView = null
                            bannerViewLayout = null
                            isBannerLoad = false
                            isBannerShow = false
                            isBannerPause = 2
                            lock = true

                             bannerOverlappingToZero()   //<= New Line

                        }
                    } catch (e: Exception) {
                        PUBLIC_CALLBACKS!!.error("Error removing banner: " + e.message)
                    }
                }
            }
            return true
        }

Also, again we should need to adjust the webview, if the user show the banner ad.

else if (action == "showBannerAd") {
            if(mActivity != null) {
                mActivity!!.runOnUiThread {
                    if (isBannerPause == 0) {
                        isShowBannerAds
                    } else if (isBannerPause == 1) {
                        try {
                            bannerView!!.visibility = View.VISIBLE
                            bannerView!!.resume()

                            bannerOverlapping()    //<= New Line

                        } catch (e: Exception) {
                            callbackContext.error(e.toString())
                        }
                    }
                }
            }
            return true
        }

I am just checking, not tested fully, still in testing.

EMI-INDO commented 6 days ago

Yeah wait a minute I need to debug it before pushing it to production.

And it seems that when banner position: “top-center” the webview does not move downwards

merbin2012 commented 6 days ago

@EMI-INDO In "on.banner.failed.load" event also we need to call the bannerOverlappingToZero.

Otherwise when we don't have any ads it will be display like this

EMI-INDO commented 4 days ago

I'm not a capacitor user, and I'm trying to create documentation for capacitors, is this wrong or not?

Documentation Capacitor example:

merbin2012 commented 3 hours ago

Fixed

EMI-INDO / emi-indo-cordova-plugin-admob

Collapsible & banner ads display above the content #26