React Native Firebase AdMob 적용, 수입오류 해결

이글은 IOS rnfirebase admob library 사용 중에

수입이 지급되지 않는 문제 원인 및 해결방법 입니다.

 

rnfirebase admob 가이드 따라

firebase admob 도 연동 했고 광고도 정상적으로 나오는데

수입이 몇달 째 0으로 멈춰있는 문제가 있었습니다.

귀찮아서 계속 두다가..

rnfirebase admob 가이드 및 타 블로그 참고해서

추가 수정했더니 수입이 지급되는 것을 확인할 수 있었습니다.

 

저처럼 수입 문제가 있는 분께

도움이 되고자 글로 남겨놓습니다.

 

우선 아래 가이드대로 app 에 적용합니다.

광고는 banner ads 만 추가 했습니다.

rnfirebase.io/admob/usage

AdMob | React Native Firebase

rnfirebase.io/admob/displaying-ads#banner-ads

rnfirebase.io/

본인 앱에 유럽유저가 없다면

European user consent 는 필요없어요.

여기서 끝내면 안되고

구글 firebase guide 도 추가해줘야 합니다.

firebase.google.com/docs/admob/ios/quick-start#objective-c

시작하기  |  Firebase

Podfile 에 아래 코드도 추가해줍니다.

  pod 'Firebase/Core'
  pod 'Firebase/Analytics' // in case use Analytics
  pod 'Firebase/AdMob'
  
  save 후, pod install

info.plist 파일에도 다음 코드를 추가해줍니다.

<key>GADIsAdManagerApp</key>
<true/>
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-7xxxxxxxxx~xxxxxxxxxxxx</string>

 

저는 최신 업데이트에서 GADIsAdManagerApp key true로 추가하고, 

podfile 에 아래 코드를 추가 했더니 수입이 지급되기 시작했습니다ㅠ

이 부분 놓치지 않고 적용하시길 바랍니다.

$RNFirebaseAsStaticFramework = true

$FirebaseSDKVersion = '7.4.0' //본인버전

혹시, 그래도 안되면 firebase에

IOS 앱 정보를 모두 넣어보세요 :)

마지막으로 MainScreen bottomtab 위에

광고 보여지도록 적용한 코드 공유합니다.

rnfirebase.io/admob/displaying-ads#banner-ads 공식 가이드 중

BannerAdView 에서 두군데 수정할 게 있는데요

FULL_SCREEN size의 경우 android phone 에서

우측끝이 잘리는 경우가 발생하기 때문에

ADAPTIVE_BANNER 가 좋습니다.

그리고, center 에 위치시키기 위해 아래와 같이 적용합니다.

< View style={{alignSelf: 'center'}}>

import React, {useState, useEffect, useCallback} from 'react';
import {View, Platform, Image, Alert, TouchableOpacity, Text} from 'react-native';

import { createStackNavigator} from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import AsyncStorage from '@react-native-async-storage/async-storage';
import {setAsyncStorage} from './storage/setAsyncStorage';
import {GlobalStyles} from './GlobalStyles';
import {introSlide} from "./introSlide";
import AppIntroSlider from 'react-native-app-intro-slider';
import SplashScreen from 'react-native-splash-screen';
import admob, { MaxAdContentRating, BannerAd, TestIds, BannerAdSize } from '@react-native-firebase/admob';
import {getTrackingStatus, requestTrackingPermission} from 'react-native-tracking-transparency';

const adUnitId = __DEV__ ? TestIds.BANNER : Platform.OS === 'ios' ? 'ca-app-pub-xxxxxxxx/xxxxxxxx'
  : 'ca-app-pub-xxxxxxxx/xxxxxxxx';
let mAdTrackingPermission = false;

