팝업 광고

import { AdropPopupAd, type AdropPopupAdColors } from 'adrop-ads-react-native';

const popupAd = new AdropPopupAd(
  unitId: string,
  colors?: AdropPopupAdColors,
  useCustomClick?: boolean
);

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

const App: React.FC = () => {
  const [popupAd, setPopupAd] = useState<AdropPopupAd>();
  const [isLoaded, setIsLoaded] = useState(false);

  const listener: AdropListener = useMemo(() => ({
    onAdReceived: (ad: AdropPopupAd) => {
      console.log('팝업 광고 수신 완료');
      setIsLoaded(true);
    },
    onAdFailedToReceive: (_: AdropPopupAd, errorCode: any) => {
      console.log('팝업 광고 수신 실패:', errorCode);
    },
    onAdClicked: (ad: AdropPopupAd) => {
      console.log('팝업 광고 클릭');
      // 광고 클릭 시 팝업 닫기
      ad.close();
    },
  }), []);

  useEffect(() => {
    // 1. 팝업 광고 생성
    const ad = new AdropPopupAd('YOUR_POPUP_UNIT_ID');
    ad.listener = listener;
    setPopupAd(ad);

    // 2. 광고 로드
    ad.load();

    // 컴포넌트 언마운트 시 정리
    return () => {
      ad.destroy();
    };
  }, [listener]);

  // 3. 광고 표시
  const showAd = () => {
    if (popupAd && isLoaded) {
      popupAd.show();
    }
  };

  return (
    <View>
      <Button
        title="팝업 광고 표시"
        onPress={showAd}
        disabled={!isLoaded}
      />
    </View>
  );
};

export default App;

const listener: AdropListener = useMemo(() => ({
  // 광고 수신 성공
  onAdReceived: (ad: AdropPopupAd) => {
    console.log('팝업 광고 수신 완료');
    console.log('Creative ID:', ad.creativeId);
    console.log('Campaign ID:', ad.campaignId);
    // 광고가 준비되면 자동으로 표시
    ad.show();
  },

  // 광고 수신 실패
  onAdFailedToReceive: (ad: AdropPopupAd, errorCode?: any) => {
    console.log('팝업 광고 수신 실패:', errorCode);
  },

  // 광고 노출
  onAdImpression: (ad: AdropPopupAd) => {
    console.log('팝업 광고 노출됨');
    console.log('TX ID:', ad.txId);
    console.log('Destination URL:', ad.destinationURL);
  },

  // 광고 클릭
  onAdClicked: (ad: AdropPopupAd) => {
    console.log('팝업 광고 클릭:', ad.destinationURL);
    // 클릭 시 팝업 닫기
    ad.close();
  },

  // 팝업 표시 직전
  onAdWillPresentFullScreen: (ad: AdropPopupAd) => {
    console.log('팝업 광고 표시 직전');
  },

  // 팝업 표시 완료
  onAdDidPresentFullScreen: (ad: AdropPopupAd) => {
    console.log('팝업 광고 표시 완료');
  },

  // 팝업 닫히기 직전
  onAdWillDismissFullScreen: (ad: AdropPopupAd) => {
    console.log('팝업 광고 닫히기 직전');
  },

  // 팝업 닫힘
  onAdDidDismissFullScreen: (ad: AdropPopupAd) => {
    console.log('팝업 광고 닫힘');
    // 다음 광고 미리 로드
    loadNextAd();
  },

  // 팝업 표시 실패
  onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode?: any) => {
    console.log('팝업 광고 표시 실패:', errorCode);
  },
}), []);

popupAd.load();

popupAd.show();

popupAd.close();

useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

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

import { AdropPopupAd, type AdropPopupAdColors } from 'adrop-ads-react-native';

// 색상 옵션 정의
const customColors: AdropPopupAdColors = {
  closeTextColor: '#FFFFFF',                    // 닫기 버튼 색상
  hideForTodayTextColor: '#456789',             // "오늘 하루 보지 않기" 색상
  backgroundColor: 'rgba(53, 255, 63, 0.3)',    // 배경(딤) 색상
};

// 팝업 광고 생성 시 색상 적용
const popupAd = new AdropPopupAd(
  'YOUR_POPUP_UNIT_ID',
  customColors
);

const listener: AdropListener = useMemo(() => ({
  onAdReceived: (ad: AdropPopupAd) => {
    ad.show();
  },
  onAdFailedToReceive: (_: AdropPopupAd, errorCode: any) => {
    console.log('광고 수신 실패:', errorCode);
  },
  onAdClicked: (ad: AdropPopupAd) => {
    // 커스텀 클릭 처리
    console.log('광고 클릭됨:', ad.destinationURL);

    // 원하는 방식으로 URL 처리
    // 예: In-App 브라우저로 열기
    openInAppBrowser(ad.destinationURL);

    // 팝업 닫기
    ad.close();
  },
}), []);

