Screen is blinking when an AdMob banner is displayed in ioinc? - ionic-framework

Once the AdMob banner is displayed, it blinks the screen knowing that there is no error reporting in the console!
The screen viewing the ad includes a spinner that runs until some data are fetched from an API, so I kept the spinner loading until the Ad is present to avoid blinking, but the screen still blinks when Ad is shown.
This is a sample from my code:
this.admobFree.banner.config(ConfigData.bannerAds.config);
// autoShow = true in config.
this.admobFree.banner.prepare().then(()=>{
// Boolean variable that is assigned to the *ngIf directive to keep the spinner until the
// banner is loaded.
// <ion-spinner name="crescent" *ngIf="!isDataLoaded&&!(isBannerLoaded)"></ion-spinner>
isBannerLoaded=true;
});
What is causing the screen blink when a banner is viewed? And how to solve this?!
(ionic 4)

It seems that it is a fault in the ionic AdMob plugin where this issue is reported on the ionic forum without proposed solutions!
https://forum.ionicframework.com/t/admob-screen-flash-on-load/25526
I had solved this by waiting for the AdMob banner to be shown and then display my actual view where this is controlled by using the *ngIf directive and a Boolean variable like this:
isContentVisible: boolean=false;
....
this.admobFree.banner.show().then(()=>{
this.isContentVisible=true;
});
This will decrease the blink by 95%, but it may take some seconds to display if the internet connection is weak!
By the way the blink is slight, and will not be a clearly noticed issue, but to be professional it must be solved!
Hope the the ionic AdMob developers will solve that!

Related

Ionic / Capacitor flickering screen and refresher not working

I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked

Unity Admob banner suddenly becomes bigger with video on its bottom

recently I have decided to ad google admob banners to the game. I have followed every step by the guide and added our ad-unit-id too. So everything is ok and cool, but suddenly the banner becomes larger and is showing video at about thrice (or even bigger) the size of the banner itself.
I'm using unity 2020.1.13 and I have tested different banner sizes as admob guide suggesting (SmartBanner, AdaptiveBanner, (default small) Banner ,... ) everything. but it keeps punching me in the face each time. The following images are the normal size(which I expect it to remain) and the larger version that happens 2-3 times out of 10.
Normal size
After loaded video size
The code requesting the banner is:
public void RequestBanner(string unitID)
{
// Clean up banner ad before creating a new one.
if (this.bannerViewAd != null)
{
Debug.Log("|||| Prev Banner removed!");
this.bannerViewAd.Destroy();
}
AdSize adaptiveSize =
AdSize.GetPortraitAnchoredAdaptiveBannerAdSizeWithWidth(AdSize.FullWidth);
// Create a 320x50 banner at the top of the screen.
this.bannerViewAd = new BannerView(unitID, adaptiveSize, AdPosition.Bottom);
// Called when an ad request has successfully loaded.
this.bannerViewAd.OnAdLoaded += this.HandleOnAdLoaded;
// Called when an ad request failed to load.
this.bannerViewAd.OnAdFailedToLoad += this.HandleOnAdFailedToLoad;
// Called when an ad is clicked.
this.bannerViewAd.OnAdOpening += this.HandleOnAdOpened;
// Called when the user returned from the app after an ad click.
this.bannerViewAd.OnAdClosed += this.HandleOnAdClosed;
// Called when the ad click caused the user to leave the application.
this.bannerViewAd.OnAdLeavingApplication += this.HandleOnAdLeavingApplication;
// Create an empty ad request.
AdRequest adRequest = new AdRequest.Builder().Build();
// Load the banner with the request.
this.bannerViewAd.LoadAd(adRequest);
}
in the code u are seeing adaptivesize and constantSize , I tested both and came up with the same result, also I tested smart banner and same result too.
Until now I could not find any solution for this, even after contacting admob support they refused to answer me.
So for you guys using admob banner ads, seems like you mustn't use video banner

Hide Google Adsense banner when there's no advertisments on Website

I have some problems when trying to integrate Google Adsense to my Weather Website.
The google banner is running but not well. Sometimes, it doesn't show anything except for a blank banner. Like in this pic: Picture
The first problem leads me to think about hiding the banner when there's no ads loaded. I found a solution which is adding data-ad-format="auto" to the banner tag. But I need to customize the banner dimension for the mobile. If I use data-ad-format="auto", I will not be able to customize the dimensions of the banner.
Does anyone has a solution for this? Hiding the banner when there's no ads?
Thank you very much!
I have had this problem for quite a while, the first ad unit above the fold does not collapse (with collapse set within Adsense), yet the ads below the fold will collapse. I have read that it will work if you integrate it with Google Ad Manager though I haven't had time to test it yet
You can hide the element if no ads using this:
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
or only show element if there is and ad using this:
ins.adsbygoogle a {
display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
display: block;
}
source: https://support.google.com/adsense/answer/10762946?hl=en

Callback for Google Play Ads (android.googleAdUnitId or ios.googleAdUnitId build hints)

My CodenameOne app works perfectly when using the android.googleAdUnitId or ios.googleAdUnitId build hints in order to show the Admob Ads banner at the bottom. However, I would like to give some coins/diamonds as rewards when users click on the bottom Ads banner. How can I do this? Is it possible for the main class to handle this by implementing the AdsListener interface like the https://github.com/chen-fishbein/admobfullscreen-codenameone supports (or at least the main class should implement a special interface which has the onAdLeftApplication() function only?)
Shai, Chen, anyone, do you have any advice?
There is no way to adjust the banner behavior, if you want to reward the user use full screen ads, there are quite a few full screen ads providers with a CodenameOne integration see these:
https://github.com/chen-fishbein/flurry-codenameone , https://github.com/chen-fishbein/startapp-codenameone , https://github.com/amiga/aerserv-codenameone

How to require fullscreen mode in a jQTouch application?

I'm using jQTouch to develop a version of a website optimized for safari on the iphone. The jQTouch demo helpfully shows how to show an "install this" message for users not using full screen mode and hide it for those who are. When in fullscreen mode, the body should have the class "fullscreen." So you can hide the "install this" message for people who have already added your app to their home page by adding this css rule to your stylesheet:
body.fullscreen #home .info {
display: none;
}
What I'd like to do is require users to use the app in fullscreen mode only. When viewed from the regular browser, they should only see a message asking them to install the app. That message should of course be hidden otherwise.
This ought to be really, really easy, so I must just be missing something obvious.
I thought one way to do this would be to simply test for the class "fullscreen" on the body: if it's not there, use goTo to get to another div, or hide the other divs, or something like that.
Strangely, however, this doesn't work. As a test, I've still got the original "info" message, as in the jQTouch demo, and it doesn't show up when I launch in fullscreen mode. So the body must have the fullscreen class. And yet I can't find any other trace of it: when I put this alert to test things after the document has loaded, I get nothing when launching in fullscreen mode:
alert($("body").attr("class"));
I also thought I might test for fullscreen mode by checking for the value of the fullScreen boolean. But this doesn't seem to work either. What am I missing? What is the best way to do this?
Well, I couldn't figure out why the standard way wasn't working, but someone on the jQTouch Google Group suggested this, which works:
if (window.navigator.standalone) {
alert ('Thanks for launching this app your home screen')
} else {
alert('Add this app to your home screen for the best experience')
}