現在、モバイルアプリの開発に挑戦しています。
そこで、今回はExpoで開発中のアプリに広告を表示したいので「react-native-google-mobile-ads」パッケージを使ってGoogle Admobを搭載していきます。
react-native-google-mobile-adsのインストール
npm i react-native-google-mobile-ads
コード
・広告表示するコードをコンポーネントにする
import { Platform } from "react-native";
import {
BannerAd,
BannerAdSize,
TestIds,
} from "react-native-google-mobile-ads";
export default function MyAdmob(props) {
const adUnitID = Platform.select({
ios: "ca-app-pub-00000000000/00000000000000",
android: "ca-app-pub-00000000000/00000000000000",
});
const unitId = TestIds.BANNER
return (
<BannerAd
{...props}
unitId={adUnitID}
requestOptions={{ requestNonPersonalizedAdsOnly: true }}
/>
);
}
・表示したいところに上記のコンポーネントを置く
import {BannerAdSize,} from "react-native-google-mobile-ads";
import MyAdmob from "../../components/admob_banner";
<MyAdmob size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />
サイズは基本ANCHORED_ADAPTIVE_BANNERで良いと思う
テストの場合、TestIds.BANNERからインポートされる広告IDを使用したほうがいい。
Androidのビルド時にエラーが起きる
Execution failed for task ':react-native-google-mobile-ads:compileDebugKotlin' error
このエラーが出て色々調べると、Kotlinのバージョンを変えたら治るとかいろいろ書いてあるが、私の場合は、インストールしているreact-native-google-mobile-adsのバージョンを14.7.0に変更したら、問題なくビルドできるようになった。
npm i react-native-google-mobile-ads@14.7.0
ビルドできたが、Androidだけ広告が表示されない
PlayConsoleに出して審査が通ってから出ないとAndroidは表示されないらしい。