nativescript-admob
nativescript-admob copied to clipboard
Banner appears with testing = true but not in production
Hi all,
In debug mode, the banner appears fine on the screen. When i set the "testing" boolean to false, the banner don't appear anymore. Sometimes if i tap the banner area frantically, it may appear...
I tried the demo code and it works just fine.
I really can't figure why it doesn't work while not in testing mode.
My component code: Home.component.ts:
import { Component, OnInit, NgZone, AfterViewInit } from "@angular/core";
import * as dialogs from "tns-core-modules/ui/dialogs";
import { Trip } from "../shared/trip";
import { Folder, File, path } from "tns-core-modules/file-system";
import * as Toast from "nativescript-toast";
import * as Admob from "nativescript-admob";
import { isIOS } from "tns-core-modules/platform";
declare var android: any;
var Sqlite = require("nativescript-sqlite");
@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ["home.component.scss"]
})
export class HomeComponent implements OnInit, AfterViewInit {
private testing: boolean = false;
private androidBannerId: string = "ca-app-pub-4388645964603052/7349200111";
private iosBannerId: string = "ca-app-pub-4388645964603052/5489054038";
private BannerIdTest: string = "ca-app-pub-3940256099942544/6300978111";
private database: any;
public trips: Array<Trip>;
public isOnTrip: boolean = false;
private startDate: Date;
private stopDate: Date;
constructor(private _ngZone: NgZone) {
}
ngOnInit(): void {
this.databaseFetch();
}
ngAfterViewInit(): void {
// console.log("ngAfterViewInit");
setTimeout(() => {
this.createBanner();
}, 1500);
}
...
public createBanner() {
Admob.createBanner(
{
testing: this.testing,
size: Admob.AD_SIZE.SMART_BANNER,
androidBannerId: this.testing
? this.BannerIdTest // global test banner id
: this.androidBannerId, // our registered banner id
// Android automatically adds the connected device as test device with testing:true, iOS does not
iosBannerId: this.iosBannerId,
// iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
margins: {
bottom: isIOS ? 50 : 0
},
keywords: ["travel", "time"]
}).then(function () {
// console.log("admob createBanner done");
}, function (error) {
// console.log("admob createBanner error: " + error);
});
}
}
home.component.html:
<ActionBar title="My app">
<ActionItem text="Export" ios.position="right" (tap)="onExportTap()"></ActionItem>
</ActionBar>
<StackLayout orientation="vertical" class="page">
<GridLayout columns="*, *" class="btn-container">
<Button text="Start" col="0" (tap)="onStartTap()" class="btn" isEnabled="{{ !isOnTrip }}"></Button>
<Button text="Stop" col="1" (tap)="onStopTap()" class="btn" isEnabled="{{ isOnTrip }}"></Button>
</GridLayout>
<GridLayout columns="2*, 2*, *" class="header">
<Label text="Start date" col="0" textWrap="true"></Label>
<Label text="Stop date" col="1" textWrap="true"></Label>
<Label text="Duration" col="2" textWrap="true"></Label>
</GridLayout>
<StackLayout>
<ListView [items]="trips" class="list list-group">
<ng-template let-trip="item" let-i="index">
<GridLayout columns="2*, 2*, *" class="list-group-item" (longPress)="onLongPress(i)">
<Label text="{{ trip.startDate | date: 'yy/MM/dd HH:mm:ss' }}" col="0" textWrap="true"></Label>
<Label text="{{ trip.stopDate | date: 'yy/MM/dd HH:mm:ss' }}" col="1" textWrap="true"></Label>
<Label text="{{ trip.tripTime }}" col="2" textWrap="true"></Label>
</GridLayout>
</ng-template>
</ListView>
</StackLayout>
</StackLayout>
home.component.scss:
$btn-radius: 20;
$btn-margin: 10px;
$red: #ff0000;
.page {
height: 100%;
}
.btn-container {
margin: 1%;
height: 10%;
}
.header {
height: 5%;
color: black;
text-align: center;
}
.list {
height: 100%;
text-align: center;
}
.btn {
background-color: #56a7c7;
border-radius: $btn-radius $btn-radius $btn-radius $btn-radius;
color: black;
margin: $btn-margin $btn-margin $btn-margin $btn-margin;
&:active {
background-color: #36697e;
}
&:disabled {
background-color: gray;
}
}
Any idea?
Regards,
Tristan
Is it possible you might have a race condition here? Perhaps using the (loaded)="onDOMLoad($event)"
could save you from needing the setTimeout
?
setTimeout(() => { this.createBanner(); }, 1500);
@TriVeDev did you solve it? I have the same issue