라이트 팝업 광고

라이트 팝업 형태 소개

위와 같은 팝업 형태로 뜨는 광고 유형입니다.
8초 후에 자동으로 닫히게 됩니다. 인터스티셜이나, 네이티브보다 ux를 해치지 않고 광고를 보여줄 수 있습니다.
라이트 팝업 광고는 0.9.27 버전부터 지원합니다.

광고 로드하기

LightPopupAd.loadAd(unitId)를 통해서 광고를 load할 수 있습니다.

import { LightPopupAd } from "react-native-daro-m";

const LIGHT_POPUP_AD_UNIT_ID = Platform.select({
  ios: ${iOS unit id},
  android: ${Android unit id},
  default: ''
});

LightPopupAd.loadAd(LIGHT_POPUP_AD_UNIT_ID);

광고 보여주기

LightPopupAd.showAd(unitId)를 통해서 로드한 광고를 보여줄 수 있습니다.

const isReady = await LightPopupAd.isAdReady(LIGHT_POPUP_AD_UNIT_ID);

if (isReady) {
  LightPopupAd.showAd(LIGHT_POPUP_AD_UNIT_ID);
}

구현 예시

`LightPopupAd` 구현 예시입니다.

import { useEffect, useRef, useState } from "react";
import { StyleSheet } from "react-native";
import { AdDisplayFailedInfo, AdInfo, AdLoadFailedInfo, AdRevenueInfo, LightPopupAd } from "react-native-daro-m";
import { ThemedButton } from "../ThemedButton";

enum AdLoadState {
  notLoaded = 'NOT_LOADED',
  loading = 'LOADING',
  loaded = 'LOADED',
}

type Props = {
  adUnitId: string;
  isInitialized: boolean;
  log: (str: string) => void;
};

const MAX_EXPONENTIAL_RETRY_COUNT = 3;

const LightPopupAdExample = ({ adUnitId, isInitialized, log }: Props) => {
  const [adLoadState, setAdLoadState] = useState<AdLoadState>(AdLoadState.notLoaded);
  const retryAttempt = useRef(0);

  useEffect(() => {
    LightPopupAd.addAdLoadedEventListener((adInfo: AdInfo) => {
      setAdLoadState(AdLoadState.loaded);
      retryAttempt.current = 0;
      log(`LightPopup ad loaded from ${adInfo.networkName}`);
    });

    LightPopupAd.addAdImpressionRecordedListener((adInfo: AdRevenueInfo) => {
      log(`LightPopup ad revenue paid: ${adInfo.revenue} from ${adInfo.networkName}`);
    });

    LightPopupAd.addAdClickedEventListener((adInfo: AdInfo) => {
      log(`LightPopup ad clicked from ${adInfo.networkName}`);
    });

    LightPopupAd.addAdLoadFailedEventListener((errorInfo: AdLoadFailedInfo) => {
      setAdLoadState(AdLoadState.notLoaded);

      if (retryAttempt.current > MAX_EXPONENTIAL_RETRY_COUNT) {
        log('LightPopup ad failed to load with code ' + errorInfo.code);
        return;
      }

      retryAttempt.current += 1;
      const retryDelay = Math.pow(2, Math.min(MAX_EXPONENTIAL_RETRY_COUNT, retryAttempt.current));
      log('LightPopup ad failed to load with code ' + errorInfo.code + ' - retrying in ' + retryDelay + 's');

      setTimeout(() => {
        setAdLoadState(AdLoadState.loading);
        log('LightPopup ad retrying to load...');
        LightPopupAd.loadAd(adUnitId);
      }, retryDelay * 1000);
    });

    LightPopupAd.addAdDisplayedEventListener((adInfo: AdInfo) => {
      log(`LightPopup ad displayed from ${adInfo.networkName}`);
    });

    LightPopupAd.addAdFailedToDisplayEventListener?.((adInfo: AdDisplayFailedInfo) => {
      setAdLoadState(AdLoadState.notLoaded);
      log(`LightPopup ad failed to display from ${adInfo.networkName}`);
    });

    LightPopupAd.addAdHiddenEventListener?.((adInfo: AdInfo) => {
      setAdLoadState(AdLoadState.notLoaded);
      log(`LightPopup ad hidden from ${adInfo.networkName}`);
    });

    // 광고 커스터마이징
    LightPopupAd.setLightPopupAdConfiguration(adUnitId, {
      backgroundColor: 'blue',
      cardViewBackgroundColor: 'yellow',
      adMarkLabelTextColor: 'red',
      adMarkLabelBackgroundColor: '#FFD700',
      closeButtonText: 'Close AD',
      closeButtonTextColor: 'rgba(0, 255, 255, 0.42)',
      titleTextColor: 'rgba(0, 128, 255, 0.42)',
      bodyTextColor: '#333333',
      ctaButtonTextColor: 'blue',
      ctaButtonBackgroundColor: '#4CAF50',
    });

  }, [adUnitId]);

  const getLightPopupButtonTitle = () => {
    if (adLoadState === AdLoadState.notLoaded) return 'Load LightPopup';
    if (adLoadState === AdLoadState.loading) return 'Loading...';
    return 'Show LightPopup';
  };

  return (
    <ThemedButton
      isEnabled={isInitialized && adLoadState !== AdLoadState.loading}
      isLoading={adLoadState === AdLoadState.loading}
      title={getLightPopupButtonTitle()}
      onPress={async () => {
        const isLightPopupReady = await LightPopupAd.isAdReady(adUnitId);
        if (isLightPopupReady) {
          LightPopupAd.showAd(adUnitId);
        } else {
          log('Loading LightPopup ad...');
          setAdLoadState(AdLoadState.loading);
          LightPopupAd.loadAd(adUnitId);
        }
      }}
    />
  );
}

const styles = StyleSheet.create({
  button: {
    margin: 5,
  },
});

export default LightPopupAdExample;

광고 커스터마이징

LightPopupAd.setLightPopupAdConfiguration(adUnitId, options)를 통해서 색상, 텍스트 등 UI 요소를 커스터마이징할 수 있습니다.

LightPopupAd.setLightPopupAdConfiguration(adUnitId, {
  backgroundColor: 'blue', // 전체 배경색
  cardViewBackgroundColor: 'yellow', // 카드 배경색
  adMarkLabelTextColor: 'red', // 광고 마크 텍스트 색상
  adMarkLabelBackgroundColor: '#FFD700', // 광고 마크 배경색
  closeButtonText: 'Close AD', // 닫기 버튼 텍스트
  closeButtonTextColor: 'rgba(0, 255, 255, 0.42)', // 닫기 버튼 텍스트 색상
  titleTextColor: 'rgba(0, 128, 255, 0.42)', // 타이틀 색상
  bodyTextColor: '#333333', // 본문 색상
  ctaButtonTextColor: 'blue', // CTA 버튼 텍스트 색상
  ctaButtonBackgroundColor: '#4CAF50', // CTA 버튼 배경색
});

다로 시작하기

SDK 통합하기

DARO 사용하기

FAQ

라이트 팝업 광고

라이트 팝업 형태 소개

광고 로드하기

광고 보여주기

구현 예시

광고 커스터마이징

다로 시작하기

SDK 통합하기

DARO 사용하기

FAQ

​라이트 팝업 형태 소개

​광고 로드하기

​광고 보여주기

​구현 예시

​광고 커스터마이징

라이트 팝업 형태 소개

광고 로드하기

광고 보여주기

구현 예시

광고 커스터마이징