// useCustomClick을 true로 설정
const popupAd = new AdropPopupAd(
  'YOUR_POPUP_UNIT_ID',
  undefined,  // colors
  true        // useCustomClick
);
popupAd.listener = listener;

// 개발/프로덕션 환경 분리
const POPUP_UNIT_ID = __DEV__
  ? 'PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM'  // 테스트 유닛 ID
  : 'YOUR_PRODUCTION_UNIT_ID';           // 실제 유닛 ID

const popupAd = new AdropPopupAd(POPUP_UNIT_ID);

const listener: AdropListener = {
  onAdFailedToReceive: (ad: AdropPopupAd, errorCode?: any) => {
    console.error('광고 수신 실패:', errorCode);

    switch (errorCode) {
      case AdropErrorCode.network:
        // 네트워크 오류 처리
        console.log('네트워크 연결을 확인해주세요');
        break;
      case AdropErrorCode.adNoFill:
        // 광고 인벤토리 부족
        console.log('현재 표시할 수 있는 광고가 없습니다');
        break;
      case AdropErrorCode.invalidUnit:
        // 잘못된 유닛 ID
        console.log('광고 유닛 ID를 확인해주세요');
        break;
      default:
        console.log('광고를 불러올 수 없습니다');
    }
  },

  onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode?: any) => {
    console.error('광고 표시 실패:', errorCode);

    // 다음에 다시 시도
    setTimeout(() => {
      ad.load();
    }, 30000); // 30초 후 재시도
  },
};

// ✅ 좋은 예: 앱 시작 시
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  ad.listener = {
    onAdReceived: (ad) => ad.show(),
    onAdFailedToReceive: (_, error) => console.log(error),
  };
  ad.load();

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

// ✅ 좋은 예: 콘텐츠 로드 완료 시
const onContentLoaded = () => {
  if (shouldShowPopupAd()) {
    popupAd?.show();
  }
};

// ✅ 좋은 예: 특정 이벤트 완료 시
const onAchievementUnlocked = () => {
  popupAd?.show();
};

// ❌ 나쁜 예: 사용자가 작업 중일 때
const onUserTyping = () => {
  popupAd?.show(); // 사용자 경험 저해
};

import AsyncStorage from '@react-native-async-storage/async-storage';

const LAST_SHOWN_KEY = 'popup_ad_last_shown';
const MINIMUM_INTERVAL = 3600000; // 1시간 (밀리초)

// 광고를 표시할 수 있는지 확인
const canShowAd = async (): Promise<boolean> => {
  try {
    const lastShown = await AsyncStorage.getItem(LAST_SHOWN_KEY);
    if (!lastShown) return true;

    const currentTime = Date.now();
    const lastShownTime = parseInt(lastShown, 10);

    return currentTime - lastShownTime >= MINIMUM_INTERVAL;
  } catch (error) {
    return true;
  }
};

// 광고 표시 기록
const recordAdShown = async () => {
  try {
    await AsyncStorage.setItem(LAST_SHOWN_KEY, Date.now().toString());
  } catch (error) {
    console.error('Error recording ad shown:', error);
  }
};

// 사용
const showAdIfAllowed = async () => {
  if (await canShowAd()) {
    popupAd?.show();
    await recordAdShown();
  }
};

const [isAdReady, setIsAdReady] = useState(false);

useEffect(() => {
  // 앱 시작 시 미리 로드
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  ad.listener = {
    onAdReceived: () => setIsAdReady(true),
    onAdFailedToReceive: (_, error) => console.log(error),
  };
  ad.load();

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

// 원하는 시점에 즉시 표시
const showPopupNow = () => {
  if (isAdReady) {
    popupAd?.show();
  }
};

useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

  // 정리 함수
  return () => {
    ad.destroy();
  };
}, []);

const listener: AdropListener = {
  onAdClicked: (ad: AdropPopupAd) => {
    console.log('광고 클릭:', ad.destinationURL);
    // 클릭 시 팝업 자동 닫기
    ad.close();
  },
};

// ✅ 좋은 예: 정리 함수 사용
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);

  return () => {
    ad.destroy();  // 반드시 호출
  };
}, []);

// ❌ 나쁜 예: 정리하지 않음
useEffect(() => {
  const ad = new AdropPopupAd('YOUR_UNIT_ID');
  setPopupAd(ad);
  // destroy() 호출 없음 - 메모리 누수!
}, []);