# 네이티브 광고

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

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

{% hint style="info" %}

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

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

기본 설정에서 추가한 <mark style="color:red;">`AdpopcornNative.tsx`</mark> 를 이용하여, 네이티브를 연동해줍니다.

{% code title="JavaScript" %}

```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) }}
              />
```

{% endcode %}

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

## 2. 샘플 코드

{% code title="JavaScript" %}

```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>
  );
}
```

{% endcode %}

## 3. 지원 property

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

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

## 4. 콜백 이벤트

| 이벤트                                                     | 설명                                              |
| ------------------------------------------------------- | ----------------------------------------------- |
| <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는 지원 안함)      |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adpopcornssp.gitbook.io/ssp-sdk/sdk/react-native-beta/undefined-5.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.