개요
본 가이드는 BuzzAd-Benefit SDK의 Native 타입 광고를 연동하는 방법을 다루는 문서입니다.
Native 타입을 연동하기 전, 시작하기의 연동 사항을 모두 적용했는지 확인해주세요.
Native 타입 광고가 노출될 지면이 Activity 또는 Fragment로 구현되어 있어야 합니다. 만일 이와 다르게 구현되어있다면 버즈빌 측에 사전 문의 부탁드립니다.
Step1. 광고 요청
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. 광고 레이아웃 생성
Activity 또는 Fragment 레이아웃 내에 아래 구조에 맞게 NativeAdView
레이아웃을 추가합니다.
Component | Description | Size | Requirements | Required |
---|---|---|---|---|
Media view | 이미지, 동영상 등 광고 소재 | 1200x627 px |
| Y |
Title view | 광고의 제목 | 최대 25자 | 생략 부호로 일정 길이 이상은 생략 가능 | Y |
Description view | 광고에 대한 상세 설명 | 최대 100자 | 생략 부호로 일정 길이 이상은 생략 가능 | Y |
CTA view |
| 최대 15자 | 생략 부호로 일정 길이 이상은 생략 가능 | Y |
Icon image view | 광고주 아이콘 이미지 | 80x80 px | Aspect ratio 유지 권장 | Y |
Sponsored | 광고임을 나타내는 텍스트 또는 이미지 | - | 광고, ad, 스폰서, Sponsored 등의 문구를 노출 | N |
NativeAdView의 레이아웃 예시
위에서 설명한 UI 컴포넌트 (예. MediaView
) 는 NativeAdView
의 하위 컴포넌트로 구현해야합니다.
그 이외 구조는 기획에 맞게 변경할 수 있습니다.
<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>
Step3. 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 처리 } }); }
광고의 상태별 콜백에 대해 커스터마이즈를 하는 경우에 광고 노출/클릭/참여와 관련한 콜백 변화 문서 참고하여 콜백의 정의 및 동작을 파악할 수 있습니다.
CtaView (버튼)를 추가적으로 커스터마이징하는 경우는 디자인 커스터마이징을 참고