[JAVASCRIPT 공부일지] 5주차 - 2 (수익성 앱 만들기 - 애드몹 (배너생성))

앱 서비스를 만들때 앱에 광고넣을 수 있는 방법 중 배너 생성에 대해 공부해보았습니다.

---

<애드몹 - 가로배너 생성>

1. 애드몹 가로배너 광고 단위 설정

2. 앱 상에 적용

간단한 구조입니다.

Google 애드몹에서 부여받은 배너 키값을 ios의 googleMoileAdsAppId 부분에 넣어주시면 됩니다.

두번째 키 값은 '배너 형태의 그림 썸네일' 이므로 실제 Main 페이지나 Detail 페이지 등
실제 페이지에서 배너를 보여줄 공간에 사용해야합니다.

MainPage.js 에는

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

가 추가됩니다.

위 코드에서는 expo-ads-admob 도구를 꺼내와서 골라사용하기 위해  모두 다 선언한 모습입니다.
AdMobBanner 이것이 가로배너에 해당되는 도구입니다.

배너를 달 때는 각 운영체제에 대해 다른 구조의 키 값을 배치해주어야합니다.
모바일로 예를 들면 iOS와 안드로이드가 있기때문에 이 둘을 잘 구분해주는 것이 중요합니다.

Platform.OS를 통해 ios냐 android 코드를 구분해서 두번째 키 값을 적절하게 배치해주시면됩니다.
삼항연산자를 사용하여 ios이면(= true) 앞의 AdmobBanner 부분이 실행되고, 
안드로이드면(=false) 마지막 부분이 실행되는 것입니다.

{Platform.OS === 'ios' ? (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="키 값"
                  style={styles.banner}
                />
            ) : (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="키 값"
                  style={styles.banner}
                />
            )}

또한 style={styles.banner} 로 스타일까지 부여해줄수있습니다. 따라서 이 배너가 어디에나 들어가도 됩니다.

예를들어 컨텐츠를 담은 카드영역에서

<View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
         {
          cateState.map((content,i)=>{
            return (<Card content={content} key={i} navigation={navigation}/>)
          })
        }
        
      </View>

cateState.map((content,i)=>{
부분에서 (i==3) or (i==5) or (i==7) 로 지정해준다면
3번째 인덱스 이후로 배너광고를 표시하겠다는 것도 가능한 것입니다.

참고로 가로배너는 유저들이 배너를 클릭하는 '순간' 수익이 발생하게 됩니다.

---

<애드몹 - 전면배너 생성>

가로배너보다는 조금 더 수익창출이 되고, 특정 데이터를 누르게되면 '닫기 / 열기'가 뜨는 화면이 전면배너의 그 예입니다.

<전면광고배너 실행순서 예시>
1) 메인페이지에서 컨텐츠를 하나 누르면
2) 전면광고 노출
3) 노출 일정시간 이후
4) 디테일페이지로 이동

컨텐츠를 눌러 전면배너가 발생하는 것이므로 컨텐츠가 담긴 Card.js 페이지에 전면배너를 생성해야할 것입니다.

먼저 구글애드몹에서 전면광고 단위를 추가한 후

코드 내에서 적용하여 추가를 해주시면됩니다.

Card.js 에

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

처럼 도구를 준비시키는 모습을 보실 수가 있습니다.
활성화되어있는 부분이 현재 사용하고자하는 도구입니다.
AdMobInterstitial

<전면광고사용의 기본 골격 코드>

useEffect(()=>{
        // Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
        //애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
        //안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
        Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("키 값")

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

다른 기능으로

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

에서 requestAdAsync 는 광고를 준비할때 그냥 준비할건지 물어보는 코드입니다. 
serverpesonalizedAds 옵션을 true로 활성화시키면 개인화 (사용자가 주로 어떠한 컨텐츠를 많이보았는지) 연관시켜서 알려주는 광고가 됩니다.

await AdMobInterstitial.showAdAsync();

showAdAsync는 전면광고를 실제로 활성화시키는 코드입니다.

---

<Card.js 전면배너 광고 달기 - 핵심코드>

const goDetail = async () =>{
      try {
        await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
        await AdMobInterstitial.showAdAsync();
        await navigation.navigate('DetailPage',{idx:content.idx})
      } catch (error) {
        console.log(error)
        await navigation.navigate('DetailPage',{idx:content.idx})
      }
    }

여기 goDetail도 try-catch 처리를 해주었는데, 광고가 발생할때 다양한 이유로 광고가 안되는 경우도 있는데
(광고설치 오류, 키값 오류, 광고설치 오타 오류, 구글애드몹 승인에러 등) 여러 변수가 있어도 다음페이지에 넘어가라는 명령을 표현한 것입니다.

>> 광고를 달 때는 유저친화적인면을 신경쓰면서 넣는 것이 직관적인 앱을 만드는데 도움이 됩니다.

---

다음 공부일지에서는 광고를 달았으니 앱을 배포하는 방법에 대해 공부해보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.