Appearance
showAdMobInterstitialAd
앱 화면 전체를 덮는 전면 광고를 사용자에게 노출해요. 이 함수는 loadAdMobInterstitialAd
로 미리 불러온 광고를 실제로 사용자에게 노출해요.
시그니처
typescript
function showAdMobInterstitialAd(params: ShowAdMobInterstitialAdParams): typeof noop;
파라미터
- params필수 · ShowAdMobInterstitialAdParams
광고를 보여주기 위해 사용할 설정 값이에요. 광고 ID와과 광고의 동작에 대한 콜백을 설정할 수 있어요.
- params.options필수 · ShowAdMobInterstitialAdOptions
광고를 보여줄 때 전달할 옵션 객체예요.
- params.options.adUnitId필수 · string
광고 단위 ID예요.
loadAdMobInterstitialAd
로 불러온 전면 광고용 ID를 입력해요.
- params.options.adUnitId필수 · string
- params.onEvent(event: ShowAdMobInterstitialAdEvent) => void
광고 관련 이벤트가 발생했을 때 호출돼요. (예시: 광고 노출을 요청했을 때). 자세한 이벤트 타입은 ShowAdMobInterstitialAdEvent를 참고하세요.
- params.onError(reason: unknown) => void
광고를 노출하지 못했을 때 호출돼요. (예시: 네트워크 오류나 지원하지 않는 환경일 때)
- params.options필수 · ShowAdMobInterstitialAdOptions
프로퍼티
- isSupported() => boolean
현재 실행 중인 앱(예: 토스 앱, 개발용 샌드박스 앱 등)에서 Google AdMob 광고 기능을 지원하는지 확인하는 함수예요. 기능을 사용하기 전에 지원 여부를 확인해야 해요.
예제
버튼 눌러 불러온 전면 광고 보여주기
tsx
import { GoogleAdMob } from '@apps-in-toss/framework';
import { useFocusEffect } from '@react-native-bedrock/native/@react-navigation/native';
import { useCallback, useState } from 'react';
import { Button, Text, View } from 'react-native';
import { useNavigation } from 'react-native-bedrock';
const AD_UNIT_ID = '<AD_UNIT_ID>';
export function GoogleAdmobInterstitialAdExample() {
const [adLoadStatus, setAdLoadStatus] = useState<'not_loaded' | 'loaded' | 'failed'>('not_loaded');
const navigation = useNavigation();
const loadAd = useCallback(() => {
if (GoogleAdMob.loadAdMobInterstitialAd.isSupported() !== true) {
return;
}
const cleanup = GoogleAdMob.loadAdMobInterstitialAd({
options: {
adUnitId: AD_UNIT_ID,
},
onEvent: (event) => {
switch (event.type) {
case 'loaded':
console.log('광고 로드 성공', event.data);
setAdLoadStatus('loaded');
break;
case 'clicked':
console.log('광고 클릭');
break;
case 'dismissed':
console.log('광고 닫힘');
navigation.navigate('/examples/google-admob-interstitial-ad-landing');
break;
case 'failedToShow':
console.log('광고 보여주기 실패');
break;
case 'impression':
console.log('광고 노출');
break;
case 'show':
console.log('광고 컨텐츠 보여졌음');
break;
}
},
onError: (error) => {
console.error('광고 불러오기 실패', error);
},
});
return cleanup;
}, [navigation]);
const showAd = useCallback(() => {
if (GoogleAdMob.showAdMobInterstitialAd.isSupported() !== true) {
return;
}
GoogleAdMob.showAdMobInterstitialAd({
options: {
adUnitId: AD_UNIT_ID,
},
onEvent: (event) => {
switch (event.type) {
case 'requested':
console.log('광고 보여주기 요청 완료');
break;
}
},
onError: (error) => {
console.error('광고 보여주기 실패', error);
},
});
}, []);
useFocusEffect(loadAd);
return (
<View>
<Text>
{adLoadStatus === 'not_loaded' && '광고 로드 하지 않음 '}
{adLoadStatus === 'loaded' && '광고 로드 완료'}
{adLoadStatus === 'failed' && '광고 로드 실패'}
</Text>
<Button title="Show Ad" onPress={showAd} disabled={adLoadStatus !== 'loaded'} />
</View>
);
}