monacaでcordova-admob-proのリワード動画広告を導入する際に躓いたこと

monacaでcordova-admob-proのリワード動画広告について。 github.com monacaでcordova-admob-proのリワード動画広告を表示したくて、以下のように自動再生モードで実装したところ動かなかった。

var admobid = {
  rewardVideo:'ca-app-pub-xxx'
};

if(AdMob){
  AdMob.prepareRewardVideoAd({
    adId:admobid.rewardVideo,
    autoShow:true
  });
}

次に、prepareRewardVideoAdメソッドのコールバックを使ってさらに下のように組んでみたけどダメだった。

var admobid = {
  rewardVideo:'ca-app-pub-xxx'
};

if(AdMob){
  AdMob.prepareRewardVideoAd({
    adId:admobid.rewardVideo,
    autoShow:false,
  },function(){
    AdMob.showRewardVideoAd();
  },function(){

  });
}

調査してみるとリワード動画広告をロードするまでに時間がかかるっぽく、上のやり方だとうまくいかないようだ。

というわけで、さらに、リワード動画広告がロードされたかどうかを確認して再生するように下のように修正してみた。

var admobid = {
  rewardVideo:'ca-app-pub-xxx'
};

document.addEventListener('onAdLoaded', function(data){
  if(data.adType === 'rewardvideo'){
    AdMob.showRewardVideoAd();
  }
});

if(AdMob){
  AdMob.prepareRewardVideoAd({
    adId:admobid.rewardVideo,
    autoShow:false,
  },function(){

  },function(){

  });
}

これでリワード動画広告を表示させることができました。

さらに突き詰めるとコールバックは特に必要ないので、

var admobid = {
  rewardVideo:'ca-app-pub-xxx'
};

document.addEventListener('onAdLoaded', function(data){
  if(data.adType === 'rewardvideo'){
    AdMob.showRewardVideoAd();
  }
});

if(AdMob){
  AdMob.prepareRewardVideoAd({
    adId:admobid.rewardVideo,
    autoShow:false
  });
}

と書くことができます。

ここら辺は、 1.1 API Overview や READMEにも記載がなくサンプルコードから解読するしかないので、実装するまでに時間がかかりました。