...
본 가이드는 BuzzAd Android SDK의 Native 지면을 연동하는 방법은 안내합니다. Native 지면은 광고 지면 레이아웃을 직접 구성한 후, 버즈빌 서버로부터 광고 데이터를 할당받아 광고 지면에 표시합니다.
...
준비 사항
2. 시작하기 적용 완료
Native 지면에 사용할 Unit ID (이하
YOUR_NATIVE_UNIT_ID
)
...
Code Block | ||
---|---|---|
| ||
<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView android:id="@+id/native_ad_view" ...생략... > // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다. <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> |
Note |
---|
Native 지면은 광고는 Activity 또는 Fragment에 구현해야 합니다. 만일 이와 다르게 구현해야 한다면 버즈빌 매니저에 문의하시기 바랍니다. |
...
Code Block | ||
---|---|---|
| ||
public void populateAd(final NativeAd nativeAd) { final NativeAdView view = findViewById(R.id.your_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); 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()); } // clickableViews에 추가된 UI 컴포넌트를 클릭하면 광고 페이지로 이동합니다. final List<View> clickableViews = new ArrayList<>(); clickableViews.add(ctaView); clickableViews.add(mediaView); clickableViews.add(titleTextView); clickableViews.add(descriptionTextView); view.setClickableViews(clickableViews); view.setMediaView(mediaView); view.setNativeAd(nativeAd); // Advanced : 광고 View를 Scale 해서 사용하는 경우에 한하여 적용 // view.setScaleValue(SCALE_X_VALUE, SCALE_Y_VALUE); // 광고 콜백 이벤트를 수신할 수 있습니다. view.addOnNativeAdEventListener(// view.setNativeAd 이전에 호출해야 합니다. // 중복하여 호출하면 2개 이상의 리스너가 등록됩니다. NativeAdView.OnNativeAdEventListener nativeAdEventListener = 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 처리 } }; // 중복하여 addOnNativeAdEventListener를 호출하면 2개 이상의 리스너가 등록됩니다. // 하나의 리스너만 등록하기 위해서는 아래와 같이 리스너를 해제하거나, addOnNativeAdEventListener를 한번만 호출하기 위한 로직을 추가해야 합니다. view.removeOnNativeAdEventListener(listener); view.addOnNativeAdEventListener(nativeAdEventListener); view.setClickableViews(clickableViews); view.setMediaView(mediaView); view.setNativeAd(nativeAd); } |
광고의 상태별 콜백에 대해 커스터마이즈를 하는 경우에 광고 노출/클릭/참여와 관련한 콜백 변화 문서 참고하여 콜백의 정의 및 동작을 파악할 수 있습니다.
...