MENU

React Native×ExpoでAdMob広告を導入!初心者がハマった罠と回避法【2025年4月14日】

今日は、昨日に続いてクイズアプリのgoogle play出品についてあくせくしていました。

と、その前に、いつものMBL海外の反応ブログ更新1時間半、さらに発達障害のブログ記事も更新1時間30分くらいかかりました。
他の、雑学や占い動画などはストックがあるので放置。

今日もメインの作業は、expo+reactnative環境での作業です。

しかし、expo goでは、admobの広告表示テストの仕方が変わっており、chatgptの指示通り進めてもエラーが出てしまいました。
実は2022年から、やり方が変わっていたのです。

目次

expo+reactnative環境で、admobで広告の表示をテストするには

chatgptでは、expo-ads-admobをインストールして~~~と言われたけど、実際はそれは古いやり方(ハルシネーションを起こした)で、調べてみると、react-native-google-mobile-ads こちらを使うのが正しかったのです。

これね、expo-goの制限とGoogle Mobile Ads SDKのバージョンが絡んでいて、bare workflowじゃないと広告がうまく出ないって罠でした。expo-goでは一部ネイティブコードが使えないから、admobもろとも撃沈。

結局、以下の手順で回避することにしました:

【現在の作業フロー】

  1. react-native-google-mobile-adsをインストール
npx expo install react-native-google-mobile-ads
  1. bare workflow に eject
npx expo prebuild
  1. Google AdMobのテスト広告ユニットIDを使ってテスト
    (※ ca-app-pub-3940256099942544/1033173712 ←公式テストID)

テスト広告の実装ポイント

今回、インタースティシャル広告(全画面)をクイズ終了後に1回だけ表示する仕様にしました。

「4問だけのクイズで広告出すのは早いかな」と思ったけど、逆にその方がタイミングも自然だし、バナー広告のような常時表示よりも印象が良い。

ユーザーは広告を閉じることもできるし、強制クリックではないので、Googleのポリシー的にも問題なし。

ちなみに:広告のテストってAdMob未登録でもできるの?

これ、最初は半信半疑だったんですが、できます。
Googleが用意してくれている「テスト広告ユニットID」を使えば、AdMobに登録していなくても動作確認ができます。
超便利。初心者救済処置。

結果

  • クイズアプリにテスト広告が無事表示された
  • めっちゃ感動(とりあえず動いた)
  • そして疲労がすごい。IQ67,asdには理解が追いつかない

明日の予定(自分メモ)

  • AdMobに本登録して、本番ユニットIDを取得する
  • テスト広告IDを差し替える
  • クイズアプリのデザイン修正(やっぱUIが古い)
  • Google Play Console用のスクショ撮影
  • メタデータ準備

まとめ

スマホアプリ開発って、広告出すだけでも修行なんですね。
わかったような気になってたけど、調べて、試して、動かなくて、また調べて…の繰り返し。

でも、ひとつひとつ動いていくたびに、「あ、私って進んでるんだな」っていう謎の達成感はある。
明日も引き続きがんばります。疲れた。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次