Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
exclude.*(BuzzAd-Benefit

...

SDK: Type A - Native Ads|주의사항)

개요

본 가이드는 BuzzAd -Benefit SDK의 네이티브 Native 타입 광고를 연동하는 방법을 다루는 문서입니다.

...

Note

Native

...

타입을 연동하기 전, 

...

시작하기의 연동 사항을 모두 적용했는지

...

확인해주세요.

...

Native 타입 광고가 노출될 지면이 Activity 또는 Fragment로 구현되어 있어야 합니다. 만일 이와 다르게 구현되어있다면 버즈빌 측에 사전 문의 부탁드립니다.

Index

Table of Contents
exclude.*(BuzzAd-Benefit SDK: Type A - Native Ads|주의사항)

Basic Usage

Step 1: NativeAdLoader 로 광고 요청

...

Step1. 광고 요청

YOUR_NATIVE_

...

UNIT_

...

ID 세팅

...

NativeAdLoader인스턴스를 생성하고, loadAd()

...

를 호출합니다.

Code Block
languagejava
final String TAG = YourActivity.class.getSimpleName();
final NativeAdLoader loader = new NativeAdLoader("YOUR_NATIVE_AD_UNIT_ID");
loader.loadAd(new NativeAdLoader.OnAdLoadedListener() {
    @Override
    public void onLoadError(@NonNull AdError adError) {
        Log.e(TAG, "Failed to load a native ad.", adError);
    }

    @Override
    public void onAdLoaded(@NonNull NativeAd nativeAd) {
    	populateAd(nativeAd); // Step 3 참고
    }
});

...

Step2. 광고 레이아웃 생성

...

Benefit 2.5.X 버전 이후로 버즈빌의 광고는, 일반 광고와 쇼핑 광고를 구분하여 보여주고 있습니다. 기존에 연동 중인 경우, 기존 사용하던 광고를 일반 광고로 구분합니다.

다음은 일반 광고를 매체사 앱 내에 레이아웃을 생성하고 광고 컴포넌트들을 관련 뷰에 연결합니다. 

  • BuzzAd Benefit 광고 레이아웃의 Root 는 com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView 으로 설정되어야 합니다.

    • NativeAdView 클래스는 하나의 광고에 대응되는 ViewGroup 의 일종으로, 광고를 표시하기 위한 하위 컴포넌트들은 반드시 이 오브젝트의 child 로 등록되어야 합니다.

  • 광고 소재를 보여주는 뷰에는 com.buzzvil.buzzad.benefit.presentation.media.MediaView가 반드시 포함되어야 합니다.

하위 컴포넌트

...

Component

...

Description

...

Size

...

Requirements

...

Required

...

Media view

...

이미지, 동영상 등 광고 소재

...

1200x627 px

...

  • Aspect ratio 유지 권장

  • 이미지 주위에 패딩 추가 가능

...

Y

...

Title view

...

광고의 제목

...

최대 25자

...

생략 부호로 일정 길이 이상은 생략 가능

...

Y

...

Description view

...

광고에 대한 상세 설명

...

최대 100자

Activity 또는 Fragment 레이아웃 내에 아래 구조에 맞게 NativeAdView 레이아웃을 추가합니다.

Component

Description

Size

Requirements

Required

Media view

이미지, 동영상 등 광고 소재

1200x627 px

  • Aspect ratio 유지 권장

  • 이미지 주위에 패딩 추가 가능

Y

Title view

광고의 제목

최대 10자

생략 부호로 일정 길이 이상은 생략 가능

Y

Description view

광고에 대한 상세 설명

최대 40자

생략 부호로 일정 길이 이상은 생략 가능

Y

CTA view

  • Reward text view: 액션 시 지급되는 포인트 금액

  • CTA text view: 광고의 액션을 유도하는 문구

최대 15자7자

생략 부호로 일정 길이 이상은 생략 가능

Y

Icon image view

광고주 아이콘 이미지

80x80 px

Aspect ratio 유지 권장

Y

Sponsored
image/ text view

광고임을 나타내는 텍스트 또는 이미지

-

광고, ad, 스폰서, Sponsored 등의 문구를 노출

N

...

languagejava

...

NativeAdView의 레이아웃 예시

