Native 광고

native ads를 사용하면 앱의 기존 디자인과 일관된 방식으로 앱을 수익화할 수 있습니다. AppLovin MAX React Native 모듈을 사용하면 광고의 개별 에셋에 액세스할 수 있습니다. 이 방식을 통해 앱의 디자인 및 느낌과 일관되도록 광고 레이아웃을 디자인할 수 있습니다. SDK가 이미지 캐싱 및 지표 추적을 자동으로 처리합니다. 개발자는 광고를 표시하는 방법, 시기 및 위치에 집중할 수 있습니다.

이 모듈은 수동 연동만 지원합니다. 커스텀 뷰에 native ad 에셋을 수동으로 로드할 수 있습니다. 이 연동 방법은 크게 다음 세 단계로 구성됩니다.

1. React Native UI 컴포넌트 선언
2. native ad 새로고침
3. native ad 제거

수동 API를 사용하려면 Create New Ad Unit 화면에서 Manual 템플릿을 선택하십시오.

React Native UI 컴포넌트 선언

NativeAdView는 native ad 컴포넌트를 담는 컨테이너입니다. 이 컴포넌트가 마운트되면 제공된 ad unit ID에 대한 native ad를 자동으로 로드합니다.

플러그인은 native ad의 에셋을 렌더링하는 컴포넌트를 제공합니다. 앱의 다른 컴포넌트와 마찬가지로 이러한 컴포넌트의 스타일을 지정할 수 있습니다. AppLovin 정책에 따라 광고에는 반드시 개인정보 보호 정보(Privacy Information) 아이콘이 포함되어야 합니다. 이 아이콘은 중요한 개인정보 처리방침 고지로 연결됩니다. OptionsView 컴포넌트를 사용하여 이 아이콘에 바인딩할 수 있습니다.

다음 표는 native ad 에셋을 렌더링하는 데 도움이 되는 컴포넌트를 보여줍니다.

다음 코드 샘플은 이러한 모든 native ad 컴포넌트를 사용하는 샘플 native ad를 보여줍니다. AppLovin은 네트워크가 특정 에셋을 반환할 것을 보장하지 않습니다. 완전하게 작동하는 예제는 AppLovin-MAX-React-Native GitHub 프로젝트의 예제 앱을 참조하십시오.

import { useRef } from 'react';
import { View } from 'react-native';
import {
  NativeAdView,
  TitleView,
  AdvertiserView,
  BodyView,
  CallToActionView,
  IconView,
  OptionsView,
  MediaView,
  StarRatingView,
  AdInfo,
  AdLoadFailedInfo,
} from 'react-native-applovin-max';

const NativeAd = () => {
  const nativeAdViewRef = useRef();

  // Loads a new native ad
  const onLoadPressed = () => {
    nativeAdViewRef.current?.loadAd();
  };
  
  // Destroys the current native ad
  const onDestroyPressed = () => {
    nativeAdViewRef.current?.destroyAd();
  }

  return (
    <NativeAdView adUnitId={«ad-unit-ID»}
                  ref={nativeAdViewRef}
                  style={styles.nativead}
                  onAdLoaded={(adInfo: AdInfo) => {
                    console.log('Native ad loaded from ' + adInfo.networkName);
                  }}
                  onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
                    console.log('Native ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
                  }}
                  onAdClicked={(adInfo: AdInfo) => {
                    console.log('Native ad clicked');
                  }}
                  onAdRevenuePaid={(adInfo: AdInfo) => {
                    console.log('Native ad revenue paid: ' + adInfo.revenue);
                  }}>
       <View style={{flex: 1, flexDirection: 'column'}}>
         <View style={{flexDirection: 'row'}}>
           <IconView style={styles.icon}/>
           <View style={{flexDirection: 'column', flexGrow: 1}}>
             <TitleView style={styles.title}/>
             <AdvertiserView style={styles.advertiser}/>
             <StarRatingView style={styles.starating}/>
           </View>
           <OptionsView style={styles.optionsView}/>
         </View>
         <BodyView style={styles.body}/>
         <MediaView style={styles.mediaView}/>
         <CallToActionView style={styles.callToAction}/>
       </View>
     </NativeAdView>
  );
};

광고 새로고침

AppLovin React Native 플러그인은 NativeAdView가 마운트될 때 첫 번째 native ad를 자동으로 로드합니다. 마운트된 후에는 제공되는 ref를 사용하여 다음 광고를 새로고침할 수 있습니다.

nativeAdViewRef.current?.loadAd();

native ad 제거

native ad를 더 이상 사용하지 않는 경우 해당 리소스를 제거하십시오. destroyAd() 메서드를 호출하여 이 작업을 수행할 수 있습니다. 그렇지 않으면 앱의 성능이 저하됩니다.

nativeAdViewRef.current?.destroyAd();

에셋 크기

AppLovin은 앱의 나머지 디자인 컨텍스트에 적합한 범위 내에서 가능한 한 많은 native 요소를 포함할 것을 권장합니다. 여기에는 Title, Media View 또는 Icon이 포함됩니다. 사용자에게 더 많은 정보를 제공하면 사용자가 광고를 클릭할지 여부를 결정하는 데 도움이 됩니다.

AppLovin Exchange 디맨드의 경우 Title, Description 및 CTA에 허용되는 최대 글자 수는 다음과 같습니다.

SDK로 mediation되는 네트워크의 경우, 해당 네트워크에서 최대 글자 수를 설정합니다.

미디어 콘텐츠 가로세로 비율을 가져오는 방법

onAdLoaded 콜백의 인자인 adInfo에서 MediaView의 미디어 콘텐츠 가로세로 비율(Media Content Aspect Ratio)을 가져올 수 있습니다.

adInfo.nativeAd.mediaContentAspectRatio

별점

광고 대상 앱의 별점(star rating)에 액세스하여 렌더링할 수 있습니다. 값이 있는 경우, 해당 값은 [0.0, 5.0] 범위의 부동 소수점 수입니다.

React Native 플러그인은 StarRatingView 컴포넌트에 별점을 자동으로 렌더링합니다. 네트워크에서 별점을 제공하지 않는 경우, React Native 플러그인은 별점 컴포넌트를 채우지 않습니다. 개발자는 이에 맞게 레이아웃을 조정해야 합니다.

adInfo.nativeAd.starRating에서 현재 광고의 별점을 가져올 수 있습니다.