Angular 2 Router Overlaps Ads about nativescript-admob HOT 10 OPEN

Hi, I think the solution would be to define the banner in xml/html as opposed to JS/TS (like I've done for the nativescript-mapbox plugin), but I haven't found the time to add that feature to this plugin.

from nativescript-admob.

Guys, just to comment I workaround the problem by using a listener on the router to hide/recreate the banner:

this._router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                Admob.hideBanner();
            } else if (event instanceof NavigationEnd) {
                this.createBottomBanner();
            }
        });

from nativescript-admob.

Agreed.. That would lead to better UX as well as better ad performance..it will also make it possible to show ads in specific locations as I mentioned in this issue here

Hope you get the time soon. :)

from nativescript-admob.

Is there any temporary way to over come this issue? Perhaps fiddling with some z-index property (No idea id there is any such thing just shooting in the dark here).

So far from what I have read on the web and from my personal experience Admob does penalize in terms of revenue if ads are not implemented properly.

So having a banner ad that disappears after one click is not something that would sit well with AdMob.

from nativescript-admob.

Another thing that I want to mention is that the issue mentioned only shows up when using <page-router-outlet> But if you are using <router-outlet> every thing works fine.
But using the <router-outlet> will not have caching as mentioned here

😄

from nativescript-admob.

+1

from nativescript-admob.

@ignaciolarranaga that works well! Thanks!
However there are problems when you use transition effects between pages. @EddyVerbruggen can you look at this issue?

from nativescript-admob.

I also have this issue with the ad not showing up after page navigation, but I don't think my issue is related to overlapping views. I have done quite a bit of debugging but still haven't found a solution yet.

What I tried so far:
(1) re-creating the banner on page navigatedTo. (e.g.)
this.page.on('navigatedTo', () => { this.adsView.createBanner(); });
I see the admob banner done message, but the admob banner only show up during app install and never showed up again after page navigation.

(2) modified the plugin to return a promise of adView from the nativescript-admob createBanner function, so I can do additional debugging.

(2a) created a StackLayout and tried to replace contents in the StackLayout, but no luck here since the adView returned is a non nativescript UI widget.
(e.g.)
html:
<StackLayout #bannerView name="bannerView"></StackLayout>
ts:

@ViewChild('bannerView') bannerView ElementRef;
ngOnInit() {
    this.page.on('navigatedTo', () => { 
        this.bannerView.nativeElement.addChild(adView);
    });
}

(2b) Right now, I am messing around with the rootViewController to try and addSubview.
I commented out the line where adView is added to rootViewController.view in the plugin. Since I am returning adView as a promise, I re-add adView back to rootViewController inside my component.

(e.g.)

return Admob.createBanner({
    testing: true,
    size: Admob.AD_SIZE.SMART_BANNER,
    iosBannerId: this.view.iosBannerId,
    androidBannerId: this.view.androidBannerId,
    iosTestDeviceIds: this.view.iosTestDeviceIds,
    margins: {
        bottom: 0
    }
}).then((adView: any) => {
    const app = utils.ios.getter(UIApplication, UIApplication.sharedApplication);
    app.keyWindow.rootViewController.view.addSubview(adView);
    app.keyWindow.rootViewController.view.bringSubviewToFront(adView);
});

Once again, it only works during app install. I am messing around with rootViewControllers.childViewControllers right now, but addSubview doesn't seem to work with the UIView inside.

Much appreciated if anyone can point me in the right direction. @EddyVerbruggen would you be able to help?

from nativescript-admob.

Hello @EddyVerbruggen , any luck resolving this problem? This is proving difficult to resolve for nativescript newbies like me.

from nativescript-admob.

Hey everyone.

There's one thing you can do to make it work. For now it works only on Android, I'm trying to make it work on iOS as well.

First of all, you need to modify admob.android.js file inside nativescript-admob package like in this commit:
https://github.com/ogrodowiczp/nativescript-admob/commit/1eea3162f8a2e248c5a82c34538fff78c5778ead

Then you need to modify your app.component.html to add needed frame.

<Page>
    <GridLayout rows="*, 50">
        <page-router-outlet row="0" (loaded)="fireAds()"></page-router-outlet>
        <Frame row="1" id="admobFrame" defaultPage="admobPlaceholder"></Frame>
    </GridLayout>
</Page>

this Frame entity can ruin your iOS layout. Verify!
Also, you can create platform-specific page, for example create a copy of app.component.html and name it app.component.android.html. This way android-based phones will have it's custom view.

defaultPage param is mandatory, you can find more info about it here: https://docs.nativescript.org/ui/ns-ui-widgets/frame#default-page
In my case both, admobPlaceholder.xml page and app.component.html file are in the same directory, so path contains only file name

next, you need to create xml page pointed by defaultPage param:

<Page xmlns="http://www.nativescript.org/tns.xsd" actionBarHidden="true" >
    <StackLayout verticalAlignment="center" horizontalAlignment="center" orientation="horizontal">
        <Label text="Place your text here"></Label>
    </StackLayout>
</Page>

Now you can easily switch between pages, and banner will remain where it should :)

I hope it will help!

from nativescript-admob.