위에서 설명한 UI 컴포넌트 (예. MediaView) 는 NativeAdView 의 하위 컴포넌트로 구현해야합니다.
그 이외 구조는 기획에 맞게 변경할 수 있습니다.

Code Block
languagejava
<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView
    android:id="@+id/native_ad_view"
    ...

...

생략... >

...


  
    <com.buzzvil.buzzad.benefit.presentation.media.MediaView
        

...

android:id="@+id/mediaView"
        

...

...생략... />
    

...

<TextView
        

...

android:id="@+id/textTitle"

...


        ...생략... />
    

...

<TextView

...


        

...

android:id="@+id/textDescription"
        

...

...생략... />
    

...

<ImageView
        

...

android:id="@+id/imageIcon"
        

...

...생략... />

...


    

...

<com.buzzvil.buzzad.benefit.presentation.media.CtaView
        

...

android:id="@+id/ctaView"
        

...

...생략... />

    ...

...

생략...
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

Step 2-2: 광고 레이아웃 생성 - 쇼핑 광고

다음은 쇼핑 광고를 매체사 앱 내에 레이아웃을 생성하고 광고 컴포넌트들을 관련 뷰에 연결합니다. 일반 광고와 다르게, 원가 (price) + 할인율 (discountPercentageText) + 할인된 가격 (discountedPrice) + 상품 카테고리 (category) 가 추가 되었습니다.

...

  • Layout에 com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView를 추가하고, 다음과 같은 component를 추가합니다.

...

Component

...

Description

...

Size

...

Requirements

...

Required

...

Media view

...

이미지, 동영상 등 광고 소재

...

1200x627 px

...

  • Aspect ratio 유지 권장

  • 이미지 주위에 패딩 추가 가능

...

Y

...

Description view

...

광고에 대한 상세 설명

...

최대 100자

...

생략 부호로 일정 길이 이상은 생략 가능

...

Y

...

Price view

...

상품의 가격 정보

...

-

...

Y

...

Original price View

...

할인이 있을 경우, 원래 가격 정보

...

-

...

Y

...

Category view

...

상품의 카테고리 정보

...

-

...

N

...

CTA view

...

  • Reward text view: 액션 시 지급되는 포인트 금액

  • CTA text view: 광고의 액션을 유도하는 문구

...

최대 15자

...

생략 부호로 일정 길이 이상은 생략 가능

...

Y

...

Sponsored
image/ text view

...

광고임을 나타내는 텍스트 또는 이미지

...

-

...

광고, ad, 스폰서, Sponsored 등의 문구를 노출

...

N

...

languagexml

...

Step3. NativeAd 레이아웃에 데이터를 바인딩

할당 받은 광고 데이터를 NativeAdView에 바인딩 합니다.

  • clickableViews 리스트에 광고 컴포넌트를 추가하여, 클릭 이벤트를 수신할 컴포넌트를 설정합니다.
    clickableViews에 추가된 광고 컴포넌트를 클릭 시 광고 페이지로 이동하게 됩니다.

  • NativeAdView 에 clickableViewsMediaViewNativeAd 를 설정해야합니다.

  • CTA 버튼은 CtaPresenter 를 이용하여 상황에 맞는 적절한 문구로 변경됩니다.

  • OnNativeAdEventListener 를 통해 광고 콜백 이벤트를 수신할 수 있습니다.
    기획에 따라 추가로 UI 등을 추가할 수 있습니다.

Code Block
languagejava
public void populateAd(final NativeAd nativeAd) {
    final NativeAdView view = findViewById(R.id.native_ad_view);

    final Ad ad = nativeAd.getAd();
    final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();
    
    final MediaView mediaView = view.findViewById(R.id.mediaView);
    final TextView titleTextView = view.findViewById(R.id.textTitle);
    final ImageView iconView = view.findViewById(R.id.imageIcon);
    final TextView descriptionTextView = view.findViewById(R.id.textDescription);
    final CtaView ctaView = view.findViewById(R.id.ctaView);
    final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null
    ctaPresenter.bind(nativeAd);

    // 1) Assign Ad Properties.
    if (mediaView != null) {
        

...

mediaView.

...

setCreative(ad.getCreative());
        

...

mediaView.setVideoEventListener(new VideoEventListener() {
            

...

// Override and implement methods
        

...

 

...

   // 고급 설정 참조
  

...

      });
    }

...

    if (titleTextView != null) {
        titleTextView.

...

setText(ad.getTitle());
    }

   

...

 if (iconView != null) {
       

...

 ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);
    }

    

