...

YOUR_NATIVE_UNIT_ID 세팅 후 NativeAdLoader 객체를 인스턴스화하고, loadAd() 를 호출 합니다호출합니다.

final String TAG = YourActivity.class.getSimpleName();
final NativeAdLoader loader = new NativeAdLoader("YOUR_NATIVE_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 으로 설정되어야 합니다.

...

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

NativeAdView의 레이아웃

...

Code Block
language java
<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView android:id="@+id/native_ad_view" ...(생략)... > <LinearLayout ...(생략)... > <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" ...(생략)... /> ...(생략)... </LinearLayout> ...(생략)... </com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

Step3.

...

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

...

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

...

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

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

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

• NativeAdView 에 clickableViews, MediaView, NativeAd 를

...

• 설정해야합니다.

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

...

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

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 처리
        }
    });
}

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

2. (Optional) 광고의 디자인 커스터마이즈를 원하는 경우 하단의 디자인 커스터마이징을 참고

...