> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/react-native/undefined-5.md).

# 네이티브 광고

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

* AdPopcornSSP 광고의 경우 기본이 템플릿 사용이며, 템플릿 사용 안할 경우, 기본 템플릿 제공
* AdFit, NAM 만 미디에이션으로 지원
* 각 광고 업체 별 아래의 특징에 맞게 nativeWidth, nativeHeight을 지정해야 합니다.

{% hint style="info" %}

* AdPopcornSSP : 애드팝콘에서 제공하는 광고는 템플릿으로 제공되며, 템플릿에 따른 크기보다 크게 영역을 지정해야 합니다.
* AdFit 비즈보드 : 지정한 영역 내에서 AdFit 광고 비율에 맞게 노출됩니다.
* NAM SimpleAd : 지정한 영역 내에서 NAM이 제공하는 광고 비율에 맞게 노출됩니다.
  {% endhint %}

## 1. 네이티브 광고 연동

네이티브 광고를 노출하고자 할 경우, `AdPopcornNative` 컴포넌트를 사용합니다.

```javascript
import { AdPopcornNative } from 'react-native-adpopcorn-ssp';

<AdPopcornNative
  appKey="YOUR_APP_KEY"
  placementId="YOUR_PLACEMENT_ID"
  nativeWidth={360}
  nativeHeight={100}
  onNativeAdLoadSuccess={(e) => console.log('네이티브 로드 성공:', e.placementId)}
  onNativeAdLoadFailed={(e) => console.log('네이티브 로드 실패:', e.errorMessage)}
  onNativeImpression={(e) => console.log('네이티브 노출:', e.placementId)}
  onNativeClicked={(e) => console.log('네이티브 클릭:', e.placementId)}
/>
```

{% hint style="warning" %} <mark style="color:red;">`appKey, placementId, nativeWidth, nativeHeight`</mark> 필수로 세팅해 주어야 광고가 요청됩니다.
{% endhint %}

## 2. 지원 property

네이티브에서 지원하는 property는 다음과 같습니다.

| property     | 설명                                                                     |
| ------------ | ---------------------------------------------------------------------- |
| appKey       | [애드팝콘 SSP 페이지](https://www.console.adpopcorn.com/)에서 발급받은 앱 키          |
| placementId  | [애드팝콘 SSP 페이지](https://www.console.adpopcorn.com/)에서 발급받은 Placement Id |
| nativeWidth  | 네이티브 지면 넓이                                                             |
| nativeHeight | 네이티브 지면 높이                                                             |

## 3. 콜백 이벤트

| 이벤트                                                     | 설명                                              |
| ------------------------------------------------------- | ----------------------------------------------- |
| <mark style="color:red;">`onNativeAdLoadSuccess`</mark> | 네이티브 로딩 성공                                      |
| ㄴevent.placementId                                      | 네이티브 로딩 성공한 지면 키                                |
| <mark style="color:red;">`onNativeAdLoadFailed`</mark>  | 네이티브 로딩 실패                                      |
| ㄴevent.placementId                                      | 네이티브 로딩 실패한 지면 키                                |
| ㄴevent.errorCode                                        | 네이티브 로딩 실패 에러코드                                 |
| ㄴevent.errorMessage                                     | 네이티브 로딩 실패 에러 메시지                               |
| <mark style="color:red;">`onNativeImpression`</mark>    | 네이티브 노출                                         |
| ㄴevent.placementId                                      | 노출된 네이티브 광고 지면 키 (단, Adfit Android, iOS는 지원 안함) |
| <mark style="color:red;">`onNativeClicked`</mark>       | 네이티브 클릭                                         |
| ㄴevent.placementId                                      | 네이티브 광고 클릭한 지면 키 (단, Adfit Android는 지원 안함)      |

## 4. 샘플 코드

```javascript
import React, { useEffect } from 'react';
import { Platform, SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornNative,
  AdPopcornSSPEvents,
} from 'react-native-adpopcorn-ssp';

const APP_KEY_ANDROID = '663451319';
const APP_KEY_IOS = '397261446';

function App(): JSX.Element {
  useEffect(() => {
    // SSP 초기화 이벤트
    const initSub = AdPopcornSSP.addListener(AdPopcornSSPEvents.OnAdPopcornSSPSDKDidInitialize, () => {
      console.log('[SSP] SDK Initialized');
    });

    // SDK 초기화
    const appKey = Platform.OS === 'ios' ? APP_KEY_IOS : APP_KEY_ANDROID;
    AdPopcornSSP.init(appKey);

    return () => {
      initSub.remove();
    };
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic" contentContainerStyle={{ paddingBottom: 100 }}>
        <Text style={styles.title}>AdPopcorn SSP Example</Text>
        
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Native Ad</Text>
          <View style={{ width: 360, height: 185 }}>
            <AdPopcornNative
              appKey={Platform.OS === 'ios' ? APP_KEY_IOS : APP_KEY_ANDROID}
              placementId={Platform.OS === 'ios' ? 'iOS_NATIVE' : 'NATIVE'}
              nativeWidth={360}
              nativeHeight={185}
              onNativeAdLoadSuccess={(e) => console.log('[Native] LoadSuccess:', e.placementId)}
              onNativeAdLoadFailed={(e) => console.log('[Native] LoadFailed:', e.placementId, e.errorCode, e.errorMessage)}
              onNativeImpression={(e) => console.log('[Native] Impression:', e.placementId)}
              onNativeClicked={(e) => console.log('[Native] Clicked:', e.placementId)}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
```