네이티브 광고
네이티브 광고는 광고가 게재되는 사용자 환경의 형식 및 기능에 맞춰 자동으로 최적화되어 출력 됩니다.
리액트 네이티브 환경에서는 네이티브 광고 연동 시 아래의 제약 사항이 포함됩니다.
AdPopcornSSP 광고의 경우 기본이 템플릿 사용이며, 템플릿 사용 안할 경우, 기본 템플릿 제공
AdFit, NAM 만 미디에이션으로 지원
각 광고 업체 별 아래의 특징에 맞게 nativeWidth, nativeHeight을 지정해야 합니다.
1. 네이티브 광고 연동
기본 설정에서 추가한 AdpopcornNative.tsx
를 이용하여, 네이티브를 연동해줍니다.
<AdPopcornNative
appKey="663451319"
placementId="PLACEMENT_ID"
nativeWidth={384}
nativeHeight={100}
onNativeAdLoadSuccess={(event) => { console.log('app.tx onNativeAdLoadSuccess : ' + event.placementId) }}
onNativeAdLoadFailed={(event) => { console.log('app.tx onNativeAdLoadFailed : ' + event.placementId) }}
onNativeClicked={(event) => { console.log('app.tx onNativeClicked : ' + event.placementId) }}
/>
appKey, placementId, nativeWidth, nativeHeight
필수로 세팅해 주어야 광고가 요청됩니다.
2. 샘플 코드
import React, { useEffect } from 'react';
import {
NativeModules,
NativeEventEmitter
} from 'react-native';
import AdPopcornBanner from './src/ads/adpopcornssp/AdPopcornBanner';
function App(): JSX.Element {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
RNAdPopcornSSPModule.init('your app key');
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={backgroundStyle.backgroundColor}
/>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<AdPopcornNative
appKey="663451319"
placementId="PLACEMENT_ID"
nativeWidth={384}
nativeHeight={100}
onNativeAdLoadSuccess={(event) => { console.log('app.tx onNativeAdLoadSuccess : ' + event.placementId) }}
onNativeAdLoadFailed={(event) => { console.log('app.tx onNativeAdLoadFailed : ' + event.placementId) }}
onNativeClicked={(event) => { console.log('app.tx onNativeClicked : ' + event.placementId) }}
/>
</ScrollView>
</SafeAreaView>
);
}
3. 지원 property
네이티브에서 지원하는 property는 다음과 같습니다.
appKey
애드팝콘 SSP 페이지에서 발급받은 앱 키
placementId
애드팝콘 SSP 페이지에서 발급받은 Placement Id
nativeWidth
네이티브 지면 넓이
nativeHeight
네이티브 지면 높이
4. 콜백 이벤트
onNativeAdLoadSuccess
네이티브 로딩 성공
ㄴevent.placementId
네이티브 로딩 성공한 지면 키
onNativeAdLoadFailed
네이티브 로딩 실패
ㄴevent.placementId
네이티브 로딩 실패한 지면 키
ㄴevent.errorCode
네이티브 로딩 실패 에러코드
ㄴevent.errorMessage
네이티브 로딩 실패 에러 메시지
onNativeImpression
네이티브 노출
ㄴevent.placementId
노출된 네이티브 광고 지면 키 (단, Adfit Android, iOS는 지원 안함)
onNativeClicked
네이티브 클릭
ㄴevent.placementId
네이티브 광고 클릭한 지면 키 (단, Adfit Android는 지원 안함)
Last updated
Was this helpful?