React NativeとAdmobを使用して簡単に広告を表示する方法: 初期設定（パート1）

ReactNativeで一番簡単に広告を出すには、Admobがおすすめです。今日はAdmobを使って広告を出す方法を紹介していきます。

ちなみに、私が開発しているLangJournalでは下記のような下部バナーとアドリワードを出しています。

必要なパッケージのインストール
app.jsonの更新
Admobアカウントの作成
app.jsonを再度更新
初期化
iOSの許可をとる
テスト端末の登録

必要なパッケージのインストール

ターミナル

yarn add react-native-google-mobile-ads

app.jsonの更新

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  },
}

Admobアカウントの作成

ここからアカウントを作成し、iOS、AndroidのそれぞれのappIdを取得します。

app.jsonを再度更新

先ほど取得したappIdを貼り付けます。

app.json

{
  "expo": {
    // ...
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

初期化

初期化をします。これはアプリを立ち上げた時に一度だけ呼びましょう。

App.json

import mobileAds from 'react-native-google-mobile-ads';

const initAd = useCallback(async () => {
    try {
       // ここで初期化する
      await mobileAds().initialize();
    } catch (err) {
      console.warn('initAd', err);
    }
  }, []);

  // 初期データの取得
  useEffect(() => {
    initAd();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

iOSの許可をとる

iOSはトラッキングの許可を取る必要があります。

app.json

  "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": "関連性の高い広告を表示するためにIDをトラッキングいたします。"
}

expo-tracking-transparencyを使います。

ターミナル

expo install expo-tracking-transparency

App.jsonを追記します。

App.json

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

const initAd = useCallback(async () => {
    try {
      // ここに追加
      const { status } = await requestTrackingPermissionsAsync();
        if (status === 'granted') {
          console.log('Yay! I have user permission to track data');
       }

      await mobileAds().initialize();
    } catch (err) {
      console.warn('initAd', err);
    }
  }, []);