React-Native [14. AdMob 전면 광고 추가하기]

Min Hyung Kim·2022년 4월 8일
0
post-thumbnail

전면 광고 추가하기

카드를 클릭하면, 그 카드의 상세 정보 화면이 나타나기 전에 잠깐 나오는 전면 광고를 추가해보았다.
게임하거나 어플 쓰면서 가장 킹받는 광고

예시코드

Card.js

.
.
.
import { StyleSheet, ... , Platform, Alert } from "react-native";

import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from "expo-ads-admob";

//MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
export default function Card({ content, navigation }) {
  useEffect(() => {
    // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
    //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
    //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
    Platform.OS === "ios"
      ? AdMobInterstitial.setAdUnitID("iOS 앱 광고 ID")
      : AdMobInterstitial.setAdUnitID("Android 앱 광고 ID");

    AdMobInterstitial.addEventListener("interstitialDidLoad", () =>
      console.log("interstitialDidLoad")
    );
    AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>
      console.log("interstitialDidFailToLoad")
    );
    AdMobInterstitial.addEventListener("interstitialDidOpen", () =>
      console.log("interstitialDidOpen")
    );
    AdMobInterstitial.addEventListener("interstitialDidClose", () => {
      //광고가 끝나면 다음 코드 줄이 실행!
      console.log("interstitialDidClose");
      navigation.navigate("DetailPage", { idx: content.idx });
    });
  }, []);

  const goDetail = async () => {
    await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true });
    await AdMobInterstitial.showAdAsync();
  };

  return (
    //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
    <TouchableOpacity
      style={styles.card}
      onPress={() => {
        goDetail();
      }}
    >

.
.
.

사용법

  1. "expo-ads-admob" 라이브러리에서 사용할 광고 기능을 가져온다.
    • 전면 광고는 AdMobInterstitial
  2. useEffect에 전면 광고와 관련된 함수를 입력하여, Card 컴포넌트가 호출될때 바로 실행시킨다.
    • MainPage에서 각 Card가 호출될때마다, 어떤 플랫폼인지 확인하고, 광고 초기설정을 한다.
    • AdMobInterstitial의 addEventListener로 로딩, 로딩실패, 열기, 닫기 총 4개의 동작에 해당하는 이벤트를 추가한다. 앞으로 광고 붙일때는 복붙이 빠를듯...
    • 로그를 확인해보니 메인화면의 10개의 카드 중 어느 하나의 카드를 열면 10개의 광고가 로드, 닫으면 10개가 닫히는데, 그래서 그런지 카드를 누른 후와 광고를 닫은 후 반응이 조금 느리다.
    • 개선이 매우 필요한 부분이다!
    • 보이는 광고는 하나다.
useEffect(() => {

Platform.OS === "ios"
  ? AdMobInterstitial.setAdUnitID("iOS 앱 광고 ID")
  : AdMobInterstitial.setAdUnitID("Android 앱 광고 ID");

AdMobInterstitial.addEventListener("interstitialDidLoad", () =>
  console.log("interstitialDidLoad")
);
AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>
  console.log("interstitialDidFailToLoad")
);
AdMobInterstitial.addEventListener("interstitialDidOpen", () =>
  console.log("interstitialDidOpen")
);
AdMobInterstitial.addEventListener("interstitialDidClose", () => {
  console.log("interstitialDidClose");
});
}, []);
  1. 카드를 눌렀을때, 광고 호출 - 광고 보이기 기능을 하는 함수, goDetail()을 작성한다.
    • 순서가 중요하기 때문에 async, await를 사용한다.
    • 광고가 닫히면 navigation.navigate를 사용해 해당 카드의 상세정보 페이지로 이동하도록 한다.
const goDetail = async () => {
  await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true });
  await AdMobInterstitial.showAdAsync();
};
AdMobInterstitial.addEventListener("interstitialDidClose", () => {
  //광고가 끝나면 상세정보 페이지로 이동!
  console.log("interstitialDidClose");
  navigation.navigate("DetailPage", { idx: content.idx });
});

전면 광고 화면

profile
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다

0개의 댓글