네이티브 광고

네이티브 광고는 광고가 게재되는 사용자 환경의 형식 및 기능에 맞춰 자동으로 최적화되어 출력 됩니다.

리액트 네이티브 환경에서는 네이티브 광고 연동 시 아래의 제약 사항이 포함됩니다.

• AdPopcornSSP 광고의 경우 기본이 템플릿 사용이며, 템플릿 사용 안할 경우, 기본 템플릿 제공

• AdFit, NAM 만 미디에이션으로 지원

• 각 광고 업체 별 아래의 특징에 맞게 nativeWidth, nativeHeight을 지정해야 합니다.

• AdPopcornSSP : 애드팝콘에서 제공하는 광고는 템플릿으로 제공되며, 템플릿에 따른 크기보다 크게 영역을 지정해야 합니다.

• AdFit 비즈보드 : 지정한 영역 내에서 AdFit 광고 비율에 맞게 노출됩니다.

• NAM SimpleAd : 지정한 영역 내에서 NAM이 제공하는 광고 비율에 맞게 노출됩니다.

1. 네이티브 광고 연동

기본 설정에서 추가한 AdpopcornNative.tsx 를 이용하여, 네이티브를 연동해줍니다.

JavaScript

<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. 샘플 코드

JavaScript

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는 다음과 같습니다.

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는 지원 안함)