React-Native Plugin 연동 가이드

1. 설치

npm 설치 (v1.0.0)

npm install [email protected]

iOS 추가 설정

cd ios && pod install

Android 추가 설정

android/build.gradle에 maven 저장소 추가:

allprojects {
    repositories {
        maven { url 'https://repository.igaworks.com/maven' }
    }
}

기존 수동 설치 사용자: 기존 수동 설치 파일을 삭제 후 npm을 통해 설치해 주시기 바랍니다.

2. 기본 코드 연동

Import

import {
  AdPopcornSSP,
  AdPopcornSSPEvents,
} from 'react-native-adpopcorn-ssp';

SDK 초기화

AdPopcornSSP.init('media_app_key');

유저정보 세팅

AdPopcornSSP.setUserId('your-user-id');

초기화 완료 이벤트

SDK 초기화 완료 후 광고 인스턴스를 생성해야 합니다.

const initListener = AdPopcornSSP.addListener(
  AdPopcornSSPEvents.OnAdPopcornSSPSDKDidInitialize,
  () => {
    console.log('SDK 초기화 완료');
    // 광고 인스턴스 생성
  },
);

3. 배너 광고 (Banner Ad)

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

Import

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

Props

| Props | 타입 | 필수 | 설명 | |---|---|---|---| | appKey | string | ✅ | 앱키 | | placementId | string | ✅ | 광고 지면 ID | | adSize | string | ✅ | 배너 크기 (320x50, 320x100, 300x250, AdaptiveSize) | | refreshTime | number | | 배너 갱신 주기 (초, 기본값: 30) | | networkScheduleTimeout | number | | 네트워크 타임아웃 (초, 기본값: 10) | | bannerAnimType | string | | 애니메이션 (FADE_IN, SLIDE_LEFT, SLIDE_RIGHT, TOP_SLIDE, BOTTOM_SLIDE, CIRCLE, NONE) | | autoBgColor | boolean | | 자동 배경색 (기본값: false) | | onBannerAdReceiveSuccess | (event) => void | | 로드 성공 콜백 | | onBannerAdReceiveFailed | (event) => void | | 로드 실패 콜백 (errorCode, errorMessage) | | onBannerAdClicked | (event) => void | | 클릭 콜백 | | style | ViewStyle | | 추가 스타일 |

4. 네이티브 광고 (Native Ad)

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

Import

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

Props

| Props | 타입 | 필수 | 설명 | |---|---|---|---| | appKey | string | ✅ | 앱키 | | placementId | string | ✅ | 광고 지면 ID | | nativeWidth | number | ✅ | 네이티브 지면 너비 (dp) | | nativeHeight | number | ✅ | 네이티브 지면 높이 (dp) | | onNativeAdLoadSuccess | (event) => void | | 로드 성공 콜백 | | onNativeAdLoadFailed | (event) => void | | 로드 실패 콜백 (errorCode, errorMessage) | | onNativeImpression | (event) => void | | 노출 콜백 | | onNativeClicked | (event) => void | | 클릭 콜백 | | style | ViewStyle | | 추가 스타일 |

5. 전면 광고 (Interstitial Ad)

Import

import {
  AdPopcornInterstitialAd,
  AdPopcornInterstitialAdEvents,
} from 'react-native-adpopcorn-ssp';

인스턴스 생성

SDK 초기화 완료 후 호출합니다.

AdPopcornInterstitialAd.createInstance('YOUR_APP_KEY', 'YOUR_PLACEMENT_ID');

광고 로드/노출

AdPopcornInterstitialAd.loadAd('YOUR_PLACEMENT_ID');
AdPopcornInterstitialAd.showAd('YOUR_PLACEMENT_ID');

배경색 설정

AdPopcornInterstitialAd.setAdPopcornAdBackgroundColor('YOUR_PLACEMENT_ID', '#ff0000');

이벤트 리스너