...

if (descriptionTextView != null) {
     

...

   descriptionTextView.setText(ad.getDescription());
    }

    

...

// 2) Create a list of clickable views.
    final 

...

List<View> clickableViews = new ArrayList<>();
    

...

clickableViews.add(ctaView);
    

...

clickableViews.add(mediaView);
    clickableViews.add(titleTextView);
    

...

clickableViews.add(descriptionTextView);

    // 3) Register ClickableViews, MediaView and NativeAd to NativeAdView.

...


...

    

...

view.setClickableViews(clickableViews);
    

...

view.setMediaView(mediaView);
    

...

쇼핑 광고 적용하기

  • 쇼핑 광고와 일반 광고 구분 - Step 1: NativeAdLoader 로 광고 요청할 때, CPS 광고를 확인할 수 있습니다.

final String TAG = YourActivity.class.getSimpleName(); final NativeAdLoader loader = new NativeAdLoader("YOUR_NATIVE_AD_UNIT_ID"); loader.loadAd(new NativeAdLoader.OnAdLoadedListener() { @Override public void onLoadError(@NonNull AdError adError
view.setNativeAd(nativeAd);

    // Advanced : 광고 View를 Scale 해서 사용하는 경우에 한하여 적용
    // view.setScaleValue(SCALE_X_VALUE, SCALE_Y_VALUE);

    // 4) Add OnNativeAdEventListener to NativeAdView and implement participated UI.
    view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
        
Log.e(TAG, "Failed to load a native ad.", adError); } @Override
@Override
        public void onImpressed(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
  
  
public
 
void
 
onAdLoaded(@NonNull
 
NativeAd
 
nativeAd)
 
{
 }

  
final
 
AdRevenueType
 
revenueType
 
=
 
AdRevenueType.getAdRevenueTypeFromName(ad.getRevenueType()); if (AdRevenueType.CPS.equals(revenueType)) {
  @Override
        public void onClicked(@NonNull NativeAdView view, @NonNull 
//
NativeAd 
CPS
nativeAd) 
광고
{
            
populateCPSAd
ctaPresenter.bind(nativeAd);
        
}
 
else
 
{
  // 기획에 따른 추가적인 UI 처리
        
// 다른 타입의 광고
}

        @Override
        public void 
populateAd(nativeAd); }
onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 기획에 따라 리워드 로딩 이미지를 보여주는 등의 처리
        }
});
Expand
titleNativeAdLoader 로 광고 요청할 때, CPS 광고를 확인
Code Block
languagejava
  • CPS 광고에 제공되는 추가정보는 다음과 같이 가져올 수 있습니다.

