배너 수익 방식
-
배너 클릭
--> 클릭하면 링크로 가는 배너 광고 -
배너 광고 시청
--> (유튜브 동영상 동영상 같이) 5~ 15초 정도 짧은 영상을 보여주는 광고 -
배너 광고 사용자 참여
--> 광고 속에서 사용자가 게임을 하는 등 참여하도록 유도하는 광고
Goggle --> AdMob (구글 배너 광고 기능)
리액트 네이티브 --> AdMob 사용
--> Expo가 AdMob사용을 보조해줌
AdMob 공식문서 : https://docs.expo.dev/versions/latest/sdk/admob/
expo install expo-ads-admob
[사용방법]
1. app.json파일의 하단에 ios 부분 추가
"ios": {
"supportsTablet": true,
"buildNumber": "1.0.0",
"bundleIdentifier": "com.myhoneytip.gun",
"config": {
"googleMobileAdsAppId": ""
}
},
"android": {
"package": "com.myhoneytip.gun",
"versionCode": 1,
"config": {
"googleMobileAdsAppId": ""
}
},
이후 중복되는 부분 제거--> 본래 있던 ios와 android부분
--> 광고를 다는 주체가 안드로이드일 떄와 ios 일 때 AdMob이 제공하는 키가 다름
--> 리액트 네이티브는 안드로이드와 ios 모두 개발 가능하기 때문에 안드로이드용 키와 ios용 키를 모두 명시한 것
2. AdMob에 가서 키를 제공 받아 위의 코드에 googleMobileAdsAppId의 값 부분에 넣음
-->AdMob에 앱 태그 부분에서 생성
-->이후 앱 설정 부분에 앱 ID있으므로 위의 코드에 삽입
--> 안드로이드와 IOS각각 키가 다르므로 각각 생성하여 ID를 가져와야함
3. 광고 단위 만들기
가로배너, 전면배너, 리워드 배너 등등 어떤 종류의 광고를 넣을지 선택
--> 선택시 해당 광고에 대한 코드를 줌
--> 이 코드를 태그로써 넣는 것으로 해당 광고가 앱에 등장하게 됨
--> 2번에서 IOS와 안드로이드 각각 생성했으므로 광고 단위도 각각 만들어 코드를 받아와야함
4. 태그를 통해 광고를 삽입
......
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, Platform} from 'react-native';
// 리액트 네이티브에서 OS를 판단하기 위해 Platform도구를 가져옴
......
......
import {
setTestDeviceIDAsync,
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded
} from 'expo-ads-admob';
//expo-ads-admob 도구 상자에서 광고 단위에 맞는 도구들을 import함 --> 이번에는 가로배너이므로 AdMobBanner를 태그로 사용
//만약에 리워드 배너였다면 AdMobRewarded가 태그로 쓰이는 등 이런식임
......
......
return ready ? <Loading/> : (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
<StatusBar style="black" />
{/* <Text style={styles.title}>나만의 꿀팁</Text> */}
<Text style={styles.weather}>오늘의 날씨: {weather.temp + '°C ' + weather.condition} </Text>
<TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('AboutPage')}}>
<Text style={styles.aboutButtonText}>소개 페이지</Text>
</TouchableOpacity>
<Image style={styles.mainImage} source={main}/>
<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton01} onPress={()=>{category('생활')}}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton02} onPress={()=>{category('재테크')}}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton03} onPress={()=>{category('반려견')}}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton04} onPress={()=>{navigation.navigate('LikePage')}}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
</ScrollView>
<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>
</ScrollView>
);
}
......하단부의 해당 코드가 광고를 삽입하는 부분
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}
/>
)}--> AdMobBanner라는 태그를 사용하여 광고 삽입
--> 3번의 광고 삽입시에 받은 코드를 adUnitID 속성부분에 넣음
--> Platform.OS 코드를 통해 OS를 확인하여,
IOS일 경우 IOS의 광고 배너가,
안드로이드일 경우 안드로이드의 광고 배너가,
삽입되도록 삼항 연산자로 구성
--> IOS에 해당하는 태그엔 IOS 광고배너코드를
--> 안드로이드에 해당하는 태그엔 안드로이드 광고배너코드를 삽입
[즉, AdMob에서는 광고에 대해 2개의 코드를 받으며,
AdMob을 사용하겠다고 선언하기 위한 코드, 즉 광고 생성시 받는 코드는 1번에 해당하는부분에,
어떤 종류의 광고인지와 관련된, 광고 단위를 만들고 난 후에 받는 코드는 4번에 해당하는 부분에 넣으면 된다.]
