Angular 2 Router Overlaps Ads

[prantikv]

Hey there eddy,
I am using TNS with ng2. I have the plugin working and showing ads on load. I have set up a repo here of my code.

Observation

Here is what I have encountered. In my app I have a <page-router-outlet> that uses the router configuration to show relevant pages.
The banner ad shows up when the app loads as I am calling the admob.createBanner in the constructor of the home page.

But as soon as I navigate to another page the ad is overlapped by the new page which was navigated to. Not only that going back to the page where ad was visible, the ad no longer shows up.

I see flashes of the banner ad when navigating between routes.

Seems like when the router is used It loads everything on top of the ad.

I have checked the above on Android 5.1 device and Android 4.4 emulator.

Let me know what is to be done here.

-Thanks

[EddyVerbruggen]

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.

[prantikv]

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. :)

[prantikv]

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.

[prantikv]

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

😄

[ignaciolarranaga]

+1

[ignaciolarranaga]

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();
            }
        });

[tscislo]

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

[louishfok]

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?

[mexyayo]

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

[ogrodowiczp]

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!