# 배너 광고

## 1. 배너 광고 연동

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

{% code title="JavaScript" %}

```javascript
<AdPopcornBanner
                appKey="663451319"
                placementId="BANNER_320x50"
                adSize="320x50"
                refreshTime={15}
                networkScheduleTimeout={20}
                bannerAnimType="FADE_IN"
                autoBgColor={false}
                onBannerAdReceiveSuccess={(event) => { console.log('app.tx onBannerAdReceiveSuccess : ' + event.placementId) }}
                onBannerAdReceiveFailed={(event) => { console.log('app.tx onBannerAdReceiveFailed : ' + event.placementId) }}
                onBannerAdClicked={(event) => { console.log('app.tx onBannerAdClicked : ' + event.placementId) }}
              />
```

{% endcode %}

{% hint style="warning" %} <mark style="color:red;">`appKey`</mark>, <mark style="color:red;">`placementId`</mark>, <mark style="color:red;">`adSize`</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 />
	    <AdPopcornBanner
                appKey="663451319"
                placementId="BANNER_320x50"
                adSize="320x50"
                refreshTime={15}
                networkScheduleTimeout={20}
                bannerAnimType="FADE_IN"
                autoBgColor={false}
                onBannerAdReceiveSuccess={(event) => { console.log('app.tx onBannerAdReceiveSuccess : ' + event.placementId) }}
                onBannerAdReceiveFailed={(event) => { console.log('app.tx onBannerAdReceiveFailed : ' + event.placementId) }}
                onBannerAdClicked={(event) => { console.log('app.tx onBannerAdClicked : ' + event.placementId) }}
             />
      </ScrollView>
    </SafeAreaView>
  );
}
```

{% endcode %}

## 3. 배너 광고 property

배너에서 지원하는 property는 다음과 같습니다.

<table><thead><tr><th width="277">property</th><th>설명</th></tr></thead><tbody><tr><td>appKey</td><td><a href="https://www.console.adpopcorn.com/">애드팝콘 SSP 페이지</a>에서 발급받은 앱 키</td></tr><tr><td>placementId</td><td><a href="https://www.console.adpopcorn.com/">애드팝콘 SSP 페이지</a>에서 발급받은 Placement ID</td></tr><tr><td>adSize</td><td>지면 사이즈 (‘320x50’, ‘320x100’, ‘300x250’ , ‘AdaptiveSize’)</td></tr><tr><td>refreshTime</td><td>지면 자동 갱신 시간</td></tr><tr><td>networkScheduleTimeout</td><td>미디에이션 타임아웃 시간</td></tr><tr><td>bannerAnimType</td><td>광고 갱신 시 애니메이션 타입('FADE_IN', 'SLIDE_LEFT', 'SLIDE_RIGHT', 'TOP_SLIDE', 'BOTTOM_SLIDE', 'CIRCLE','NONE')</td></tr><tr><td>autoBgColor</td><td>광고 이외의 백그라운드 색상 채움 기능</td></tr></tbody></table>

## 4. 콜백 이벤트

| 이벤트 리스너                                                    | 설명                                      |
| ---------------------------------------------------------- | --------------------------------------- |
| <mark style="color:red;">`OnBannerAdReceiveSuccess`</mark> | 배너 광고 로딩 성공                             |
| ㄴ event.placementId                                        | 배너 로딩 성공한 지면 키                          |
| <mark style="color:red;">`OnBannerAdReceiveFailed`</mark>  | 배너 광고 로딩 실패 (전달되는 에러코드는 아티클 하단의 테이블 참고) |
| ㄴ event.placementId                                        | 배너 로딩 실패한 지면 키                          |
| ㄴ event.errorCode                                          | 배너 로딩 실패 에러코드                           |
| ㄴ event.errorMessage                                       | 배너 로딩 실패 에러 메시지                         |
| <mark style="color:red;">`OnBannerAdClicked`</mark>        | 배너 클릭 시                                 |
| ㄴ event.placementId                                        | 배너 클릭한 지면 키                             |


---

# 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-1.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.