private void populateCPSAd(final NativeAd nativeAd) {


        
final Ad
@Override
ad
 
=
 
nativeAd.getAd();
     
final Product product = ad.getProduct(); if (product != null) { if (product.getDiscountedPrice() != null) { // 할인된 가격 정보. 할인중인 상품이 아닌경우, null 값이 반환됨 } long originalPrice = product.getPrice(); String category = product.getCategory(); } }
Expand
titleCPS 광고에 제공되는 추가정보
Code Block
languagejava
  • (중요) 사용 예시

...

title사용 예시
Code Block
languagejava
private void populateCPSAds(final NativeAd nativeAd) {
    final Ad ad = nativeAd.getAd();
    final Product product = ad.getProduct();
    if (product != null) {
        if (product.getDiscountedPrice() != null) {
            // 할인이 있는 쇼핑 광고
            originalPriceText.setPaintFlags(originalPriceText.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
            int percentage = 0;

            // 할인된 가격 정보로 할인율을 계산하여 보여줄 수 있습니다
            if (product.getPrice() > product.getDiscountedPrice()) {
                percentage = Math.round(((product.getPrice() - product.getDiscountedPrice()) / product.getPrice() * 100));
            }
            if (percentage > 0) {
            // 할인이 있는 쇼핑 광고의 경우 원래 가격, 할인 가격, 할인율을 아래와 같이 표기할 수 있습니다
                priceText.setText(getCommaSeparatedPrice(product.getDiscountedPrice().longValue()));
                originalPriceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
                discountPercentageText.setText(String.format(Locale.ROOT, "%d%%", percentage));
                discountPercentageText.setVisibility(View.VISIBLE);
            } else {
            // 할인 가격이 있지만 원래 가격과 차이가 없는 경우, 아래와 같이 원래의 가격만 노출합니다
                priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
                originalPriceText.setText("");
                discountPercentageText.setVisibility(View.GONE);
            }
        } else {
            // 할인이 없는 쇼핑 광고의 경우 원래의 가격만 노출합니다
            priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
            originalPriceText.setText("");
            discountPercentageText.setVisibility(View.GONE);
        }
        // 카테고리가 있는 경우 아래와 같이 노출 할 수 있습니다.
        categoryText.setText(product.getCategory());
        if (!TextUtils.isEmpty(product.getCategory())) {
            categoryText.setVisibility(View.VISIBLE);
        }
    }
}

// 아래와 같이 가격 정보를 format하여 UI 가독성을 높일 수 있습니다
private String getCommaSeparatedPrice (long price) {
    return String.format(Locale.getDefault(), "₩%,d", price);
}

Step 3: NativeAd 오브젝트로 레이아웃 구성

Step 1 의 onAdLoaded 에서 받은 NativeAd 오브젝트를 이용하여 광고 뷰를 그립니다.

...

위 Step 2에서 생성한 광고 컴포넌트 뷰에 NativeAd.getAd() 를 통해 가져온 Ad 의 각 요소를 세팅합니다.

...

clickableViews list를 생성하여 광고 클릭이 가능하도록 설정할 영역을 지정합니다. 해당 뷰 영역을 클릭 시 광고 랜딩 페이지로 이동하게 됩니다.

...

NativeAdView 에 clickableViewsMediaViewNativeAd 를 세팅합니다.

광고 참여 완료 후 UI 변경을 위해 NativeAdView 에 OnNativeAdEventListener 를 등록하고, onParticipated 콜백에서 해당 광고에 참여하였음을 표시합니다.

Code Block
languagejava
public void populateAd(final NativeAd nativeAd) {
    final NativeAdView view = findViewById(R.id.native_ad_view);

    final Ad ad = nativeAd.getAd();
    final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();
    
    final MediaView mediaView = view.findViewById(R.id.mediaView);
    final TextView titleTextView = view.findViewById(R.id.textTitle);
    final ImageView iconView = view.findViewById(R.id.imageIcon);
    final TextView descriptionTextView = view.findViewById(R.id.textDescription);
    final CtaView ctaView = view.findViewById(R.id.ctaView);
    final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null
    ctaPresenter.bind(nativeAd);

    // 1) Assign Ad Properties.
    if (mediaView != null) {
        mediaView.setCreative(ad.getCreative());
        mediaView.setVideoEventListener(new VideoEventListener() {
            // Override and implement methods
        });
    }

    if (titleTextView != null) {
        titleTextView.setText(ad.getTitle());
    }

    if (iconView != null) {
        ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);
    }

    if (descriptionTextView != null) {
        descriptionTextView.setText(ad.getDescription());
    }

    // 2) Create a list of clickable views.
    final List<View> clickableViews = new ArrayList<>();
    clickableViews.add(ctaView);
    clickableViews.add(mediaView);
    clickableViews.add(titleTextView);
    clickableViews.add(descriptionTextView);

    // 3) Register ClickableViews, MediaView and NativeAd to NativeAdView.
    nativeAdView.setClickableViews(clickableViews);
    nativeAdView.setMediaView(mediaView);
    nativeAdView.setNativeAd(nativeAd);

    // Advanced : 광고 View를 Scale 해서 사용하는 경우에 한하여 적용
    // nativeAdView.setScaleValue(SCALE_X_VALUE, SCALE_Y_VALUE);

    // 4) Add OnNativeAdEventListener to NativeAdView and implement participated UI.
    nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
        @Override
        public void onImpressed(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

        }

        @Override
        public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // Action형 광고에 대한 CTA 처리
            ctaPresenter.bind(nativeAd);
        }

        @Override
        public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 퍼블리셔 기획에 따라 리워드 로딩 이미지를 보여주는 등의 처리
        }

        @Override
        public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {
            // 리워드 적립의 결과 (RewardResult) SUCCESS, ALREADY_PARTICIPATED, MISSING_REWARD 등에 따라서 적절한 유저 커뮤니케이션 처리
        }

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 퍼블리셔 기획에 따라 UI 처리
            ctaPresenter.bind(nativeAd);
        }
    });
}

