기본 설정
이 페이지에서는 앱에 지면을 표시하는 방법과 광고 레이아웃을 구성하고 할당하는 방법 등 네이티브 지면을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.
준비 사항
- 시작하기 적용 완료
- 네이티브 지면에 사용할 Unit ID (이하
YOUR_NATIVE_UNIT_ID)
광고 레이아웃 구성하기
네이티브 광고 레이아웃을 구성하는 요소와 UI에 대해서는 아래의 표를 참고하세요.
| 구성 요소 | 설명 |
|---|---|
| 광고 제목 (필수) | 광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다. |
| 광고 소재 (필수) |
|
| 광고 설명 (필수) | 광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다. |
| 광고주 아이콘 (필수) |
|
| CTA 버튼 (필수) |
|
| 광고 알림 문구 (권장) | 광고임을 명시하는 문구입니다. (예: 광고, ad, 스폰서, Sponsored) |
네이티브 광고 레이아웃은 액티비티 또는 프래그먼트 레이아웃에 아래 구조에 맞게 구성해야 합니다. 네이티브 광고 지면을 구현하려면 NativeAdView의 규격에 맞는 레이아웃(your_native_ad.xml)을 구현하세요.
다음은 NativeAdView의 레이아웃 예시입니다.
<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.DefaultCtaView
android:id="@+id/ctaView"
...생략... />
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>
✏️ 참고
액티비티 또는 프래그먼트 이외의 다른 방식으로 네이티브 지면을 구현하려면 버즈빌 담당자에게 문의하세요.
광고 할당 및 표시하기
네이티브 지면에 광고를 할당받고 표시하려면 예시 코드를 참고하여 다음의 절차를 따르세요.
loadAd()를 호출하여 광고를 할당받으세요.NativeAdViewBinder에nativeAdView,MediaView, 그리고 광고를 보여주기 위해 필요한 뷰를 모두 설정하세요.bind()를 호출하여 광고 레이아웃에 광고 데이터를 바인딩하세요.
✏️ 참고
loadAd()와bind()를 호출하는 시점을 원하는 대로 구현할 수 있습니다. 단, 버즈빌은 원활한 광고 할당을 위해 호출 시점을 최대한 가깝게 구현하는 것을 권장합니다. 그렇지 않으면 광고 할당 로직에 의해 광고 게재율에 영향이 있을 수 있습니다.
final NativeAdView nativeAdView = findViewById(R.id.your_native_ad_view);
final MediaView mediaView = nativeAdView.findViewById(R.id.mediaView);
final TextView titleTextView = nativeAdView.findViewById(R.id.textTitle);
final ImageView iconImageView = nativeAdView.findViewById(R.id.imageIcon);
final TextView descriptionTextView = nativeAdView.findViewById(R.id.textDescription);
final DefaultCtaView ctaView = nativeAdView.findViewById(R.id.ctaView);
final NativeAdRequest nativeAdRequest = new NativeAdRequest.Builder().build();
final BuzzAdNative buzzAdNative = new BuzzAdNative("YOUR_NATIVE_UNIT_ID");
buzzAdNative.loadAd(nativeAdRequest, new BuzzAdNative.AdLoadListener() {
@Override
public void onAdLoaded(@NotNull NativeAd nativeAd) {
// 할당된 광고가 있으면 호출됩니다.
// 광고 데이터를 바인딩합니다.
final NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(nativeAdView, mediaView)
.titleTextView(titleTextView)
.descriptionTextView(descriptionTextView)
.iconImageView(iconImageView)
.ctaView(ctaView)
.build();
viewBinder.bind(nativeAd);
}
@Override
public void onLoadFailed(@NotNull AdError adError) {
// 할당된 광고가 없으면 호출됩니다.
Log.e(TAG, "Failed to load a native ad.", adError);
}
});
✏️ 참고
할당된 광고가 없을 때에는AdError와errorMessage가 empty response로 전달되고, 광고가 노출되지 않습니다. 광고 미할당 시 발생하는 오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.
✅ 중요
광고가 정상적으로 네이티브 지면에 보이면 연동의 기본 단계가 완료된 것입니다. 이제 네이티브 지면에 더 많은 광고를 노출하는 피드 지면으로의 진입 경로를 추가하여 앱의 수익화를 한 단계 부스트업할 수 있는 사용자 플로우를 만들어 낼 수 있습니다. 네이티브에 진입 경로 추가 토픽에서 자세한 내용을 확인하세요.