카드를 클릭하면, 그 카드의 상세 정보 화면이 나타나기 전에 잠깐 나오는 전면 광고를 추가해보았다.
게임하거나 어플 쓰면서 가장 킹받는 광고
Card.js
.
.
.
import { StyleSheet, ... , Platform, Alert } 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에 들어오자마자 전면 광고 준비하느라 useEffect에 설정
//애드몹도 외부 API 이므로 실행 순서를 지키기위해 async/await 사용!
//안드로이드와 IOS 각각 광고 준비 키가 다르기 때문에 디바이스 성격에 따라 다르게 초기화 시켜줘야 합니다.
Platform.OS === "ios"
? AdMobInterstitial.setAdUnitID("iOS 앱 광고 ID")
: AdMobInterstitial.setAdUnitID("Android 앱 광고 ID");
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 () => {
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true });
await AdMobInterstitial.showAdAsync();
};
return (
//카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOpacity를 사용
<TouchableOpacity
style={styles.card}
onPress={() => {
goDetail();
}}
>
.
.
.
useEffect(() => {
Platform.OS === "ios"
? AdMobInterstitial.setAdUnitID("iOS 앱 광고 ID")
: AdMobInterstitial.setAdUnitID("Android 앱 광고 ID");
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 () => {
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true });
await AdMobInterstitial.showAdAsync();
};
AdMobInterstitial.addEventListener("interstitialDidClose", () => {
//광고가 끝나면 상세정보 페이지로 이동!
console.log("interstitialDidClose");
navigation.navigate("DetailPage", { idx: content.idx });
});