この記事は 2024 年 2 月時点の記録です（2026 年 7 月 追記）
React Native で AdMob バナー広告を実装するという流れ自体は、今も変わりません。ただし本文のコードをそのままコピーすると、現在は非推奨となった API を使うことになり、場合によっては広告収益が下がります。変わった点を 6 つに整理します。
1. ライブラリのバージョン
執筆時点から
react-native-google-mobile-adsは大きく進んでいます（2026 年 7 月時点の最新は 16.4.0）。v16 系では対応する React Native の下限などに破壊的変更が入っています。導入手順の骨格自体は変わっていませんが、実装前に公式ドキュメントの最新版をご確認ください。2. iOS の static frameworks 設定は「必須」ではありません
本文では Podfile に
use_frameworks! :linkage => :staticと 2 つの変数を追加する手順を必須のように書いていますが、現在の公式ドキュメントでは任意の設定という位置づけです。react-native-firebasev15 以降と併用する場合など、static frameworks が必要な構成のときだけ行います。その場合もこのライブラリに必要なのは$RNGoogleMobileAdsAsStaticFramework = trueです。Expo ではexpo-build-propertiesのuseFrameworks: "static"を使います。3. 年齢向けの設定が非推奨になりました（最重要）
本文の
setRequestConfigurationでは、次の 2 行を両方trueにしています。tagForChildDirectedTreatment: true, tagForUnderAgeOfConsent: true,現在この 2 つは非推奨で、代わりに
ageRestrictedTreatment（年齢に応じた取り扱い設定）を使います。ライブラリの型定義にも@deprecatedと明記されています。指定できる値は型定義でご確認ください。さらに Google の公式ドキュメントでは、この 2 つを同時に true にしてはいけないとされています（同時に指定した場合は child-directed 側が優先されます）。
注意していただきたいのは収益面です。子ども向けではない一般のアプリでこの設定をそのままコピーすると、広告識別子の送信が止まり、パーソナライズ広告が配信されなくなります。広告は表示されるのに単価だけが下がるという、気づきにくい形で効いてきます。子ども向けアプリでない限り、この 2 行はコピーしないでください。
4. EEA・英国向けの同意取得（UMP）が本文に入っていません
2024 年 1 月 16 日以降、AdMob で欧州経済領域（EEA）および英国のユーザーに広告を配信するには、Google 認定の同意管理プラットフォーム（CMP）が必要です。対応していない場合、その地域のトラフィックには制限付き広告しか配信されません。ライブラリには
AdsConsentというヘルパーが用意されています。同意の取得は SDK を初期化する前に行う必要があります。初期化の時点で広告のプリロードが始まるためです。
5. ATT（App Tracking Transparency）の呼び出し順序
本文では ATT の要求と SDK の初期化を別々の
useEffectで並行に走らせています。現在の公式ドキュメントでは、次の順序が示されています。
- まず現在の許可状態を取得する
- 未確定（UNDETERMINED）のときだけ要求を出す
- それが終わってから
initialize()を呼ぶまた ATT の要求は、上記 4 の UMP 同意フローの一部として組み込むことが推奨されています。
6. SKAdNetwork の ID 一覧は随時変わります
本文に貼っている ID の一覧は当時のものです。公式ドキュメントにも、これらの識別子は変更されるため定期的に更新するようにと記載があります。実装時は必ず最新の一覧を参照してください。
参考: SDK 自体が移行期に入っています
Google Mobile Ads SDK は現在メンテナンスモードとされ、公式ドキュメントでは GMA Next-Gen SDK への移行が案内されています。React Native から利用する場合、すぐに何かをする必要はありませんが、中長期的には影響する話です。
※ 上記は 2026 年 7 月時点の公式ドキュメント（invertase・Google）に基づく整理であり、当方の環境での再検証は行っていません。実装時は必ず公式ドキュメントで最新をご確認ください。
ユーザーに広告を表示するためAdMob モジュールを使用します。すべての広告は Google AdMob ネットワーク経由で配信されるため、Google AdMob アカウントが必要になります。
開発環境(Expo Bare)
- “typescript”: “^5.2.2”
- “expo”: “~49.0.13”,
- “react”: “18.2.0”,
- “react-native”: “0.72.6”,
- “expo-router”: “^2.0.0”,
- “react-native-paper”: “^5.10.6”,
- “react-native-google-mobile-ads”: “^12.3.0”,
セットアップ
React Native Google Mobile Ads
パッケージをインストールする
$ yarn add react-native-google-mobile-ads
iOS static frameworksを設定する
// ios/Podfile を編集する ... target 'myproject' do use_expo_modules! config = use_native_modules! // <--- ⬇︎を追加 ---> // use_frameworks! :linkage => :static $RNFirebaseAsStaticFramework = true $RNGoogleMobileAdsAsStaticFramework = true // <--- ⬆︎を追加 ---> // ...
Google AdMob
自身の Google AdMob account でログインしてiOS/Androidアプリを追加する
🥕 Google AdMob > アプリ > アプリを追加
🥕 Google AdMob > iOS or Android アプリを選択 > アプリの設定 > アプリの情報 からアプリ ID を確認し、app.json フィアルに追加します。
// <project-root>/app.json
{
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
}
}
プロジェクトをリビルドする
# For iOS npx pod-install npx react-native run-ios # For Android npx react-native run-android
Outbound requestsを設定する
// app/_layout.tsx
import mobileAds, { MaxAdContentRating } from 'react-native-google-mobile-ads';
export default function RootLayout() {
const [requestedAds, setRequestedAds] = useState<boolean>(false);
...
useEffect(() => {
mobileAds()
.setRequestConfiguration({
maxAdContentRating: MaxAdContentRating.PG,
tagForChildDirectedTreatment: true,
tagForUnderAgeOfConsent: true,
testDeviceIdentifiers: ['EMULATOR'],
})
.then(() => {
console.log('🚀AdMob: Request config successfully set!:');
setRequestedAds(true);
});
}, []);
Google Mobile Ads SDKを初期化する
// app/_layout.tsx
。。。
useEffect(() => {
if (requestedAds) {
mobileAds()
.initialize()
.then(_adapterStatuses => {
console.log('🚀AdMob: Initialization complete!:');
});
}
}, [requestedAds]);
。。。
App Tracking Transparency (iOS)を設定する
Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。 プロジェクトの app.json または app.config.js ファイル内で、 user_tracking_usage_description を使用して使用方法を説明する必要があります。
{
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
}
}
// app/_layout.tsx
。。。
useEffect(() => {
(async () => {
const {status} = await requestTrackingPermissionsAsync();
if (status === PermissionStatus.GRANTED) {
console.log(
'🚀AdMob: User permission to track data is',
PermissionStatus.GRANTED,
);
}
})();
}, []);
。。。
※ 詳細
SKAdNetworkを活性化する(iOS)
Google Mobile Ads SDK は、Apple の SKAdNetwork を使用したコンバージョン トラッキングをサポートしています。これにより、Google および参加するサードパーティ購入者は、IDFA が利用できない場合でもアプリのインストールを関連付けることができます。 プロジェクトの app.json ファイル内に、推奨される SKAdNetwork 識別子 を追加します。
// <project-root>/app.json
{
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"sk_ad_network_items": [
"cstr6suwn9.skadnetwork",
"4fzdc2evr5.skadnetwork",
"4pfyvq9l8r.skadnetwork",
"2fnua5tdw4.skadnetwork",
"ydx93a7ass.skadnetwork",
"5a6flpkh64.skadnetwork",
"p78axxw29g.skadnetwork",
"v72qych5uu.skadnetwork",
"ludvb6z3bs.skadnetwork",
"cp8zw746q7.skadnetwork",
"3sh42y64q3.skadnetwork",
"c6k4g5qg8m.skadnetwork",
"s39g8k73mm.skadnetwork",
"3qy4746246.skadnetwork",
"f38h382jlk.skadnetwork",
"hs6bdukanm.skadnetwork",
"v4nxqhlyqp.skadnetwork",
"wzmmz9fp6w.skadnetwork",
"yclnxrl5pm.skadnetwork",
"t38b2kh725.skadnetwork",
"7ug5zh24hu.skadnetwork",
"gta9lk7p23.skadnetwork",
"vutu7akeur.skadnetwork",
"y5ghdn5j9k.skadnetwork",
"n6fk4nfna4.skadnetwork",
"v9wttpbfk9.skadnetwork",
"n38lu8286q.skadnetwork",
"47vhws6wlr.skadnetwork",
"kbd757ywx3.skadnetwork",
"9t245vhmpl.skadnetwork",
"eh6m2bh4zr.skadnetwork",
"a2p9lx4jpn.skadnetwork",
"22mmun2rn5.skadnetwork",
"4468km3ulz.skadnetwork",
"2u9pt9hc89.skadnetwork",
"8s468mfl3y.skadnetwork",
"klf5c3l5u5.skadnetwork",
"ppxm28t8ap.skadnetwork",
"ecpz2srf59.skadnetwork",
"uw77j35x4d.skadnetwork",
"pwa73g5rt2.skadnetwork",
"mlmmfzh3r3.skadnetwork",
"578prtvx9j.skadnetwork",
"4dzt52r2t5.skadnetwork",
"e5fvkxwrpn.skadnetwork",
"8c4e2ghe7u.skadnetwork",
"zq492l623r.skadnetwork",
"3rd42ekr43.skadnetwork",
"3qcr597p9d.skadnetwork"
]
}
}
広告を表示する
バナー広告は、既存のアプリケーション内に統合できる部分的な広告です。 インタースティシャル広告やリワード広告とは異なり、バナーはアプリケーションの限られた領域のみを占有し、その領域内に広告を表示します。 これにより、中断を伴う操作を行わずに広告を統合できます。
このモジュールは BannerAd コンポーネントを公開します。 バナーを表示するには、unitId と size プロパティが必要です。
🥕 adUnitId は Google AdMob > iOS or Androidアプリを選択 > 広告ユニット > 広告ユニットを追加 で追加したバナー広告ユニットの 広告ユニット ID です。
// app/(tabs)/index.tsx
import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.ADAPTIVE_BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
function App() {
return (
<BannerAd
unitId={adUnitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
/>
);
}
バナー広告の実装ガイドラインを守る
🔥 バナー広告の実装ガイドライン（英語版）の各項目ごとに Click to view an example テキストをクリックすると推奨方法を図で確認できます！
- ① インタラクティブ要素から広告を分離する！
- ② 広告はアプリのコンテンツから境界線で区切られるように！
- ③ バナー広告に固定スペースを割り当てる！
- ④ 複数のデバイスの画面サイズに対応するアダプティブ バナーを実装する！
Android (Tabbar/No-Tabbar): ①と③を適用！
iOS (Tabbar/No-Tabbar): ①と③を適用！
リリースする
※上記の詳細は以下のアプリに実装されています。
この機能を実装したアプリ
この記事のバナー広告の実装は、下記の 2 つのアプリで実際に稼働しています。動作は各ストアからご確認いただけます。
Kotango（ハングル単語）
Hajimari（自分だけのハジマリを記録するアプリ）
コメント