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