In my code I have these functions:
const preloadRewardAd = function() {
console.log('preload reward ad');
firebase.admob.preloadRewardedVideoAd({
iosAdPlacementId: 'xxx',
androidAdPlacementId: 'yyy',
testing: config.adMobTesting,
iosTestDeviceIds: config.iosTestDeviceIds
}).then(
function() {
console.log('reward ad ready');
}
);
};
const showRewardAd = function(card: Card) {
console.log('show reward ad');
return firebase.admob.showRewardedVideoAd({
onRewarded: (reward) => {
console.log('onRewarded called with amount ' + reward.amount);
console.log('onRewarded called with type ' + reward.type);
card.fetch().then(() => {
card.notifyPropertyChange('id', card.id);
});
},
onOpened: () => console.log('onOpened'),
onClosed: () => {
preloadRewardAd();
console.log('onClosed');
},
onStarted: () => console.log('onStarted'),
onCompleted: () => console.log('onCompleted'),
onLeftApplication: () => console.log('onLeftApplication')
}).catch(err => {
console.log(err);
});
};
export function newCard(args: EventData) {
console.log('tap new card');
const pager = <Pager>page.getViewById('cards-carousel');
const card = <Card>pager.get('items').getItem(pager.selectedIndex);
showRewardAd(card);
}
I then call preLoadRewardAd() in page.loaded.
It works as expected on Android: when the user closes the ad it pre-loads the next one.
On ios it works normally on the first ad display. But on the second one onRewarded is never called, and even though onClosed gets called, it never pre-loads another ad, and the whole thing falls apart. onCompleted is also not called.
Here is the sequence of output from the console:
at this point I wait until the ad completes. Wait several more seconds to be sure. I close the ad. 10 & 11 may seem out of order but it's just the placement of my console.log calls.
Is there something I'm missing?
I found a workaround that is "good enough". In the onClosed event I wrapped the call to preloadRewardAd in a setTimeout after 250ms. This seems to give ios enough time to catch up.