...

(Optional) 광고의 상태별 콜백에 대해 다양한 커스터마이즈를 원하는 경우 콜백의 정의 및 동작은 광고 노출/클릭/참여와 관련한 콜백 변화 문서 참고

...

(Optional) 광고의 디자인 커스터마이즈를 원하는 경우 하단의 Advantage Usage - 디자인 커스터마이즈를 참고

Advanced Usage

디자인 커스터마이즈

CtaView (버튼) Customization

CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 다음과 같이 설정을 진행하면 됩니다.

Code Block
languagejava
public void populateAd(final NativeAd nativeAd) {
    final NativeAdView view = findViewById(R.id.native_ad_view);

    final Ad ad = nativeAd.getAd();
    final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();
    
    ...
    // View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.
    final CustomCtaView customizedCtaView = view.findViewById(R.id.customCtaView);

    // 아래 정보를 이용하여 cta view를 업데이트
    final String callToAction = nativeAd.getAd().getCallToAction();
    final int reward = nativeAd.getAd().getReward(); // 주의사항 참조
    final boolean participated = nativeAd.isParticipated();
    
    // 다음과 같은 function을 CustomCtaView class에 생성하여 텍스트 및 아이콘을 업데이트 할 수 있습니다.
    customizedCtaView.setCtaText(callToAction); // 텍스트 변경
    customizedCtaView.setRewardText(reward);
    customizedCtaView.setRewardIcon(R.drawable.your_reward_icon);
    customizedCtaView.setParticiapted(participated); // 참여 완료된 광고에 대해서 UI를 처리하는 부분
    customizedCtaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // 변경하려는 "색상코드"를 입력

    ...

    final List<View> clickableViews = new ArrayList<>();
    clickableViews.add(customizedCtaView);
    ...

    nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
        ...

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 퍼블리셔 기획에 따라 UI 처리
            // Customize 된 CtaView를 participated 상태에 맞게 업데이트
            final boolean participated = nativeAd.isParticipated();
            customizedCtaView.setParticipated(participated);
        }
    });
}

복수 개의 Native 광고 로드하기

NativeAdLoader 의 loadAds(NativeAdLoader.OnAdsLoadedListener listener, int count)를 사용하여 여러 개의 Native 광고를 로드할 수 있습니다.

Code Block
languagejava
final NativeAdLoader loader = new NativeAdLoader("YOUR_NATIVE_AD_UNIT_ID");
loader.loadAds(new NativeAdLoader.OnAdsLoadedListener() {
    @Override
    public void onLoadError(@NonNull AdError adError) {
    	...
    }

    @Override
    public void onAdsLoaded(@NonNull Collection<NativeAd> collection) {
    	...
    }
}, NATIVE_ADS_COUNT);

Feed entry point 추가하기

Info

2.16.x 이상 버전 부터 사용 가능합니다.

Feed 모듈은 클릭시에 Feed Activity를 열어주는 NativeToFeedLayout 클래스를 제공합니다. 해당 클래스를 추가해, Native에서 Feed로 이동하는 entry point를 만들 수 있습니다.

...

NativeToFeedLayout은 default onClickListener()가 설정되어 있는 horizontal orientation의 LinearLayout 입니다. NativeToFeedLayout을 연동하기 위해서는 아래의 절차가 필요합니다.

  1. NativeToFeedLayout을 사용하기 위해서는 BuzzAdBenefit.init() 시점에 feedConfig을 추가해주어야 합니다.

  2. NativeToFeedLayout 의 layout을 원하는 방식으로 구성합니다.

  3. NativeToFeedLayout.setFeedUnitId(YOUR_FEED_UNIT_ID)NativeToFeedLayout.setNativeUnitId(YOUR_NATIVE_UNIT_ID) 를 호출해서 NativeToFeedLayout을 세팅합니다.

  4. (Optional) 유저가 피드에 진입하면 추가로 받을 수 있는 포인트를 표기함으로써 user attention을 증대시킬 수 있습니다. BuzzAdBenefit.getBaseRewardManager()를 통해 BaseRewardManager 객체를 불러오고, BaseRewardManager.getAvailableFeedBaseReward() 함수를 호출해 유저가 피드에 진입하면 받을 수 있는 포인트를 알 수 있습니다.

    Image Removed
