App Tracking TransparencyExpo bareExpo RouterReact NativeReact Native Paper

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

jam-gb4c2c63a5_1920 App Tracking Transparency
スポンサーリンク

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

開発環境(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',
  },
});

バナー広告を表示する

コメント

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