Google AdMobでバナー広告を設定する方法〜expo-bare〜

React Native Firebase のパッケージから独立された react-native-google-mobile-ads を使います。

パッケージをインストールする
iOS 静的フレームワークを構成する
Google AdMob コンソールでアプリを追加する
ビルトする
アウトバウンドリクエストを構成する
SKAdNetwork でコンバージョンを追跡できるようにする (iOS)
アプリ追跡の透明性 (iOS)を設定する
テスト広告でテストする
バナー別のサイズ・見え方
設定をまとめる
1. 初期ファイル：app/_layout.tsx
2. タブ初期ファイル：app/(tabs)/index.tsx

パッケージをインストールする

開発環境は既に @react-native-firebase/app: 18.5.0 バージョンが設定されていることを前提とします。(詳細)

try🐶everything myproject$ yarn add react-native-google-mobile-ads
...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ react-native-google-mobile-ads@12.3.0
info All dependencies
├─ @iabtcf/core@1.5.6
├─ dequal@2.0.3
├─ react-native-google-mobile-ads@12.3.0
└─ use-deep-compare-effect@1.8.1
✨  Done in 4.43s.
try🐶everything myproject$

iOS 静的フレームワークを構成する

react-native-firebase v15+ 以降と組み合わせて使用する場合は、use_frameworks! 設定が必要になります。( 詳細 )

use_frameworks! :linkage => :static と $RNGoogleMobileAdsAsStaticFramework = true を ios/Podfile に追加します。(⬇︎)

Google AdMob コンソールでアプリを追加する

Google AdMob のアカウント& Andoid / iOS アプリを作成後 app.json に アプリ ID を追加します。( android_app_id & ios_app_id )

アプリ ID の取得方法は⬇︎の通りです。

google-mobile-ads-02 — Google Admob > アプリ > アプリを選択 >

google-mobile-ads-03 — アプリの設定 > アプリIDのコピーアイコンをクリック

※ app.json に有効な アプリ ID を指定せずにアプリをビルドしようとすると、アプリが起動時にクラッシュするか、ビルドに失敗することがあるので注意が必要です！

⬆︎でコピーした各 アプリID を下記のように app.json に追加します。

// myapp/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

アウトバウンドリクエストを構成する

import mobileAds, { MaxAdContentRating } from 'react-native-google-mobile-ads';

mobileAds()
  .setRequestConfiguration({
    // Update all future requests suitable for parental guidance
    maxAdContentRating: MaxAdContentRating.PG,

    // Indicates that you want your content treated as child-directed for purposes of COPPA.
    tagForChildDirectedTreatment: true,

    // Indicates that you want the ad request to be handled in a
    // manner suitable for users under the age of consent.
    tagForUnderAgeOfConsent: true,

    // An array of test device IDs to allow.
    testDeviceIdentifiers: ['EMULATOR'],
  })
  .then(() => {
    // Request config successfully set!
  });

SKAdNetwork でコンバージョンを追跡できるようにする (iOS)

Google Mobile Ads SDK は、Apple の SKAdNetwork を使用したコンバージョントラッキングをサポートしています。これにより、Google および参加するサードパーティ購入者は、IDFA が利用できない場合でもアプリのインストールを関連付けることができます。プロジェクトの app.json ファイル内に、推奨される SKAdNetwork 識別子を追加します。

{
  "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",
      "c6k4g5qg8m.skadnetwork",
      "s39g8k73mm.skadnetwork",
      "3qy4746246.skadnetwork",
      "3sh42y64q3.skadnetwork",
      "f38h382jlk.skadnetwork",
      "hs6bdukanm.skadnetwork",
      "v4nxqhlyqp.skadnetwork",
      "wzmmz9fp6w.skadnetwork",
      "yclnxrl5pm.skadnetwork",
      "t38b2kh725.skadnetwork",
      "7ug5zh24hu.skadnetwork",
      "9rd848q2bz.skadnetwork",
      "y5ghdn5j9k.skadnetwork",
      "n6fk4nfna4.skadnetwork",
      "v9wttpbfk9.skadnetwork",
      "n38lu8286q.skadnetwork",
      "47vhws6wlr.skadnetwork",
      "kbd757ywx3.skadnetwork",
      "9t245vhmpl.skadnetwork",
      "a2p9lx4jpn.skadnetwork",
      "22mmun2rn5.skadnetwork",
      "4468km3ulz.skadnetwork",
      "2u9pt9hc89.skadnetwork",
      "8s468mfl3y.skadnetwork",
      "av6w8kgt66.skadnetwork",
      "klf5c3l5u5.skadnetwork",
      "ppxm28t8ap.skadnetwork",
      "424m5254lk.skadnetwork",
      "ecpz2srf59.skadnetwork",
      "uw77j35x4d.skadnetwork",
      "mlmmfzh3r3.skadnetwork",
      "578prtvx9j.skadnetwork",
      "4dzt52r2t5.skadnetwork",
      "gta9lk7p23.skadnetwork",
      "e5fvkxwrpn.skadnetwork",
      "8c4e2ghe7u.skadnetwork",
      "zq492l623r.skadnetwork",
      "3rd42ekr43.skadnetwork",
      "3qcr597p9d.skadnetwork"
    ]
  }
}

アプリ追跡の透明性 (iOS)を設定する

Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。プロジェクトの app.json ファイル内で、 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 Tracking Transparency 認証をリクエストするため、expo-tracking-transparency ライブラリを使用します。