Note
  • 유저에게 정확한 추가 리워드 지급량을 보여주기 위해 ActivityonStart() 시점에 텍스트를 업데이트 해주세요.

  • 메모리 누수를 방지하기 위해 ActivityonStop() 시점에 BaseRewardManager.clear() 함수를 호출해주세요.

...

title예시 코드

Step 1.

Code Block
languagejava
private void initializeBuzzAdBenefit(Context context) {
    final FeedConfig feedConfig = new FeedConfig.Builder(context, YOUR_FEED_UNIT_ID)
            ... // customization code can be added
            .build();
    final BuzzAdBenefitConfig buzzAdBenefitConfig = configBuilder
            .add(feedConfig)
            .build();
    BuzzAdBenefit.init(context, buzzAdBenefitConfig);
}

Step 2.

Code Block
languagexml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    <com.buzzvil.buzzad.benefit.presentation.feed.navigation.NativeToFeedLayout
        android:id="@+id/native_to_feed_layout"
        ...>
        <TextView
            ... />
        <ImageView
            ... />
    </com.buzzvil.buzzad.benefit.presentation.feed.navigation.NativeToFeedLayout>
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3.

Code Block
languagejava
@Override
protected void onCreate(Bundle savedInstanceState) {
  ...
  NativeToFeedLayout nativeToFeedLayout = findViewById(R.id.native_to_feed_layout);
  nativeToFeedLayout.setUnitId(YOUR_FEED_UNIT_ID);
  ...
}

Step 4. (Optional)

Code Block
languagejava
BaseRewardManager baseRewardManager = BuzzAdBenefit.getBaseRewardManager();

@Override
public void onStart() {
    super.onStart();
    updateNavigationTextView();
}

@Override
public void onStop() {
    super.onStop();
    baseRewardManager.clear();
}

private void updateNavigationTextView() {
    baseRewardManager.getAvailableFeedBaseReward(
        yourFeedUnitId,
        reward -> {
            if (reward < 1) {
                navigationTextView.setText("더 많은 참여 기회 보기"); // string resource로 대체해주세요.
            } else {
                navigationTextView.setText(String.format(Locale.ROOT, "%d 포인트 추가로 적립하고 더 많은 참여 기회 보기", reward));
            }
        }
    );
}

비디오 에러에 대한 리스너 등록

MediaView에서 발생하는 비디오 이벤트에 대한 리스너를 등록할 수 있습니다.

Code Block
languagejava
mediaView.setVideoEventListener(new VideoEventListener() {
  @Override
  public void onVideoStarted() {
  }

  @Override
  public void onError(@NonNull VideoErrorStatus videoErrorStatus, @Nullable String errorMessage) {
    if (errorMessage != null) {
        Toast.makeText(mediaView.getContext(), errorMessage, Toast.LENGTH_SHORT).show();
    }
  }  

  @Override
  public void onResume() {
  }

  @Override
  public void onPause() {
  }

  @Override
  public void onReplay() {
  }

  @Override
  public void onVideoEnded() {
    // 동영상 재생 완료시 필요한 처리
  }

  @Override
  public void onLanding() {
    // 동영상 광고 랜딩시 필요한 처리
  }
});

Image 타입의 광고 서포트

할당되는 광고의 개수를 극대화 하기 위해, 기존에 버즈스크린 잠금화면에 할당하던 Full Screen 광고를 이미지의 일부를 Cropping 한 후 사용 (이하 "Image 타입의 광고")하실 수 있습니다. (자세한 구현 사항은 아래 그림 참조)

  • Image 타입의 광고의 경우 기존 광고들과 다르게 icon, title, description 의 내용이 없습니다. 더불어 광고 영역 전체의 상하의 길이가 깁니다. 이런 상황에서 레이아웃을 알맞게 그리기 위한 추가 작업을 한 후 해당 광고 타입을 받을 수 있는 NativeAdLoader 의 새로운 메소드를 사용해야 합니다.

...