| 이벤트 | 설명 | 콜백 데이터 | |---|---|---| | OnInterstitialLoaded | 로드 성공 | placementId | | OnInterstitialReceiveFailed | 로드 실패 | placementId, errorCode, errorMessage | | OnInterstitialOpened | 노출 성공 | placementId | | OnInterstitialOpenFailed | 노출 실패 | placementId, errorCode, errorMessage | | OnInterstitialClosed | 닫힘 | placementId | | OnInterstitialClicked | 클릭 | placementId |

const loadedListener = AdPopcornInterstitialAd.addListener(
  AdPopcornInterstitialAdEvents.OnInterstitialLoaded,
  (event) => {
    console.log('전면 광고 로드 완료:', event.placementId);
    AdPopcornInterstitialAd.showAd(event.placementId);
  },
);

// 컴포넌트 언마운트 시
loadedListener.remove();

6. 전면 비디오 광고 (Interstitial Video Ad)

Import

import {
  AdPopcornInterstitialVideoAd,
  AdPopcornInterstitialVideoAdEvents,
} from 'react-native-adpopcorn-ssp';

인스턴스 생성

AdPopcornInterstitialVideoAd.createInstance('YOUR_APP_KEY', 'YOUR_PLACEMENT_ID');

광고 로드/노출

AdPopcornInterstitialVideoAd.loadAd('YOUR_PLACEMENT_ID');
AdPopcornInterstitialVideoAd.showAd('YOUR_PLACEMENT_ID');

이벤트 리스너

| 이벤트 | 설명 | 콜백 데이터 | |---|---|---| | OnInterstitialVideoAdLoaded | 로드 성공 | placementId | | OnInterstitialVideoAdLoadFailed | 로드 실패 | placementId, errorCode, errorMessage | | OnInterstitialVideoAdOpened | 노출 성공 | placementId | | OnInterstitialVideoAdOpenFalied | 노출 실패 | placementId | | OnInterstitialVideoAdClosed | 닫힘 | placementId | | OnInterstitialVideoAdClicked | 클릭 | placementId |

const loadedListener = AdPopcornInterstitialVideoAd.addListener(
  AdPopcornInterstitialVideoAdEvents.OnInterstitialVideoAdLoaded,
  (event) => {
    console.log('전면 비디오 로드 완료:', event.placementId);
    AdPopcornInterstitialVideoAd.showAd(event.placementId);
  },
);

7. 리워드 비디오 광고 (Reward Video Ad)

Import

import {
  AdPopcornRewardVideoAd,
  AdPopcornRewardVideoAdEvents,
} from 'react-native-adpopcorn-ssp';

인스턴스 생성

AdPopcornRewardVideoAd.createInstance('YOUR_APP_KEY', 'YOUR_PLACEMENT_ID');

광고 로드/노출

AdPopcornRewardVideoAd.loadAd('YOUR_PLACEMENT_ID');
AdPopcornRewardVideoAd.showAd('YOUR_PLACEMENT_ID');

이벤트 리스너

| 이벤트 | 설명 | 콜백 데이터 | |---|---|---| | OnRewardVideoAdLoaded | 로드 성공 | placementId | | OnRewardVideoAdLoadFailed | 로드 실패 | placementId, errorCode, errorMessage | | OnRewardVideoAdOpened | 노출 성공 | placementId | | OnRewardVideoAdOpenFalied | 노출 실패 | placementId | | OnRewardVideoAdClosed | 닫힘 | placementId | | OnRewardVideoAdClicked | 클릭 | placementId | | OnRewardVideoPlayCompleted | 재생 완료 | placementId | | OnRewardPlusCompleted | 리워드+ 완료 | resultCode, reward |

const loadedListener = AdPopcornRewardVideoAd.addListener(
  AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoaded,
  (event) => {
    console.log('리워드 비디오 로드 완료:', event.placementId);
    AdPopcornRewardVideoAd.showAd(event.placementId);
  },
);

