Skip to main content

​
네이티브 광고 형태 소개

  • 광고 뷰를 미디에이션 SDK가 구현해주는 타 광고 형태와 달리 네이티브 광고 형태는 구성 요소들을 전달받아 앱에서 직접 광고 뷰를 구현합니다.
  • UI/UX 기반으로 레이아웃을 직접 구현하므로써 위화감을 적게 만들 수 있다는 것이 가장 큰 특징입니다. 단, 유저가 광고가 아닌 컨텐츠로써 착각하는 경우를 방지하기 위해 광고 표시와 함께 최소한의 차별성은 부여해야합니다.
네이티브 광고 예시

​
네이티브 뷰 컴포넌트 생성하기

  • Non-Reward
  • Reward
import { NativeAdView, TitleView, AdvertiserView, BodyView, CallToActionView, IconView, OptionsView, MediaView, StarRatingView } from 'react-native-daro';
import type { AdInfo, AdLoadFailedInfo, NativeAdViewHandler } from 'react-native-daro';

import { useRef, useState } from 'react';
import { Platform, StyleSheet, View } from 'react-native';
// import문은 위의 탭 참조
import { NativeAdView, TitleView, AdvertiserView, BodyView, CallToActionView, IconView, OptionsView, MediaView, StarRatingView } from 'react-native-daro-m';
import type { AdInfo, AdLoadFailedInfo, NativeAdViewHandler } from 'react-native-daro-m';
import { AppButton } from './components/AppButton';

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

const NATIVE_AD_MEDIAVIEW_WIDTH = 340;
const NATIVE_AD_MEDIAVIEW_HEIGHT = 200;

export const NativeAdViewExample = ({ adUnitId, isInitialized, log, isNativeAdShowing, setIsNativeAdShowing }: Props) => {
  const [isNativeAdLoading, setIsNativeAdLoading] = useState(false);

  // Ref for NativeAdView
  const nativeAdViewRef = useRef<NativeAdViewHandler>(null);

  return (
    <>
      <AppButton
        style={styles.button}
        title={isNativeAdShowing ? 'Hide Native Ad' : 'Show Native Ad'}
        enabled={isInitialized}
        onPress={() => {
          setIsNativeAdShowing(!isNativeAdShowing);
        }}
      />

      {isNativeAdShowing && (
        <View style={styles.container}>
          <NativeAdView
            adUnitId={adUnitId}
            ref={nativeAdViewRef}
            style={styles.nativeAd}
            onAdLoaded={(adInfo: AdInfo) => {
              log('Native ad loaded from ' + adInfo);
              setIsNativeAdLoading(false);
            }}
            onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
              log('Native ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
              setIsNativeAdLoading(false);
            }}
            onAdClicked={(adInfo: AdInfo) => {
              log('Native ad clicked on ' + adInfo.adUnitId);
            }}
            onAdImpressionRecorded={(adInfo: AdInfo) => {
              log('Native ad impression recorded');
            }}
          >
            <View style={styles.assetContainer}>
              <View style={styles.assetUpperContainer}>
                <IconView style={styles.icon} />
                <View style={styles.assetTitleContainer}>
                  <TitleView style={styles.title} />
                </View>
              </View>
              <BodyView style={styles.body} />
              <MediaView style={{ ...styles.mediaView }} />
              <CallToActionView style={styles.callToAction} />
            </View>
          </NativeAdView>
          <AppButton
            style={styles.button}
            title={'RELOAD'}
            enabled={!isNativeAdLoading}
            onPress={() => {
              setIsNativeAdLoading(true);
              nativeAdViewRef.current?.loadAd();
            }}
          />
          <AppButton
            style={styles.button}
            title={'CLOSE'}
            enabled={!isNativeAdLoading}
            onPress={() => {
              setIsNativeAdShowing(!isNativeAdShowing);
            }}
          />
        </View>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  button: {
    margin: 5,
    backgroundColor: '#0583aa',
  },
  container: {
    position: 'absolute', // must have a view behind for touch event propagation
    top: '30%',
    width: '100%',
    padding: 10,
    backgroundColor: '#0583aa',
    zIndex: 1,
    elevation: Platform.OS === 'android' ? 1 : 0,
  },
  nativeAd: {
    padding: 10,
    width: '100%',
    backgroundColor: '#EFEFEF',
  },
  icon: {
    width: 48,
    height: 48,
  },
  title: {
    width: 260,
    fontSize: 16,
    textAlign: 'left',
    fontWeight: 'bold',
    color: 'black',
  },
  body: {
    padding: 8,
    fontSize: 14,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
  mediaView: {
    alignSelf: 'center',
    width: NATIVE_AD_MEDIAVIEW_WIDTH,
    height: NATIVE_AD_MEDIAVIEW_HEIGHT,
    maxWidth: NATIVE_AD_MEDIAVIEW_WIDTH,
    maxHeight: NATIVE_AD_MEDIAVIEW_HEIGHT,
    zIndex: 1,
    elevation: Platform.OS === 'android' ? 1 : 0,
  },
  callToAction: {
    marginTop: 10,
    padding: 8,
    width: '100%',
    fontSize: 18,
    textAlign: 'center',
    fontWeight: 'bold',
    textTransform: 'uppercase',
    color: 'black',
    backgroundColor: '#2d545e',
  },
  assetContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  assetUpperContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  assetTitleContainer: {
    marginLeft: 4,
    flexDirection: 'column',
    flexGrow: 1,
  },
});

export default NativeAdViewExample;
  • 동일 AdUnitId를 여러 지면에서 사용하는 경우 각 지면을 구분할 수 있도록 placement를 반드시 입력해주세요

​
주의사항

​
광고 컴포넌트의 조건부 렌더링

NativeAdView의 자식 광고 컴포넌트들(IconView, TitleView, CallToActionView 등)은 반드시 DOM에 존재해야 합니다. 조건부 렌더링으로 광고 컴포넌트를 숨기면 광고가 로드되어도 표시되지 않습니다.
⌘I