React Native - admob으로 광고 삽입하기
Post

React Native - admob으로 광고 삽입하기

08/02/2023
Jiyeon Park
6

앱에 광고를 삽입하기 위해 admob을 사용하였다.

주의

  • expo 46 버전부터는 호환되지 않음
    • expo 46 버전 이상부터는 react-native-google-mobild-ads라는 서드파티 모듈을 따로 사용해야 함
    • 서드파티 모듈을 사용하려면 xcode랑 android studio 설치가 필요함
    • 서드파티(Third Party) : 어떠한 분야에서 처음으로 개발되었거나 원천기술을 가지고 있는 게 아닌, 원천기술과 호환되는 상품을 출시하거나 해당 기술을 이용한 파생상품을 의미
  • expo SDK를 46 버전 미만으로 낮춰서 admob 사용하기
    • expo upgrade 45 명령어로 버전변경 -> 나머지 라이브러리도 45 버전에 호환되도록 같이 변경해 줌

setting

  • expo install expo-ads-admob명령어로 설치
  • admob 홈페이지에서 계정 생성
  • ios와 android앱을 각각 추가
  • 광고단위추가 → 원하는 방식으로 설정하면 됨 (ex. 이 글에서는 리워드 사용)
  • 생성되는 2가지 ID를 기억 (ios와 android 각각의 앱 ID와 광고단위 ID)
  • app.json파일에서 앱 id 추가
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    {
    "expo": {
        "name": "Ads Showcase",
        // ...
        "android": {
        // ...
        "config": {
            // ...
            "googleMobileAdsAppId": "ca-app-pub-3940254~3347511713" // sample id, replace with your own
        }
        },
        "ios": {
        // ...
        "config": {
            // ...
            "googleMobileAdsAppId": "ca-app-pub-39402544~1458002511" // sample id, replace with your own
        }
        }
    }
}

  • app.json파일에서 plugin 권한 추가 ios에서는 맞춤형 광고를 제공할 때 사용자에게 먼저 물어 봐야한다. (메시지설정가능)

    1
2
3
4
5
6
7
8
9
10
11
12

    {
    "expo": {
        "plugins": [
        [
            "expo-ads-admob",
            {
            "userTrackingPermission": "This identifier will be used to deliver personalized ads to you."
            }
        ]
        ]
    }
    }

  • 사용하는 광고형식의 함수 작성

    • useRewardAd 사용자 hook을 만들어 사용하면 관리하기 용이하다.
    • setAdUnitId에 광고단위 ID를 입력하는데 다음처럼 platform 별로 작성할 수 있다.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    import { AdMobRewarded } from "expo-ads-admob";
  import { Platform } from "react-native";

  const UNIT_ID = Platform.select({
  ios: "ca-app-pub-84060~5156",
  android: "ca-app-pub-84736~7347",
  });

  export const useRewardAD = () => {
  const loadRewardAd = async () => {
      await AdMobRewarded.setAdUnitID(UNIT_ID); // Test ID, Replace with your-admob-unit-id
      await AdMobRewarded.requestAdAsync();
      await AdMobRewarded.showAdAsync();
  };

  return {};
  };

  • 개발 테스트시에는 test ID 사용하기

    • simulator 사용 시 자동으로 테스트용 광고를 띄울 수 있지만, 실물기기로도 테스트 할 때는 test Id를 발급받아서 사용 해야한다.
    • ios Test IDs
      • reward 테스트 ios 광고단위 ID : ca-app-pub-3940256099942544/1712485313
    • Android Test IDs
      • reward 테스트 android 광고단위 ID : ca-app-pub-3940256099942544/5224354917
    • 개발 테스트 중에는 테스트 ID를 사용하도록 설정
      1
2
3
4
5
6
7
8

      const UNIT_ID = Platform.select({
ios: __DEV__
    ? "테스트 ios ID"
    : "발급받은 ios 광고단위 ID",
android: __DEV__
    ? "테스트 android ID"
    : "발급받은 android 광고단위 ID",
});

  • 광고의 Events추가 (Reward) 각 광고마다 사용할 수 있는 events가 다르므로 여기에서 확인 하면된다.

    다음코드는 reward 광고방식을 사용한 예제이다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    useEffect(() => {
  AdMobRewarded.addEventListener("rewardedVideoUserDidEarnReward", () => {
    console.log("rewardedVideoUserDidEarnReward");
  });
  AdMobRewarded.addEventListener("rewardedVideoDidLoad", () => {
    console.log("rewardedVideoDidLoad");
  });
  AdMobRewarded.addEventListener("rewardedVideoDidFailToLoad", () => {
    console.log("rewardedVideoDidFailToLoad");
  });
  AdMobRewarded.addEventListener("rewardedVideoDidPresent", () => {
    console.log("rewardedVideoDidPresent");
  });
  AdMobRewarded.addEventListener("rewardedVideoDidFailToPresent", () => {
    console.log("rewardedVideoDidFailToPresent");
  });
  AdMobRewarded.addEventListener("rewardedVideoDidDismiss", () => {
    console.log("rewardedVideoDidDismiss");
  });
}, []);
    • 광고시청 시 컨솔로 어떤 함수가 실행되는지 확인 해보기 : 로딩 되는순간 didLoad실행 → 5초 지나면 보상 얻을 수 있는 상태인 didearnreward실행 → 광고창 닫으면 diddismiss 실행
    • 사용하지 않는 함수들은 지워도 된다. 위 코드에서 나머지 함수들은 광고를 제대로 시청 하지 않는 경우 등에 실행된다.

  • event 함수 사용을 위한 Hook 작성

    • 서드파티 모듈에서 제공하는 hook을 참고하여 작성하였다.
    • 광고 로딩 여부, 보상 가능 여부, 광고 닫힘 여부 등을 확인하는 hook을 다음처럼 작성한 후 외부에서 활용했다.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

    export const useRewardAD = () => {
const [isLoaded, setIsLoaded] = useState(false); //광고 로딩 여부
const [isRewarded, setIsRewarded] = useState(false); //광고 시청완료 후 보상받을 수 있는 여부
const [isClosed, setIsClosed] = useState(false); //광고창 닫혔는지 여부

const loadRewardAd = async () => {
    생략
};

    useEffect(() => {
    AdMobRewarded.addEventListener("rewardedVideoDidLoad", () => {
      console.log("rewardedVideoDidLoad");
      setIsLoaded(true);
    });
    AdMobRewarded.addEventListener("rewardedVideoUserDidEarnReward", () => {
      console.log("rewardedVideoUserDidEarnReward");
      setIsRewarded(true);
    });
    AdMobRewarded.addEventListener("rewardedVideoDidDismiss", () => {
      console.log("rewardedVideoDidDismiss");
      setIsClosed(true);
    });

    return{
    	isLoaded,
    	isRewarded,
    	isClosed,
    };

}

    다음은 리워드를 받을 수 있는 상태이고, 광고창을 닫힌 상태일 때 모달창을 띄우는 함수를 실행하는 코드이다.

    1
2
3
4
5

    useEffect(() => {
  if (isRewarded && isClosed) {
    openTextInputModal();
  }
}, [isRewarded, isClosed]);
Develop, React-Native
React-Native