React Native 전면 광고

전체 화면을 덮는 형태의 광고입니다. 화면 전환 시점이나 자연스러운 전환 포인트에서 표시합니다.

시작하기 전에

1. React Native SDK 설정을 완료하세요.

2. Adrop 콘솔에 배너 광고 유닛을 생성하고 Unit ID를 확인하세요.

1

광고 Unit ID 준비하기

Adrop 콘솔에서 생성한 광고 유닛 ID를 준비하세요. 개발 중에는 테스트 ID를 사용할 수 있습니다.

// 테스트용 Unit ID
const unitId = "PUBLIC_TEST_UNIT_ID_INTERSTITIAL"

// 프로덕션용 Unit ID (콘솔에서 발급)
const unitId = "YOUR_UNTI_ID" 

테스트 Unit ID 목록

형식	테스트 Unit ID
Interstitial	PUBLIC_TEST_UNIT_ID_INTERSTITIAL

주의: 테스트 Unit ID는 개발 중에만 사용하세요. 앱 출시 전 반드시 콘솔에서 발급받은 실제 Unit ID로 교체해야 합니다.

2

사용 방법

전면 광고는 두 가지 방법으로 구현할 수 있습니다.

1. Hook 방식

import React from 'react';
import { View, Button } from 'react-native';
import { useAdropInterstitialAd } from 'adrop-ads-react-native';

const InterstitialExample = () => {
  const {
    load,
    show,
    reset,
    isLoaded,
    isReady,
    errorCode,
  } = useAdropInterstitialAd('YOUR_UNIT_ID');

  const handleLoad = () => {
    if (isReady) {
      load();
    }
  };

  return (
    <View>
      <Button title="광고 로드" onPress={handleLoad} />
      <Button
        title="광고 표시"
        onPress={show}
        disabled={!isLoaded}
      />
      <Button title="리셋" onPress={reset} />
    </View>
  );
};

hook 반환값

속성	타입	설명
load	() ⇒ void	광고 로드
show	() ⇒ void	광고 표시
reset	() ⇒ void	광고 인스턴스 초기화
isReady	boolean	광고 준비 여부
isLoaded	boolean	광고 로드 여부
isOpened	boolean	광고 표시 여부
isClosed	boolean	광고 닫힘 여부
isClicked	boolean	광고 클릭 여부
errorCode	string | undefined	에러 코드

2. Class 방식

import React, { useEffect, useState, useMemo } from 'react';
import { View, Button } from 'react-native';
import { AdropInterstitialAd, type AdropListener } from 'adrop-ads-react-native';

const InterstitialClassExample = () => {
  const [interstitialAd, setInterstitialAd] = useState<AdropInterstitialAd>();
  const [isLoaded, setIsLoaded] = useState(false);

  const listener: AdropListener = useMemo(() => ({
    onAdReceived: (ad) => {
      console.log('광고 로드됨:', ad.unitId);
      setIsLoaded(true);
    },
    onAdFailedToReceive: (ad, errorCode) => {
      console.log('광고 로드 실패:', errorCode);
    },
    onAdDidPresentFullScreen: (ad) => {
      console.log('광고 표시됨');
    },
    onAdDidDismissFullScreen: (ad) => {
      console.log('광고 닫힘');
    },
    onAdClicked: (ad) => {
      console.log('광고 클릭됨');
    },
  }), []);

  useEffect(() => {
    const ad = new AdropInterstitialAd('YOUR_UNIT_ID');
    ad.listener = listener;
    setInterstitialAd(ad);

    return () => {
      ad.destroy();
    };
  }, [listener]);

  const handleLoad = () => interstitialAd?.load();
  const handleShow = () => interstitialAd?.show();

  return (
    <View>
      <Button title="광고 로드" onPress={handleLoad} />
      <Button title="광고 표시" onPress={handleShow} disabled={!isLoaded} />
    </View>
  );
};

AdropInterstitialAd 클래스

Properties

Parameter	Type	Description
unitId	STRING	광고 Unit ID
isLoaded	BOOLEAN	광고 로드 여부
creativeId	STRING	광고 소재 ID
txId	STRING	광고 트랜잭션 ID
campaignId	STRING	캠페인 ID
destinationURL	STRING	클릭 시 이동 URL
listener	AdropListener	이벤트 리스너

AdropListener 인터페이스

type AdropListener = {
  onAdReceived?: (ad: AdropAd) => void;   // 광고 로드 성공
  onAdClicked?: (ad: AdropAd) => void;    // 광고 클릭
  onAdImpression?: (ad: AdropAd) => void; // 광고 화면 노출
  onAdFailedToReceive?: (ad: AdropAd, errorCode?: string) => void; // 광고 로드 실패
  onAdDidPresentFullScreen?: (ad: AdropAd) => void;  // 광고 전면 노출
  onAdWillPresentFullScreen?: (ad: AdropAd) => void; // 광고 전면 노출 예정 (iOS only)
  onAdDidDismissFullScreen?: (ad: AdropAd) => void;  // 광고 닫힘
  onAdWillDismissFullScreen?: (ad: AdropAd) => void; // 광고 닫힘 예정 (iOS only)
  onAdFailedToShowFullScreen?: (ad: AdropAd, errorCode?: string) => void; // 광고 전면 노출 실패
};

광고 로드 실패, 전면 노출 실패 시, AdropErrorCode 를 확인해주세요

---

광고 로드 및 표시 흐름

1. useAdropInterstitialAd(unitId) 또는 new AdropInterstitialAd(unitId)
   ↓
2. isReady === true 확인
   ↓
3. load() 호출
   ↓
4. onAdReceived 콜백 또는 isLoaded === true
   ↓
5. show() 호출
   ↓
6. onAdDidPresentFullScreen 콜백 또는 isOpened === true
   ↓
7. 사용자가 광고 닫음
   ↓
8. onAdDidDismissFullScreen 콜백 또는 isClosed === true
   ↓
9. 새 광고 필요시 reset() 호출 후 2번부터 반복

주의 사항

• 광고는 로드 후에만 표시 할 수 있습니다.

• 한 번 표시된 광고는 재사용 불가합니다.

• 컴포넌트 언마운트 시 반드시 destroy() 를 호출하여 리소스를 해제하세요.

• Hook 사용 시 내부에서 자동으로 destroy를 처리합니다.