const StackScreen = createStackNavigator();
function App() {
  const [finishIntro, setFinishIntro] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      SplashScreen.hide();
    }, 1000);
    Platform.OS === 'ios' ?
    getTrackingStatus().then((status) => {
        if (status === 'authorized' || status === 'unavailable') {
          mAdTrackingPermission = true;
        } else {
          requestTracking();
        }
      }).catch((e) => Alert.alert('Error', e?.toString?.() ?? e)) : console.log("selfReg start");
   
  }, []);
  const onRenderItem = ({ item }) => {
    return (
      <View style={GlobalStyles.IntroSlideContainer}>
        <Image style={GlobalStyles.IntroSlideImageContainer} source={item.image} />
      </View>
    );
  }
  const requestTracking = () => {
    requestTrackingPermission().then((status) => {
      if (status === 'authorized' || status === 'unavailable') {
        mAdTrackingPermission = true;
      }
    }).catch((e) => Alert.alert('Error', e?.toString?.() ?? e));
  }
  const onDone = () => {
    setFinishIntro(1);
  }

  if (finishIntro > 0) {
    return (
      <NavigationContainer>
        <StackScreen.Navigator
          // screenOptions={{cardStyleInterpolator: CardStyleInterpolators.forScaleFromCenterAndroid}}
        >
          <StackScreen.Screen name="셀프 등기 가이드" component={BottomTabScreen}
            options={({ navigation }) => ({
              headerLeft:() => <Header left={true} navigation={navigation}/>,
              headerRight:() => <Header left={false} navigation={navigation}/>,
              headerTitleAlign: "center",
            })}
          />
          <StackScreen.Screen name="가격 조회" component={WebSearchScreen}
            options={() => ({
              headerTitleAlign: "center",
              headerRight:() =>  <TouchableOpacity onPress={() =>
              Alert.alert('', '※할인률조회\n기준일에 맞는 할인율 확인\n(좌측변의 날짜와 우측변의 할인율이 만나는 숫자 확인)\n\n'+
              '※공동주택가격열람\n지도검색 시 열람 팝업이 원할하지 않을 수 있음')}>
                <Text style={GlobalStyles.reportButtonRight}>가이드보기</Text>
              </TouchableOpacity>,
            })}
          />
          <StackScreen.Screen name="등기 카페" component={WebCafeScreen}
            options={() => ({headerTitleAlign: "center",})}
          />
          <StackScreen.Screen name="정보 입력" component={ChooserScreen}
            options={() => ({headerTitleAlign: "center",})}
          />
        </StackScreen.Navigator>
      </NavigationContainer>
    );
  } else {
    return <AppIntroSlider renderItem={onRenderItem} data={introSlide} onDone={onDone}/>;
  }

}

const Tab = createBottomTabNavigator();
function BottomTabScreen() {
  const [registration, setRegistration] = useState(0);
  useEffect(() => {
    admob()
    .setRequestConfiguration({
      // Update all future requests suitable for parental guidance
      maxAdContentRating: MaxAdContentRating.PG,
      // Indicates that you want your content treated as child-directed for purposes of COPPA.
      tagForChildDirectedTreatment: true,
      // Indicates that you want the ad request to be handled in a
      // manner suitable for users under the age of consent.
      tagForUnderAgeOfConsent: true,
    })
    .then(() => {
      // Request config successfully set!
    });
  }, []);

  return (
    <View style={{flex:1}}>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#AC8843',
        }}
        >
      <Tab.Screen name="Calculator" component={CalculatorScreen}
          options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="calculator-variant" color={color} size={size} />
          ),
          tabBarLabel:"등기계산기",
        }}/>
        <Tab.Screen name="Checklist" component={registration === 0 ? CheckListScreen : registration === 1 ? CheckListInheritScreen : CheckListBestowalScreen}
          options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="format-list-checks" color={color} size={size} />
          ),
          tabBarLabel:"체크리스트",
        }}/>
        <Tab.Screen name="Map" component={SearchScreen}
          options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="file-search" color={color} size={size} />
          ),
          tabBarLabel:"등기소검색",
        }}/>
        <Tab.Screen name="Dday" component={DdayScreen}
          options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="calendar-clock" color={color} size={size} />
          ),
          tabBarLabel:"등기하는날",
        }}/>
        <Tab.Screen name="FAQ" component={FAQScreen}
          options={{
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="cloud-question" color={color} size={size} />
          ),
          tabBarLabel:"기타FAQ",
        }}/>
      </Tab.Navigator>
      < View style={{position:'absolute', bottom:Platform.OS === 'ios'? 78 : 48, alignSelf: 'center'}}>
        <BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ADAPTIVE_BANNER}
          requestOptions={{
            requestNonPersonalizedAdsOnly: true,
          }}
        />
      </View>
    </View>
  );
}
export default App;

 

안드로이드 화면과 아이폰 에 광고 적용 화면