앱으로 수익을 내는 방법 - 배너광고 ... 2. 전면 배너

AdMob을 통해 광고 키 얻어오기

https://velog.io/@odesay97/%EC%95%B1%EC%9C%BC%EB%A1%9C-%EC%88%98%EC%9D%B5%EC%9D%84-%EB%82%B4%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%B0%EB%84%88%EA%B4%91%EA%B3%A0

  + AdMob을 사용하기 위해 앱에 세팅하는 부분도 참고 할 것 --> app.json부분

전면 배너 예제 코드

 import React, { useEffect } from 'react';
 import {View, Image, Text, StyleSheet,TouchableOpacity,Platform} from 'react-native'
         // OS구분을 위해 Platfrom도구를 리액티 네이티브에서 불러옴
 
 import {
    setTestDeviceIDAsync,
    AdMobBanner,
    AdMobInterstitial,
    PublisherBanner,
    AdMobRewarded
  } from 'expo-ads-admob';
        //expo-ads-admob에서 광고 태그와 관련된 도구들을 가져옴
             // 이번에는 전면 배너이므로 AdMobInterstitial을 태그로 사용할 것
      

  //MainPage로 부터 navigation 속성을 전달받아 Card 컴포넌트 안에서 사용
  export default function Card({content,navigation}){

      useEffect(()=>{
      
          // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
          //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
          //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
          
          
          // 사용법에 따르면 전면배너는 처음에 초기화 과정이 필요함
           //--> 아래는 초기화 과정
           
           // ios, 안드로이드 키가 다르므로 구분지어 키 세팅
          Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("ca-app-pub-6657385184009422/7612224181") : AdMobInterstitial.setAdUnitID("ca-app-pub-6657385184009422/8542162476")

        // 광고를 불러올 때 실행되는 리스너
          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 () =>{
      // 외부 API에 대한 함수이므로 async await 처리
    
       // 개인 맞춤 광고 true
        await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
        
        // 광고 시작 코드
        await AdMobInterstitial.showAdAsync();
      }

      return(
          //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
          <TouchableOpacity style={styles.card} onPress={()=>{goDetail()}}>
              {/* 해당 컴포넌트가 클릭되면 위의 goDetail함수가 실행되면서 광고 시작*/}
                          
              <Image style={styles.cardImage} source={{uri:content.image}}/>
              <View style={styles.cardText}>
              
              ......
              
              
              

전면 배너의 경우, 사용 설명서에 따르면 초기화가 필요하므로 useEffect에서 초기화 (AdMob 광고키 셋팅, 리스너 설정)
특히 리스너 중에

         // 광고가 끝날 때 실행되는 리스너
                AdMobInterstitial.addEventListener("interstitialDidClose", () => {
                      //광고가 끝나면 다음 코드 줄이 실행!
                    console.log("interstitialDidClose")
                    navigation.navigate('DetailPage',{idx:content.idx})

                   //--> 광고가 끝나면 해당 파일로 이동
                  // (클릭시 해당 파일로 이동하기 전에 띄워주는 전면광고이기 때문) 
                });
                

의 경우 광고가 끝나면서 본래 나타나야 될 파일로 이동하는 부분으므로 좀더 신경써서 봐야한다.

이후
--> goDetail 함수를 만들고 광고 시작 코드를 넣어 광고를 시작한다.

(이외에는 위의 전체 코드 살펴볼 것)