google admob 테스트 광고 ID 설정 (expo router)

안드로이드 앱 출시하는 과정에서 애드몹 테스트 ID 설정하는법 정리

 

 개발 중에는 테스트 광고를 사용하여 광고를 클릭해도 Google 광고주에게 비용이 청구되지 않게 하는 것이 중요

실제 광고사용하게되면 무효 클릭으로 계정 정지 당할 수 있음

 

npx install react-native-google-mobile-ads

 

애드몹에서 앱 추가 하고, 나오는 APP ID 복사

광고 형식데모 광고 단위 ID

앱 오프닝 광고	ca-app-pub-3940256099942544/9257395921
적응형 배너	ca-app-pub-3940256099942544/9214589741
고정 크기 배너	ca-app-pub-3940256099942544/6300978111
전면 광고	ca-app-pub-3940256099942544/1033173712
보상형 광고	ca-app-pub-3940256099942544/5224354917
보상형 전면 광고	ca-app-pub-3940256099942544/5354046379
네이티브	ca-app-pub-3940256099942544/2247696110
네이티브 동영상	ca-app-pub-3940256099942544/1044960115

 

app.json에 해당 ID 적용 ( APP ID 임 !! 광고 단위 ID가 아님!!!)

"plugins": [
      "expo-router",
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx", // replace with your AppID
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx" // replace with your AppID
        }
      ]
    ]

 

testID 를 사용해서 최종적으로 배너 광고를 삽입합니다

import { Tabs } from 'expo-router';
import { Text, View, StyleSheet, Platform } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from "react-native-google-mobile-ads";

export default function TabLayout() {
  // Use TestIds in development, real ad unit ID in production
  const adUnitId = __DEV__ 
    ? TestIds.BANNER 
    : "ca-app-pub-3940256099942544/9214589741";

  return (
    <View style={styles.container}>
      <View style={styles.tabContainer}>
        <Tabs
          screenOptions={{
            headerShown: false,
            tabBarActiveTintColor: '#007AFF',
            tabBarInactiveTintColor: '#8E8E93',
          }}
        >
          <Tabs.Screen
            name="index"
            options={{
              title: '홈',
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>🏠</Text>
              ),
            }}
          />
          <Tabs.Screen
            name="calculator"
            options={{
              title: '배당 투자 계산기',
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>🧮</Text>
              ),
            }}
          />
          <Tabs.Screen
            name="etf-list"
            options={{
              title: 'ETF 목록',
              tabBarIcon: ({ color }) => (
                <Text style={{ fontSize: 24, color }}>📈</Text>
              ),
            }}
          />
        </Tabs>
      </View>
      
      <View style={styles.bannerContainer}>
        <BannerAd
          unitId={adUnitId}
          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
          requestOptions={{
            requestNonPersonalizedAdsOnly: true,
            networkExtras: {
              collapsible: "bottom",
            },
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tabContainer: {
    flex: 1,
  },
  bannerContainer: {
    width: '100%',
    backgroundColor: 'transparent',
    position: 'absolute',
    bottom: Platform.OS === 'ios' ? 83 : 60, // Adjusted for tab bar height
    alignItems: 'center',
  },
});

 

배너광고외 다른것들은 공식문서 에서 확인가능

 

 

실행

*Expo Go 는 애드몹 호환이 안된다

로컬에서 작동하는 EAS 빌드 환경을 설정하거나 엑스포에서 제공하는 클라우드 빌드를 사용해야 한다

그러나, EAS나 클라우드 서비스 없이도 로컬에서 엑스포 앱을 빌드할 수 있다

npx expo prebuild

안드로이드 환경에서만 한다면, 

npx expo prebuild --platform android

성공하면,

npx expo run:android

 

// if you have iOS
npx expo run:ios

 

Using development build 인지 확인, EXpo Go는 안됨

 

 

오류 발생 시

npx expo prebuild --clean

 

나중에 실제 출시 시 ad unit ID 바꾸는 것 잊지 않기!!