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로 구현되어 있어야 합니다. 만일 이와 다르게 구현되어있다면 버즈빌 측에 사전 문의 부탁드립니다.

...

Component

Description

Size

Requirements

Required

Media view

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

1200x627 px

  • Aspect ratio 유지 권장

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

Y

Title view

광고의 제목

최대 25자10자

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

Y

Description view

광고에 대한 상세 설명

최대 100자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

...

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>

...

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);
    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() {
        @Override
        public void onImpressed(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
  
        }

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

        @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) {
            ctaPresenter.bind(nativeAd);
            // 기획에 따른 추가적인 UI 처리
        }
    });
}

...