App Tracking TransparencyExpo bareExpo RouterFirebaseGoogle AdMob

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

google-mobile-ads-01 App Tracking Transparency
2023.10.11
スポンサーリンク

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

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

開発環境は既に @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-mobile-ads-01

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 です。 (⬇︎)

google-mobile-ads-04

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

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

google-mobile-ads-05
google-mobile-ads-06

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

テスト広告でテストする

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>
...

スポンサーリンク

おまけ：本番広告ユニットを追加する

アプリに広告を表示させるには Google AdMob コンソールで 広告ユニット をアプリことに追加しておく必要があります。

Google AdMob コンソールでアプリを追加する 手順を参考に アプリの設定 の２番目上の 広告ユニット メニューをクリックして各自適宜追加してください。

以下は バナー 広告ユニット を追加した時の例です。

広告ユニット名は任意でこの広告ユニットを指す固有の名前です。

google-mobile-ads-07

追加すると 広告ユニットID が自動生成されます。
この広告ユニットに割り当てられた一意の ID です。この ID を使用して、広告ユニットをアプリに実装できます。iOSも同じく行ってください。

参考文献

invertase/react-native-google-mobile-ads
zapp.run
Overview of banner ads - Google Ad Manager Help
Banner ad units display rectangular ads that occupy a portion of an app's layout. They stay on screen while users are in...
support.google.com
バナー広告  |  Mobile Ads SDK for Android  |  Google for Developers
developers.google.com

コメント

タイトルとURLをコピーしました