> 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-1.md).

# 배너 광고

## 1. 배너 광고 연동

배너 광고를 노출하고자 할 경우, `AdPopcornBanner` 컴포넌트를 사용합니다.

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

<AdPopcornBanner
    appKey="YOUR_APP_KEY"
    placementId="YOUR_PLACEMENT_ID"
    adSize="320x50"
    refreshTime={30}
    bannerAnimType="FADE_IN"
    onBannerAdReceiveSuccess={(e) => console.log('배너 로드 성공:', e.placementId)}
    onBannerAdReceiveFailed={(e) => console.log('배너 로드 실패:', e.errorMessage)}
    onBannerAdClicked={(e) => console.log('배너 클릭:', e.placementId)}
/>
```

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

## 2. 샘플 코드

```typescript
import React, { useEffect } from 'react';
import { Platform, SafeAreaView, ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornBanner,
  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}>Banner Ad</Text>
          <View style={{ width: '100%', height: 50 }}>
            <AdPopcornBanner
              appKey={Platform.OS === 'ios' ? APP_KEY_IOS : APP_KEY_ANDROID}
              placementId={Platform.OS === 'ios' ? 'iOS_BANNER_320x50' : 'BANNER_320x50'}
              adSize="320x50"
              refreshTime={15}
              bannerAnimType="FADE_IN"
              onBannerAdReceiveSuccess={(e) => console.log('[Banner] LoadSuccess:', e.placementId)}
              onBannerAdReceiveFailed={(e) => console.log('[Banner] LoadFailed:', e.placementId, e.errorCode, e.errorMessage)}
              onBannerAdClicked={(e) => console.log('[Banner] Clicked:', e.placementId)}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
```

## 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                                        | 배너 클릭한 지면 키                             |