const completedListener = AdPopcornRewardVideoAd.addListener(
  AdPopcornRewardVideoAdEvents.OnRewardVideoPlayCompleted,
  (event) => {
    console.log('리워드 비디오 재생 완료 - 리워드 지급:', event.placementId);
  },
);

8. 샘플 코드

import React, { useEffect } from 'react';
import { View, Button, Platform } from 'react-native';
import {
  AdPopcornSSP,
  AdPopcornSSPEvents,
  AdPopcornBanner,
  AdPopcornNative,
  AdPopcornInterstitialAd,
  AdPopcornInterstitialAdEvents,
  AdPopcornRewardVideoAd,
  AdPopcornRewardVideoAdEvents,
} from 'react-native-adpopcorn-ssp';

const APP_KEY = 'YOUR_APP_KEY';

function App(): JSX.Element {
  useEffect(() => {
    const initListener = AdPopcornSSP.addListener(
      AdPopcornSSPEvents.OnAdPopcornSSPSDKDidInitialize,
      () => {
        AdPopcornInterstitialAd.createInstance(APP_KEY, 'INTERSTITIAL');
        AdPopcornRewardVideoAd.createInstance(APP_KEY, 'REWARD_VIDEO');
      },
    );

    const interstitialListener = AdPopcornInterstitialAd.addListener(
      AdPopcornInterstitialAdEvents.OnInterstitialLoaded,
      (event) => console.log('전면 로드 완료:', event.placementId),
    );

    const rewardListener = AdPopcornRewardVideoAd.addListener(
      AdPopcornRewardVideoAdEvents.OnRewardVideoAdLoaded,
      (event) => console.log('리워드 로드 완료:', event.placementId),
    );

    AdPopcornSSP.init(APP_KEY);
    AdPopcornSSP.setUserId('your-user-id');

    return () => {
      initListener.remove();
      interstitialListener.remove();
      rewardListener.remove();
    };
  }, []);

  return (
    <View>
      <Button title="전면 로드" onPress={() => AdPopcornInterstitialAd.loadAd('INTERSTITIAL')} />
      <Button title="전면 노출" onPress={() => AdPopcornInterstitialAd.showAd('INTERSTITIAL')} />
      <Button title="리워드 로드" onPress={() => AdPopcornRewardVideoAd.loadAd('REWARD_VIDEO')} />
      <Button title="리워드 노출" onPress={() => AdPopcornRewardVideoAd.showAd('REWARD_VIDEO')} />

      <AdPopcornBanner
        appKey={APP_KEY}
        placementId="BANNER_320x50"
        adSize="320x50"
        onBannerAdReceiveSuccess={(e) => console.log('배너 로드:', e.placementId)}
      />

      <AdPopcornNative
        appKey={APP_KEY}
        placementId="NATIVE"
        nativeWidth={360}
        nativeHeight={100}
        onNativeAdLoadSuccess={(e) => console.log('네이티브 로드:', e.placementId)}
      />
    </View>
  );
}

export default App;

9. 미디에이션 설정

미디에이션 어댑터는 매체사 앱에서 직접 추가합니다.

Android

app/build.gradle에 필요한 미디에이션 어댑터 추가:

dependencies {
    // Google AdMob
    implementation 'com.google.android.gms:play-services-ads:24.8.0'
    // Unity Ads
    implementation 'com.unity3d.ads:unity-ads:4.18.1'
    // Kakao AdFit
    implementation 'com.kakao.adfit:ads-base:3.21.10'
    // 기타 필요한 어댑터...
}

iOS

Podfile에 필요한 미디에이션 pod 추가:

pod 'GoogleMobileAdsMediationAdPopcornSSP'
# 기타 필요한 pod...

10. 지원 플랫폼

• Android: minSdkVersion 21+
• iOS: 12.0+
• React Native: 0.60.0+