앱 내 구글 배너 광고를 게재해 수익 구조를 연결해보자.
Admob 나의 앱에 광고를 게재하는 경우,
Adsense 나의 웹페이지에 광고를 게재하는 경우 사용한다.
절차는
1. 애드몹 가입, 프로젝트 생성
2. 애드몹에 배포 전인 앱을 생성하고 배포 후 배포 정보를 알려주면 OK
3. Expo 를 클라이언트로 사용 중이기 때문에 엑스포에서 지원하는 애드몹을 참고
- 앱에 애드몹 설치
expo install expo-ads-admob- app.json 하단에 android, ios 부분을 추가
ios 부분은
"ios": {
"supportsTablet": true
},
이미 있기 때문에, 덮어 씁니다.
※ ios의 bundleIdentifier와 googleMobileAdsAppId
android의 package와 googleMobileAdsAppId는 자신의 값을 기입
"ios": {
"supportsTablet": true,
"buildNumber": "1.0.0",
"bundleIdentifier": "com.myhoneytip.gun",
"config": {
"googleMobileAdsAppId": ""
}
},
"android": {
"package": "com.myhoneytip.gun",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": ""
}
},최종 app.json 코드
"ios": {
"supportsTablet": true,
"buildNumber": "1.0.0",
"bundleIdentifier": "com.xxx.xxx",
"config": {
"googleMobileAdsAppId": ""
}
},
"android": {
"package": "com.xxx.xxx",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": ""
}
},👉 bundleIdentifier, package는 일반적으로 com.company.appname형식을 따릅니다. 여러분만의 값으로 구성해서 넣어주세요. 영어로...
이 둘 값은 앱 마켓들과 구글에 여러분 앱 이름을 알려주는 부분입니다.
ios, android의 각각의 googleMobileAdsAppId 는 배너 선택 후 추후 기입
가로 배너
1) 적용할 앱 선택 후 광고단위 추가 -> ios, android 각각
배너 생성 시 광고 단위 이름으로 어디에 쓸 배너 광고인지 구분하면 추후 배너별 추적 분석이 용이
2) 배치를 위한 2개의 키 코드값은 앱 상에서 배너를 적용할 때 필요
3) 첫번 째 키값(앱 ID)은 app.json > android > googleMobileAdsAppId 에 적용
4) iOS도 앱생성 → 광고 단위 생성 → 가로배너 생성 → 키값 순서대로 진행 한 후, app.json에 적용
5) 광고 단위 생성 후 부여 받은 두 번째 키값은(광고 단위 ID) app.json이 아닌 실제 Main.js 코드 단에서 사용될 키 값
구글에서 부여한 가로배너를 앱과 연결하는 정보가 담겨 있으므로 다음 Main.js 코드를 적용
import {
setTestDeviceIDAsync,
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded
} from 'expo-ads-admob';
(...)
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
cateState.map((content,i)=>{
return (<Card content={content} key={i} navigation={navigation}/>)
})
}
// 플랫폼에 따라 대응하는 광고 설정 가능
{Platform.OS === 'ios' ? (
<AdMobBanner
bannerSize="fullBanner"
servePersonalizedAds={true}
adUnitID="ca-app-pub-3271224099084995/6111705561"
style={styles.banner}
/>
) : (
<AdMobBanner
bannerSize="fullBanner"
servePersonalizedAds={true}
adUnitID="ca-app-pub-3271224099084995/8434632486"
style={styles.banner}
/>
)}
</View>
(...)
banner: {
// 배너 스타일 설정 가능
}
적용하기 전에 코드 단에서 부르는 가로 배너의 이름은 AdMobBanner 입니다.
광고 이름들이 정해져 있어요!
!애드몹의 키 값에 주의!전면 배너 광고
실행 순서는 홈화면 -> 어떤 버튼을 누르면 -> 전면광고 실행 -> 일정 시간 광고 노출 후 -> 해당 버튼 페이지로 이동
1) 전면 광고 유형 활성화 -> ios, android 각각
2) 앱 상 설치
- 타이밍: 버튼을 누르고, 디테일 화면으로 넘어가기 바로 전에 띄워지므로 Card.js 에 광고를 붙인다.
코드 단에 들어가기 전에 사용 할 전면 광고의 코드단에서의 이름은 interstitial
import React, { useEffect } from 'react';
import {View, Image, Text, StyleSheet,TouchableOpacity} 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에 들어오자마자 광고를 준비하는 코드를 그대로 가져와 복붙했고, 안에 키값만 여러분들의 키값으로 변경했습니다.
//그리고 보여지는 AdMobInterstitial.addEventListener 코드들은 광고를 실행했을때, 광고 실행이 실패했을때, 광고가 열리고 난다음, 광고가 끝난다음, 각각 어떻게 처리할까?에 대한 애드몹 제공함수인데요!
//우리가 정작쓰는건 광고가 끝난 다음의 모습이지만 여러분들이 뭘 좋아하실지 몰라 다 가져왔습니다🙂
useEffect(()=>{
// Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
//애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
//안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("ca-app-pub-3271224099084995/3801252904") : AdMobInterstitial.setAdUnitID("ca-app-pub-3271224099084995/3812845286")
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})
});
},[])
// 꿀팁을 눌렀을 때 실행되는 goDetail 함수에 다음과 같은 전면 광고를 실행시키는 애드몹 API를 추가
// 이 부분은 실행 순서가 지켜져야 하기 때문에 async await 자바스크립트 문법을 사용
const goDetail = async () =>{
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();
}
return(
//카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
<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>
)
}
const styles = StyleSheet.create({ });
- 애드몹 함수의 업데이트로 인해서 인지, 최근에 피자 화면만 나온다는 제보를 받았습니다 -> goDetail() 함수에 모든 로직을 넣으면 됨
useEffect(()=>{
// Card.js에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
//애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
//안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
Platform.OS === 'ios' ? AdMobInterstitial.setAdUnitID("ca-app-pub-3271224099084995/1343320963") : AdMobInterstitial.setAdUnitID("ca-app-pub-3271224099084995/7419566734")
AdMobInterstitial.addEventListener("interstitialDidLoad", () =>
console.log("interstitialDidLoad")
);
AdMobInterstitial.addEventListener("interstitialDidFailToLoad", () =>
console.log("interstitialDidFailToLoad")
);
AdMobInterstitial.addEventListener("interstitialDidOpen", () =>
console.log("interstitialDidOpen")
);
AdMobInterstitial.addEventListener("interstitialDidClose", () => {
//광고가 끝나면 다음 코드 줄이 실행!
console.log("interstitialDidClose")
// console.log(content.idx)
// navigation.navigate('DetailPage',{idx:content.idx})
});
},[])
const goDetail = async () =>{
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();
await navigation.navigate('DetailPage',{idx:content.idx})
}
go simple 🧑🏻💻