앱 광고 달기, @react-native-admob/admob

1. 설치

// android sdk version > 30
yarn add @react-native-admob/admob

// android sdk version > 30
yarn add @react-native-admob/admob@1.5.1

cd ios && pod install && cd ..

 

 

2. App ad id 설정

// info.plist
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-YYYYYYY~YYYYYYY</string>
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>


// android/app/src/main/Anroidmeniest.xml
<application>
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-YYYYYYY~YYYYYY"/>
</application>

 

 

3. app-ads.txt

구글 애드몹 사이트에 로그인해서 앱을 등록을 먼저 해야한다.

앱이 이미 출시되어있다면 정말 쉽게 등록 가능하다.

(출시 안되어있을떄는 어떤지는 모르겠다.)

 

앱을 모두 등록한뒤

좌측 메뉴 목록 중에서 "앱 > 모든 앱 보기" 를 선택한다.

 

그러면 app-ads.txt 탭을 볼 수 있다.

일단 2번 항목을 복사하고 닫자.

 

구글 공식 크롤링 가이드에 따르면

도메인 단위로 app-ads.txt를 수집한다고 한다.

 

예를들어,

앱 스토어/플레이 스토어에 지원 페이지 링크가

www.help.com/service  라면

www.help.com/app-ads.txt  을 크롤링 하여

등록 여부를 체크하는것이다.

 

따라서, 우리는 해당 링크에 접근했을 때

app-ads.txt가 보여지게 설정해줘야 한다.

(각자 환경에 맞게)

 

app-ads.txt의 내용은

위에 2번 항목을 복사한 내용이면 충분하다.

 

 

4. 앱 정상 실행 확인하기

라이브러리를 설치하고나면

앱이 정상적으로 잘 실행되는지

확인 할 필요가 있습니다.

 

각 os에서 앱을 실행해보고

에러가 난다면

npm start --reset-cache

를 통해 캐시를 한번

정리해주는것을 추천드립니다.

 

 

5. 테스트 코드로 광고 띄워보기

function AdTest() {
  const TEST_FULLPAGE_VIDEO_AD = 'ca_~~~';
  const { adLoaded, adDismissed, show, load } = useInterstitialAd(TEST_FULLPAGE_VIDEO_AD)
  
  const showAd = () => {
    const isNotShownAd = adLoaded && !adDismissed;
    if (isNotShownAd) {
      show();
    }
  }
  
  return {
    <>
      <TouchalbeOpacity onPress={showAd}>
        <Text>광고 짠</Text>
      </TouchableOpacity>
    </>
  }
}

광고를 보여주고나면

adDisimissed가 true 상태로 전환되는데

load 메소드를 통해

광고를 리필(?)해 줄 수 있습니다.

리필 후에는 adDismissed가 다시 false로 전환되며

필요에따라 다시 광고를 띄워줄 수 있습니다