View의 Height 조정: 
Image 타입의 광고는 기존의 mediaView 보다 상하 길이가 길기 때문에, 모든 광고 view의 height를 wrap_content로 적용하고 기타 height를 고정하는 로직을 제거해야 합니다.

View의 레이아웃 조정: 
NativeAd 를 이용해서 광고 뷰를 그리는 과정에서 현재 타입이 Image 인지 확인하여 title, description 을 위한 layout 을 없앱니다. 혹시 광고주 icon에 대해서도 개별적인 layout으로 구현하신 경우에는 이 부분도 없애야 합니다.

Code Block
languagejava
if (Creative.Type.IMAGE.equals(ad.getCreative().getType())) {
    titleLayout.setVisibility(View.GONE);
    descriptionTextView.setVisibility(View.GONE);
} else {
    titleLayout.setVisibility(View.VISIBLE);
    descriptionTextView.setVisibility(View.VISIBLE);
}

광고 로드: 
NativeAdLoader 사용 시 다음 예시와 같이 imageTypeEnabled 파라미터를 true 로 설정해서 광고를 로드하면 Image type 의 광고도 받을 수 있습니다.

Code Block
languagejava
// 단일 광고 로드시 사용
public void loadAd(@NonNull final OnAdLoadedListener listener, final boolean imageTypeEnabled);

// 여러 개의 광고 로드시 사용
public void loadAds(@NonNull final OnAdsLoadedListener listener, final int count, final boolean imageTypeEnabled);

final NativeAdLoader loader = new NativeAdLoader("YOUR_NATIVE_AD_UNIT_ID");
loader.loadAd(new NativeAdLoader.OnAdLoadedListener() {
    @Override
    public void onLoadError(@NonNull AdError adError) {
    }

    @Override
    public void onAdLoaded(@NonNull NativeAd nativeAd) {
    }
}, true);

광고 참여 상태에 따른 CTA 등 소재 표시 분기 처리 방법

Buzzvil Benefit SDK를 통해 내려가는 광고는 기본적으로 모두 리워드가 할당되어 있습니다. 다만 광고마다 리워드 적립 주기(기본 2시간)를 설정되어 있고 사용자가 리워드 적립 주기 내에 동일 광고를 다시 참여하는 경우 리워드가 적립되지 않습니다. 따라서 광고 렌더링시 다음과 같은 방법으로 분기 처리를 하여 기획 의도에 맞는 UI를 사용자에게 보여주어야 합니다.

예를 들어 어떤 광고의 IPU는 무제한이고 리워드 적립 주기는 1시간인 경우, 최초 참여시에는 리워드가 지급 되고 이후 1시간 내에 동일 광고가 노출되었을 때에는 광고를 참여하여도 리워드 지급이 되지 않으므로 CTA 등 UI를 "참여완료" 또는 "0P" 등으로 표시하여 사용자에게 리워드가 지급되지 않는 광고임을 알려주어야 합니다.

...

분기 처리시 사용되는 필드

  • Ad 객체의 reward_status: 버즈빌 서버에서 광고를 할당할 때 해당 광고에 대하여 리워드 적립 주기 내에 현재 사용자의 적립 내역이 존재하면 "received" 값을 넣어줍니다. (주의: reward_status가 "received"여도 reward의 값은 원래 리워드 금액이 그대로 기록되어 있습니다.)

  • Ad 객체의 is_participated: 현재 할당 받은 광고들의 참여 상태를 sync하기 위한 값입니다. 광고 참여가 일어나면 해당 광고 및 메모리 상의 동일 광고들의 is_participated값이 true로 바뀌며 onParticipate 콜백이 호출됩니다. (주의: 버즈빌 서버에서 광고의 reward_status가 "received"로 내려온 경우에도 이번 할당에서 참여를 다시 하기 전까지 is_participated는 "false"로 설정되어 있습니다.)

분기 처리 예시 pseudo code

...

languagejava

...

 public void onRewarded(@NonNull NativeAdView view, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {
            // 리워드 적립의 결과 (RewardResult) SUCCESS, ALREADY_PARTICIPATED, MISSING_REWARD 등에 따라서 적절한 유저 커뮤니케이션 처리
        }

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            ctaPresenter.bind(nativeAd);
            // 기획에 따른 추가적인 UI 처리
        }
    });
}