インストールし再ビルドします。

try🐶everything myproject$ yarn add expo-tracking-transparency
try🐶everything myproject$ npx pod-install
try🐶everything myproject$ yarn ios && yarn android

(選択) 念の為、NSUserTrackingUsageDescription キーを Info.plist にも追加しておきます。

// ios/myapp/Info.plist

   ...
    <key>NSUserTrackingUsageDescription</key>
      <string>This identifier will be used to deliver personalized ads to you.</string>
  </dict>
</plist>

以下のような使い方ができます。

...
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

export default function App() {
  useEffect(() => {
    (async () => {
      const { status } = await requestTrackingPermissionsAsync();
      if (status === 'granted') {
        console.log('Yay! I have user permission to track data');
      }
    })();
  }, []);
...

再ビルド後、アプリが起動するとユーザの同意を求めるダイアログが表示されれば OK です。 (⬇︎)

iPhone側で該当内容を確認する方法は、

設定 > プライバシーとセキュリティ > トラッキング で アプリからのトラッキング要求を許可 を総括 ON/OFF 管理できます。下の方ではアプリことにもON/OFFできますね。

次は実際に広告を表示させましょう。

テスト広告でテストする

AdMob を使用してアプリを開発するときは、Google AdMob アカウントの本番広告ではなくテスト広告を使用するようにしてください。そうしないと、アカウントが無効になる可能性があります。

広告を作成するときに、テスト中に使用される「広告ユニット ID」を テスト ID に設定できます。( TestIds )

以下のような書き方で設定します。

import { BannerAd, TestIds } from 'react-native-google-mobile-ads';
...
<BannerAd unitId={TestIds.BANNER} size={BannerAdSize.BANNER} />

バナー別のサイズ・見え方

アダプティブバナーは最新のバナー広告で、優れたユーザーエクスペリエンスを提供できます。今後、スマートバナーと標準バナーはこれに置き換えられる予定です。

なお、スマートバナーはサポートが終了します。
https://support.google.com/admanager/answer/10017110?sjid=594813323851808854-AP

BANNER：
Mobile Marketing Association (MMA) のバナー広告サイズ (320×50 密度に依存しないピクセル)
FULL_BANNER：
Interactive Advertising Bureau (IAB) のフルバナー広告サイズ (468×60 密度に依存しないピクセル)
LARGE_BANNER：
大きなバナー広告サイズ (320×100 密度に依存しないピクセル)
LEADERBOARD：
Interactive Advertising Bureau (IAB) リーダーボードの広告サイズ (728×90 密度に依存しないピクセル)
MEDIUM_RECTANGLE：
Interactive Advertising Bureau (IAB) 中長方形広告サイズ (300×250 密度に依存しないピクセル)
ANCHORED_ADAPTIVE_BANNER：
全幅および自動高さの動的サイズの (次世代) バナー
INLINE_ADAPTIVE_BANNER：
アンカーアダプティブバナーと比較して、大きくて背の高いバナーです。高さは可変で、デバイスの画面と同じ高さになる場合もあります。これらは、スクロールするコンテンツに配置することを目的としています。
WIDE_SKYSCRAPER：
IAB ワイド超高層ビル広告サイズ (160×600 密度に依存しないピクセル)。このサイズは現在、Google モバイル広告ネットワークではサポートされていません。これはメディエーション広告ネットワークのみを対象としています。

google-mobile-ads-09-banner — **BANNER**

google-mobile-ads-10-full — **FULL_BANNER**

google-mobile-ads-12-large — **LARGE_BANNER**

google-mobile-ads-13-medium — **MEDIUM_RECTANGLE**

google-mobile-ads-11-aab — **ANCHORED_ADAPTIVE_BANNER**

google-mobile-ads-08-iab — **INLINE_ADAPTIVE_BANNER**

google-mobile-ads-14-wide-sky — **WIDE_SKYSCRAPER**

※ LEADERBOARD：iOS 非表示、Android ランダム表示される

設定をまとめる

初期ファイル：app/_layout.tsx

①
mobileAds().setRequestConfiguration()

アウトバウンドリクエストを構成する
②
requestTrackingPermissionsAsync()

アプリ追跡の透明性 (iOS)を設定する
③
mobileAds().initialize()

Google Mobile Ads SDK を初期化する

タブ初期ファイル：app/(tabs)/index.tsx

タイムラインのタイトル

①

adUnitId 設定

const adUnitId = __DEV__
? TestIds.BANNER
: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

②

ダイナミックバナー広告サイズを適用

高さ ( h ) が固定されていて 50 〜 60 の広告だけを利用したいので、画面の Width によって BANNER か FULL_BANNER に分岐処理します。

  const [bannerSize, setBannerSize] = React.useState(BannerAdSize.BANNER);
  React.useEffect(() => {
    if (layout.width < 468) {
      setBannerSize(BannerAdSize.BANNER);
    } else setBannerSize(BannerAdSize.FULL_BANNER);
  }, []);

③

広告を一番上にレンダリングする

React Native Paper の <Portal/> コンポーネントを利用します。

... 
      <Portal>
        <View style={styles.ad}>
          <BannerAd
            unitId={adUnitId}
            size={bannerSize}
            requestOptions={{requestNonPersonalizedAdsOnly: true}}
            onAdLoaded={() => {
              console.log('Advert loaded');
            }}
            onAdFailedToLoad={error => {
              console.error('Advert failed to load: ', error);
            }}
          />
        </View>
      </Portal>
...