[RN/iOS] 리젝 리포트 – App Tracking Transparency 팝업 필요

By everydayvignettes 10:55 pm

이슈

App Tracking Transparency 권한 요청 팝업이 존재하지 않음.

발견하지 못한 이유

앱스토어 정보에 따라서 해당 권한 요청 팝업이 필요한지 모르고 있었음.

원인

앱스토어 정보에는 추적 데이터를 사용한다고 나와있으나, App Tracking Transparency 권한 요청 팝업이 존재하지 않음.

처리

• 기존에 광고 개인화를 하지 않았던 부분에 있어서 플래그를 추가함.

• ATT 팝업을 추가하고, grantedATT 플러그를 활용하여 광고 개인화 여부를 적용함.
• 국가별 ATT 팝업에 들어갈 설명을 추가하고 반영함.

1) 권한 요청 및 플래그 업데이트

const requestAppTrackingPermission = async () => {
    if (Platform.OS === 'ios') {
      const permissionStatus = await request(
        PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY,
      );
      if (permissionStatus === RESULTS.GRANTED) {
        console.log('App Tracking Transparency permission granted');
        admob()
          .setRequestConfiguration({
            maxAdContentRating: MaxAdContentRating.PG,
            tagForChildDirectedTreatment: true,
            tagForUnderAgeOfConsent: true,
          })
          .then(() => {
            console.log('AdMob initialized');
            mmkv.setATT(true);
          })
          .catch(error => {
            console.error('AdMob initialization failed', error);
          });
      } else {
        console.log('App Tracking Transparency permission denied');
        mmkv.setATT(false);
      }
    }
  };

2) Admob 컴포넌트에 개인화 옵션과 플래그 연결

import mmkv from '@/controllers/mmkv';
import {isTester} from '@/stores/auth.store';
import React from 'react';
import {Platform, StyleSheet, View} from 'react-native';
import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';

const unitID =
  Platform.select({
    ios: '...',
    android: '...',
  }) ?? '';

const adUnitId = __DEV__ ? TestIds.BANNER : unitID;

interface AdmobProps {
  type: string;
}

const Admob = ({type}: AdmobProps) => {
  const grantedATT = mmkv.getATT();
  if (isTester(mmkv.getUser()?.email || '')) {
    return <></>;
  }
  return (
    <View style={[styles.admob]}>
      <BannerAd
        unitId={adUnitId}
        size={type}
        requestOptions={{
          requestNonPersonalizedAdsOnly: grantedATT,
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  admob: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default Admob;

리포트