EAS EXPOで expo-ads-admob から react-native-google-mobile-ads に切り替える方法と注意点
もくじ
expo-ads-admobが使用できなくなり困っていませんか？
EXPOでアプリを開発している皆様、EXPO SDK46 にアップデートしてからexpo-ads-admobがサポートされなくなり広告が表示できず困っていませんか？
私は超困りました！
Githubでは公式から"react-native-google-mobile-ads"に切り替えるようにお達しが出てますが、エラーが発生しやすいと思います。
この記事では私がiOS版でどのようにして解決したのか紹介したいと思います。
Error: Compatible versions of some pods could not be resolved.
ってなんじゃーー？
'RNGoogleMobileAdsModule' could not be found.
ってなんじゃーー？
この記事でわかること
- Error: Compatible versions of some pods could not be resolved.のエラーに対処できる。
- 'RNGoogleMobileAdsModule' could not be found. のエラーに対処できる。
- react-native-google-mobile-adsライブラリで広告を表示できる
切り替え手順
react-native-google-mobile-ads をインストールする
公式HPの通りにインストールしていきます。
公式ではyarnで紹介されていますが、私はnpmでパッケージ管理を行っていいたのでnpmを使用しました。
npm install react-native-google-mobile-adsyarn add react-native-google-mobile-adsapp.jsonを編集する
下記の情報をapp.jsonに追加しましょう。
"android_app_id"および"ios_app_id"の中身はGoogle admob の左側のメニューから
「アプリ」→該当のアプリを選択→「アプリの設定」ページにあるアプリIDをコピペしてください
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"delay_app_measurement_init": true,
"user_tracking_usage_description": "許可することで、より関連性の高い広告を表示することができるようになります。"
}ただし、追加する階層に注意が必要です！
"expo"の中ではなく、必ず同じ階層に追加してください！
{
"expo": {
"name": "",
"slug": "",
"version": "",
"orientation": "",
"icon": "",
"userInterfaceStyle": "",
"splash": {
"image": "",
"resizeMode": "",
"backgroundColor": ""
},
},
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"delay_app_measurement_init": true,
"user_tracking_usage_description": "許可することで、より関連性の高い広告を表示することができるようになります。"
}
}
シミュレーターに開発用アプリをインストールする。
EXPOでEASを使用している場合は必ずEXPO公式HPで紹介されている、開発用ビルドを行う必要があります。
eas.jsonを編集する
詳しくはわかりませんが最低限の構成だそうです。
下記をeas.jsonに追加しましょう。
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
}
}
iOSシミュレータにビルドを作成する
ここでは私が行ったiOS版のみ紹介します。Androidエミュレーターや実際のデバイスにインストールしたい場合は公式HPをご確認ください。
再びeas.jsonに"development-simulator"以下を追加します。
手前で追加した"development"とは異なりますので注意してください。
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"resourceClass": "m1-medium"
}
},
"preview": {
"distribution": "internal",
"ios": {
"resourceClass": "m1-medium",
"simulator": true
}
},
"production": {
"ios": {
"resourceClass": "m1-medium"
}
},
//--------ココから--------
"development-simulator": {
"extends":"development",
"developmentClient": true,
"distribution": "internal",
"ios": {
"simulator": true
}
}
//--------ココまでを追加--------
},
}上記追加できたら次のコマンドを実行しましょう！
eas build --profile development-simulator --platform iosしかし、上記コマンドを実行すると下記のようなErrorでるかもしれません
Error: Compatible versions of some pods could not be resolvedその場合は↓を参考にしてください！
開発サーバーを立ち上げる
必ず下記のコマンドで開発サーバーを立ち上げて、インストールした開発用アプリで起動できるようにしましょう。最後の"--dev-client"をつけるのを忘れないようにしてください。
npx expo start --dev-client仮に"npx expo start"で開発サーバーを立ち上げてしまうと、インストールした開発用アプリではなくEXPOアプリで起動してしまいERRORが発生します。
react-native-google-mobile-adsで広告を表示する
いろいろなやり方があると思いますが一例を紹介します。
ユニットIDの"ca-app-pub-xxxxxxxx/xxxxxxxx"の部分はGoogle admob の左側のメニューから
「アプリ」→該当のアプリを選択→「広告ユニット」からバナーの広告ユニットを追加し"広告ユニットID"をコピペしてください
import React, { useEffect, useState } from "react";
import mobileAds ,{
BannerAd,
BannerAdSize,
TestIds,
}from "react-native-google-mobile-ads";
// 初期化
mobileAds()
.initialize()
.then((adapterStatuses) => {});
// ユニットID
const adBannerUnitId = __DEV__
? TestIds.BANNER
: "ca-app-pub-xxxxxxxx/xxxxxxxx";
// リワード広告のキーワードを設定
const rewarded = RewardedAd.createForAdRequest(adRewardedUnitId, {
requestNonPersonalizedAdsOnly: true,
keywords: ["game"],
});
export function AdmobFullBanner() {
return (
<BannerAd
unitId={adBannerUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
);
}あとはコンポーネントを呼び出すだけ！
import React from "react";
import { AdmobFullBanner } from "../Admob";
export default function App() {
return (
//...
<AdmobFullBanner />
);
}
最後に
いかがだったでしょうか？
今回はexpo-ads-admobからreact-native-google-mobile-adsに切り替え作業に置いて私が遭遇したエラーを２つ紹介し広告の表示まで行いました。
エラー対処については別の記事にてまとめていますので同じエラーで悩んでいる場合は参考にしていただければ幸いです。
