| 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 (버튼)를 추가적으로 커스터마이징하는 경우는 디자인 커스터마이징을 참고