React_Native X Expo 앱에 애드몹 활용해서 구글 광고 노출하기

Admob(애드몹)이란?

앱에서 구글의 광고를 간편하게 노출할 수 있으며,

그에 따른 수익 현황 및 관리를 도와주는 서비스입니다

 

구글에는 4가지의 광고 모델이 있습니다

 

구글 애드몹 광고 유형

 

 

 

배너

앱 레이아웃의 일부를 차지하는 사각형 광고입니다

 

 

전면

레벨 완료 등의 자연스러운 중단이나 전환시점에 게재되는 전체 페이지 광고 형식입니다

 

 

리워드

광고를 본 사용자에게 리워드를 제공하는 광고 형식입니다

 

 

네이티브 고급 광고

앱의 디자인과 분위기에 어울리게 맞춤설정할 수 있는 광고 형식입니다

 

 

 

 Expo에서도 구글 애드몹 사용이가능합니다

아래와 같이 라이브러리를 추가합니다

 

 

expo install expo-ads-admob

 

 

라이브러리를 추가 완료하면,

아래의 코드를  app.json 파일 하단부에 추가합니다

그러면 사용할 준비

 

"ios": {
      "supportsTablet": true,
      "buildNumber": "1.0.0",
      "bundleIdentifier": "##########",
      "config": {
        "googleMobileAdsAppId": ""
      }
    },
    "android": {
          "package": "##########",
          "versionCode": 1,
          "config": {
            "googleMobileAdsAppId": ""
          }
  },

 

 

 

bundleIdentifier, package는 앱 마켓들과 구글에 앱 이름을 알려주는 부분입니다.

설정은 이렇게 끝을 내고 광고 배너 생성을 알아보자

 

 

구글 광고 애드몹(AdMob) 가로 배너 생성

 

 

광고 4가지 유형에서 선택하면, 

광고 단위 설정 구성화면에서 광고 단위 이름을 지정하고 

광고 단위 만들기 버튼을 클릭해서 광고를 생성한다

 

광고 설정 화면

 

 

아래와 같이 키값이 형성되고

그 키값들은 app.json에 설정하여야 합니다

 

 

광고 생성화면

 

 

 

아래의 키값은

app.json에 비워져 있던 android의 googleMobileAdsAppId에 적용합니다

 

 

 

광고 SDK

 

 

 

아래의 키값은 

AdMobBanner 컴포넌트의 adUnitId 속성에 적용합니다

 

 

 

광고 유닛키

 

 

아래와 같이 코드를 작성하면 제일 하단에 광고가 노출될 수 있습니다

여러 속성들은 사이드바에 Expo 애드몹 공식문서를 참조하세요

 

 

{Platform.OS === 'ios' ? (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="ca-app-pub-3271224099084995/4041258226"
                  onDidFailToReceiveAdWithError={bannerError}
                  style={styles.banner}
                />
            ) : (
                <AdMobBanner
                  bannerSize="fullBanner"
                  servePersonalizedAds={true}
                  adUnitID="ca-app-pub-3271224099084995/5120026862"
                  onDidFailToReceiveAdWithError={bannerError}
                  style={styles.banner}
                />
            )}

 

 

AdMobBanner 컴포넌트는 아래와 같이 속성을 가지고 있습니다

 

 

banner	휴대폰 및 태블릿용 표준 배너	320x50
largeBanner	휴대폰 및 태블릿용 대형 배너	320x100
mediumRectangle	휴대폰 및 태블릿용 IAB 중간 직사각형	300x250
fullBanner	태블릿용 IAB 전체 크기 배너	468x60
leaderboard	태블릿용 IAB 리더보드	728x90
smartBannerPortrait	휴대폰 및 태블릿용 스마트 배너(기본값)	화면 너비 x 32
smartBannerLandscape	휴대폰 및 태블릿용 스마트 배너	화면 너비 x 32

 

 

광고 단위 생성은 

전면, 리워드, 네이티브 고급 광고도 위와 같이 생성하여

두 개의 키값을 사용하면 됩니다.

 

 

구글 광고 애드몹(AdMob) 전면 배너 생성

전면 광고를 사용자들에게 아래와 같이 노출하는 광고를 생성합시다

 

전면 광고 노출

 

 

아래의 코드를 작성하면 

꿀팁인 카드 컴포넌트를 클릭하면 전면광고가 뜨고

전면 광고 노출 일정 시간 후 디테일 페이지로 이동하게 됩니다

 

그리고 ios와 안드로이드의 분기를 하여 키값을 따로 설정해줍니다

그리고 로드를 시작할 때 함수와 로드를 끝날때 함수와 광고 시작할때 함수 광고가 끝날대 함수를 설정해서

광고가 끝나거나 시작할때 어떠한 함수를 실행할 수 있습니다

 

가장 중요한 것은 애드몹도 외부 API 이므로 실행 순서를

지키기 위해 async/await 사용해야 한다는 것입니다

 

import React, { useEffect } from 'react';
import {View, Image, Text, StyleSheet,TouchableOpacity,Platform} from 'react-native'
import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded
} from 'expo-ads-admob';

export default function Card({content,navigation}){

    useEffect(()=>{
        Platform.OS === 'ios' 
            ? AdMobInterstitial.setAdUnitID("ca-app-pub-5579008343368676/6838730428") 
            : AdMobInterstitial.setAdUnitID("ca-app-pub-5579008343368676/4903859898")

        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});
        await AdMobInterstitial.showAdAsync();
        await navigation.navigate('DetailPage',{idx:content.idx})
      } catch (error) {
        console.log(error)
        await navigation.navigate('DetailPage',{idx:content.idx})
      }
    }

    return(
        <TouchableOpacity style={styles.card} onPress={()=>{goDetail()}}>
            <Image style={styles.cardImage} source={{uri:content.image}}/>
            <View style={styles.cardText}>
                <Text style={styles.cardTitle} numberOfLines={1}>{content.title}</Text>
                <Text style={styles.cardDesc} numberOfLines={3}>{content.desc}</Text>
                <Text style={styles.cardDate}>{content.date}</Text>
            </View>
        </TouchableOpacity>
    )
}

 

 

 

setAdUnitID, requestAdAsync, showAdAsync 등의 함수는 아래와 같이 설명을 확인할 수 있습니다

 

그리고 광고 노출 전 키값을 먼저 세팅하고 함수들을 지정함으로써

광고 상태로 함수를 실행할 수 있습니다

 

그 후 detailPage로 이동하는 함수에 requestAdAsync 함수와 showAdAsync를 사용하여

전면광고를 노출합니다

 

다시 말하지만 비동기가 중요합니다!!

 

그리고 useEffect인 화면 첫 랜더링 시 실행하는 함수들을 나열하는 것 또한 중요합니다!!

 

 

 

이렇게 구글의 애드몹 광고 배너와 전면광고 노출하는 방법을 알아보았습니다

다음에는 시간이 있다면 다른 광고들도 한번 알아보도록 하겠습니다

 

그럼!