【ReactNative・Expo】iOSアプリに、Google AdMob広告を入れる手順

React Native・Expoで作成したiOSアプリに、Google AdMobの広告を入れた。 expo-tracking-transparencyを導入して、トラッキングの許可のリクエストダイアログを実装する必要があるので、まとめて手順をメモしておく。

---

手順

1.Google Admobから、広告ユニットIDを設定し、コピーする。 https://support.google.com/admob/answer/7356431?hl=ja

2.expo-ads-admobとexpo-tracking-transparencyをインストールする。

expo install expo-ads-admob
expo install expo-tracking-transparency

3.app.jsonに以下を追記する。 ※NSUserTrackingUsageDescriptionは、トラッキングの許可のリクエストダイアログに入るテキスト

"ios": {
  "infoPlist": {
    "NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you."
  },
  "config": {
    "googleMobileAdsAppId": "ca-app-pub-○○○/△△△"
  }
}
...
"plugins": [
  "expo-tracking-transparency"
]

4.App.tsxに以下を記述する。（AdMobBannerで、バナータイプを表示する場合を例にした。）

import { AdMobBanner } from 'expo-ads-admob';
import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

...

useEffect(() => {
  (async () => {
    const { status } = await requestTrackingPermissionsAsync();
    if (status === 'granted') {
      console.log('承諾した時の処理');
    }
  })();
}, []);

...

<AdMobBanner
  adUnitID={
    __DEV__ ? "ca-app-pub-3940256099942544/6300978111" // デモ広告ユニットID https://developers.google.com/admob/android/test-ads?hl=ja
    : Platform.select({
      ios: "ca-app-pub-○○○/△△△",
    })
  }
/>

---

参考

docs.expo.dev

developer.apple.com