react native + AdMob

Smartphone Ads iPhone・Androidアプリへの広告の実装と管理テクニック | カイト株式会社, 嶋田 智成, 石野 洋一朗 |本 | 通販 | Amazon

react nativeはまだ登場して日が浅いしバージョンも安定して居ないためか、アプリ広告を表示する仕組みの選択肢が少ないです。現状、AdMobとFacebookAdsのどちらかを選ぶのが無難なようです。両方ともgithubにコンポーネントがあるので、それを導入すれば比較的簡単に広告を表示させることができる。。。はず。

A react-native component for Google AdMob banners
https://github.com/sbugert/react-native-admob
Facebook Audience SDK integration for React Native
https://github.com/callstack-io/react-native-fbads

で、今現在Adsenseを使っている関係上、AdMobから試してみるのが良いかと思って導入を試みたのですが、いくつかハマりどころがあったのでメモしておきます。

$ npm install react-native-admob –save
$ react-native link

ここまでは問題なし。次に、FirebaseとAdMobをCocoaPodsでインストールします。

$ pod init
$ vi Podfile

source ‘https://github.com/CocoaPods/Specs.git’

platform :ios, ‘7.0’

target ‘your-project’ do
pod ‘Firebase/Core’
pod ‘Firebase/AdMob’
end

pod install

で、この次でハマりました。GoogleのFirebase+AdMob導入ドキュメントにはちゃんと以下のように書かれていたのですが、

$ open your-project.xcworkspace

間違えて以下を開いていました。これ絶対間違えますよね。。。

$ open your-project.xcodeproj

拡張子xcodeprojの方を開いてビルドすると失敗します。具体的にはリンカが以下のエラーを出します。

clang: error: linker command failed with exit code 1 (use -v to see invocation)

これがどうやっても解決しなくて色々試行錯誤していました。Googleの導入ドキュメントのコマンドをすべてコピペでやったら成功しました。。。

なお、正しい方のプロジェクトを開いた後、リンカのオプションの設定も必要なのでお忘れなく。

Building Objective-C static libraries with categories
https://developer.apple.com/library/content/qa/qa1490/_index.html

で、無事にビルドできた後はbannerの表示テストしていたのですが、エミュレータでは表示できないみたいです。コードの書き方が悪いのかもとか、他のコンポーネントに隠れてしまって見えていないんじゃないかとか色々疑ってみたのですが、もしやと思って実機で動かしてみたらすぐ表示されました。もし実機でもバナーが表示されない場合は、原因の切り分けのためにテスト用adUnitIdを使うと良さそうです。Google先生が用意してくれています。

スタートガイド  |  AdMob by Google  |  Firebase
https://firebase.google.com/docs/admob/ios/quick-start?hl=ja
ca-app-pub-3940256099942544/2934735716

表示されない原因が、AdMobで作成した広告ユニットとかそっちにあるかもしれないので、とりあえずの動作確認はテスト用IDを使ってやるのがおすすめです。