【ReactNative】App Tracking Transparency (iOS) を設定する

2024.02.052024.03.25

Apple は、IDFA にアクセスするための App Tracking Transparency 認証リクエストを表示することをアプリに要求しています (パーソナライズされた広告を使用するか、パーソナライズされていない広告を使用するかはユーザーに選択を委ねます)。

開発環境(Expo Bare)
セットアップ
実装する
バナー広告を表示する

開発環境(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”,
“expo-tracking-transparency“: “~3.1.0”,

セットアップ

パッケージを設置する

$ npx expo install expo-tracking-transparency
$ npx pod-install

iOS設定(Expo Bare用)

// ios/<proejct-name>/Info.plist

...
<key>NSUserTrackingUsageDescription</key>
<string>Your custom usage description string here.</string>
...

Android設定(Expo Bare用)

// android/app/src/main/AndroidManifest.xml

...
<!-- Added permissions -->
<uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
...

実装する

import React, { useEffect } from 'react';
import { Text, StyleSheet, View } from 'react-native';
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');
      }
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Tracking Transparency Module Example</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

iOS 17.4 & iPhone 15 Proでは、
requestTrackingPermissionsAsync() の実行タイミングはアプリが アクティブ状態 になってからではないとランダムでAppTrackingTransparencyのプロンプトが表示されないことがあります！　　　24/5/25(月)追記