環境
- React Native:0.70.6
- pod: 1.11.3
- iOS:16.0
今回使うやつ
Google AdMobのアカウント作成
こんなもんに説明はいらねぇ
アカウント作ってアプリを追加。
広告ユニットも追加する。
インストール
_# Install the admob module
yarn add react-native-google-mobile-ads
僕はnpmでやりたいんだい!!
npmに上がってたのでnpmでやる(いいのかなぁ)
npm i react-native-google-mobile-ads
"react-native-google-mobile-ads": "^8.2.2",
勝ったな(確信)
ちまちま設定
app.json
"Nanyara": "Kanyara",
+ "react-native-google-mobile-ads": {
+ "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+ "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
+ }
"Kokowa": "Kankeinaiyo"
Google AdMob側で発行されたアプリIDを打ち込む。
#やれと書いてたので
npx pod-install
npx react-native run-ios
テスト広告を出す
import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
function App() {
return (
<BannerAd
unitId={adUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
);
}
こんなものが落ちてたのでアプリに突っ込んでみると
出てるジャーン(勝利確信)
※グレーのは目隠し(?)です
でも自分のunitIdに変えてみると出ない(泣)
onAdFailedToLoadでエラーが取れそうなので拾ってみると
Account not approved yet.
Google側のを読んでるとストアにリリースしないと出せないのかなって雰囲気があるので今はこのくらいでしょうか。
バナーのサイズ
size={BannerAdSize.FULL_BANNER}
のFULL_BANNER
はちょっと大きすぎるので大きさを変えたい。
なのでBannerAdSizeの中をのぞいてやると
{
"ADAPTIVE_BANNER": "ADAPTIVE_BANNER",
"ANCHORED_ADAPTIVE_BANNER": "ANCHORED_ADAPTIVE_BANNER",
"BANNER": "BANNER",
"FLUID": "FLUID",
"FULL_BANNER": "FULL_BANNER",
"INLINE_ADAPTIVE_BANNER": "INLINE_ADAPTIVE_BANNER",
"LARGE_BANNER": "LARGE_BANNER",
"LEADERBOARD": "LEADERBOARD",
"MEDIUM_RECTANGLE": "MEDIUM_RECTANGLE",
"WIDE_SKYSCRAPER": "WIDE_SKYSCRAPER"
}
こんな感じのが入ってた。
さっきのページにあったBannerAdSize(404になってる)はこれについて書いてあったのかな?
このへん?
わかんないねー。
一通り見て今回はBANNER
にしました。