(참고 블로그)

  • Web 과 Android 는 google 광고 넣는 방식이 다름

Web 에 광고 넣기

  • google adsense 에서 website 인증을 받아야함.
  • backend 에서 (my-hostname)/ads.txt 을 query 하는 식으로 구현
  • 9 일 뒤에, “Google-served ads on screens without publisher-content” 로 거절 당함.
    • “under construction” 때문 인가 싶어 다시 신청함.
  • 최종적으로 2번 반려됨.
  • Kofi 를 사용함.
    • Kofi iframe 을 별도의 tsx 파일로 저장후, import 하여 사용

Android 에 광고 넣기

  • google ad-mob 에서 ID 발급
    • 회원 가입: google ad-mob
    • Apps 탭에서 Add your first app 클릭 후, 광고 유형 선택 후, 최종적으로 ID 발급
  • package install
npx expo install react-native-google-mobile-ads
  • app.json 수정
{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

ios 의 경우, 다음과 같이 수정해야한다고 함

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}
  • 코드
import React, {useRef} from 'react';
import {
  BannerAd,
  BannerAdSize,
  TestIds,
  useForeground,
} from 'react-native-google-mobile-ads';

const adUnitId = TestIds.ADAPTIVE_BANNER
const bannerRef = useRef<BannerAd>(null);

<BannerAd
ref={bannerRef}
// 광고 단위 ID
unitId={adUnitId}
// 베너 광고 크기
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
/>
  • 실행
# native code 를 android platform 빌드
npx expo prebuild --platform android
# 앱 설치 후 실행 (Java, JDK 설치 필요)
npx expo run
  • 주의 사항: Java, JDK, 환경 변수 세팅되어야함
# JDK 설치
brew install openjdk@17

# 환경 변수
export JAVA_HOME="/opt/homebrew/opt/openjdk@17"
export PATH="$JAVA_HOME/bin:$PATH"
  • test id 를 발급받은 값으로 대체