기본 설정
이 페이지에서는 앱에 지면을 표시하는 방법과 광고 레이아웃을 구성하고 할당하는 방법 등 네이티브 지면을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.
1 단계. 준비하기
- 시작하기 적용 완료
- 네이티브 지면에 사용할 Unit ID (이하
YOUR_NATIVE_UNIT_ID)
2 단계. 광고 레이아웃 구성하기
네이티브 광고 레이아웃을 구성하는 요소와 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>
✏️ 참고
액티비티 또는 프래그먼트 이외의 다른 방식으로 네이티브 지면을 구현하려면 버즈빌 담당자에게 문의하세요.
3 단계. 광고 할당 및 표시하기
네이티브 지면에 광고를 할당받고 표시하려면 예시 코드를 참고하여 다음의 절차를 따르세요.
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로 전달되고, 광고가 노출되지 않습니다. 광고 미할당 시 발생하는 오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.
4 단계. 네이티브 광고 지면에 피드로 이동하는 레이아웃 추가하기
NativeAdView 레이아웃에 사용자가 클릭하면 바로 피드로 이동하는 UI(NativeToFeedLayout)를 추가하세요.
⚠️ 주의
NativeToFeedLayout에<Button />은 사용할 수 없습니다.
✏️ 참고
NativeToFeedLayout은 자유롭게 구성할 수 있습니다. 아래 그림과 같이 피드 이동 안내 텍스트와 화살표 아이콘을 적용하는 것을 추천합니다.- 피드 이동 안내 텍스트에 피드에 진입만 해도 받을 수 있는 포인트를 표시할 수도 있습니다. 자세한 내용은 기본 적립 포인트 표시하기 토픽을 참고하세요.
네이티브 광고 지면에서 피드 지면으로 이동하는 레이아웃을 추가하려면 다음의 절차를 따르세요.
NativeAdView레이아웃에NativeToFeedLayout를 추가하세요.<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>
<com.buzzvil.buzzad.benefit.presentation.feed.navigation.NativeToFeedLayout
android:id="@+id/your_native_to_feed_layout">
<!-- 레이아웃의 컴포넌트 정의는 생략했습니다 -->
<TextView />
<ImageView />
</com.buzzvil.buzzad.benefit.presentation.feed.navigation.NativeToFeedLayout>
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>NativeToFeedLayout에 Native Unit ID를 설정하세요.// Activity
@Override
protected void onCreate(Bundle savedInstanceState) {
NativeToFeedLayout nativeToFeedLayout = findViewById(R.id.your_native_to_feed_layout);
nativeToFeedLayout.setNativeUnitId(YOUR_NATIVE_UNIT_ID);
}
기본 적립 포인트 표시하기
NativeToFeedLayout에 피드에 진입하기만 해도 받을 수 있는 포인트(BaseReward)를 표시해 사용자의 클릭율을 높일 수 있습니다.
다음은 NativeToFeedLayout에 기본 적립 포인트를 표시하는 예시입니다.
BaseRewardManager baseRewardManager = BuzzAdBenefit.getBaseRewardManager();
@Override
public void onResume() {
super.onResume();
updateNavigationTextView();
}
private void updateNavigationTextView() {
baseRewardManager.getAvailableFeedBaseReward(
YOUR_FEED_UNIT_ID,
reward -> {
if (reward < 1) {
navigationTextView.setText("더 많은 참여 기회 보기");
} else {
navigationTextView.setText(String.format(Locale.ROOT, "%d 포인트 추가로 적립하고 더 많은 참여 기회 보기", reward));
}
}
);
}
⚠️ 주의
사용자에게 지급하는 포인트 금액의 정확하게 표시하기 위해Activity의onResume()시점에 기본 적립 포인트를 포함한 유도 문구를 업데이트해야 합니다.
5 단계. 기본 연동 테스트하기
모든 기본 연동 단계를 완료한 후 광고가 정상적으로 할당되고 표시되는지 확인하세요. 그리고 NativeToFeedLayout(네이티브 광고 지면에 피드로 이동하는 레이아웃)이 제대로 동작하여 클릭하면 피드로 이동하는지 확인하세요.