기본 설정
이 페이지에서는 네이티브 2.0을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.
✏️ 참고
네이티브 2.0은 BuzzAd Android용 SDK v3.21.x부터 지원합니다.
1 단계. 준비하기
- 시작하기 적용 완료
- 네이티브 2.0 지면에 사용할 Unit ID (이하
YOUR_NATIVE_UNIT_ID)
✏️ 참고
기존 네이티브와 네이티브 2.0은 같은 Unit ID를 사용할 수 있습니다.
2 단계. 광고 레이아웃 구성하기
네이티브 2.0 광고 레이아웃을 구성하는 요소와 UI에 대해서는 아래의 표를 참고하세요.
| 구성 요소 | 설명 |
|---|---|
| 광고 제목 (필수) | 광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다. |
| 광고 소재 (필수) |
|
| 광고 설명 (필수) | 광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다. |
| 광고주 아이콘 (필수) |
|
| CTA 버튼 (필수) |
|
| 광고 알림 문구 (권장) | 광고임을 명시하는 문구입니다. (예: 광고, ad, 스폰서, Sponsored) |
네이티브 2.0 광고 레이아웃은 액티비티 또는 프래그먼트 레이아웃에 아래 구조에 맞게 구성해야 합니다. 네이티브 2.0 광고 지면을 구현하려면 NativeAd2View의 규격에 맞는 레이아웃(your_native_ad.xml)을 구현하세요.
다음은 NativeAd2View의 레이아웃 예시입니다.
<com.buzzvil.buzzad.benefit.nativead2.api.NativeAd2View
android:id="@+id/nativeAd2View">
<!-- MediaView와 CtaView는 NativeAd2View의 하위 컴포넌트로 구현해야합니다.-->
<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.nativead2.api.NativeAd2View>
✏️ 참고
액티비티 또는 프래그먼트 이외의 다른 방식으로 네이티브 지면을 구현하려면 버즈빌 담당자에게 문의하세요.
3 단계. 광고 보여주기
광고 레이아웃에 광고를 보여주기 위해 예시 코드를 참고하여 다음의 절차를 따르세요.
NativeAd2ViewBinder.Builder를 사용하여nativeAd2View,MediaView등 광고를 보여주기 위해 필요한 뷰를 모두 설정하고build()를 호출하여NativeAd2ViewBinder객체를 생성하세요.- (Optional) 광고 요청 상태에 따른 UI를 구현하려면 NativeAd2StateChangedListener를 등록하세요.
- 생성된
NativeAd2ViewBinder객체의bind()를 호출하면 자동으로 광고를 할당받고 레이아웃에 표시합니다.- 광고 할당에 실패하면 레이아웃에 광고가 표시되지 않습니다. 실패시 동작을 정의하려면 NativeAd2StateChangedListener를 사용하세요.
- 사용자가 광고 참여를 완료(CTA View가 '참여 완료'로 변경)하고 네이티브 2.0 지면으로 돌아오면 자동으로 다음 광고로 갱신됩니다.
✏️ 참고
- 참여 완료 상태가 존재하지 않는 논리워드 콘텐츠, 이미 참여 완료된 광고는 클릭 후 랜딩 페이지에서 네이티브 2.0 지면으로 돌아올 때 다음 광고로 갱신됩니다.
- 사용자가 광고에 참여 중인 상태(CTA View가 '참여 확인 중'인 경우)에는 다음 광고로 갱신되지 않습니다.
✏️ 참고
자동 광고 갱신을 비활성화하려면 버즈빌 담당자에게 문의하세요.
final NativeAd2View nativeAd2View = findViewById(R.id.nativeAd2View);
final MediaView mediaView = findViewById(R.id.mediaView);
final TextView titleTextView = findViewById(R.id.textTitle);
final TextView descriptionTextView = findViewById(R.id.textDescription);
final ImageView iconImageView = findViewById(R.id.imageIcon);
final DefaultCtaView ctaView = findViewById(R.id.ctaView);
// 광고 레이아웃을 설정합니다.
NativeAd2ViewBinder binder = new NativeAd2ViewBinder.Builder()
.nativeAd2View(nativeAd2View)
.mediaView(mediaView)
.titleTextView(titleTextView)
.descriptionTextView(descriptionTextView)
.iconImageView(iconImageView)
.ctaView(ctaView)
.build("YOUR_NATIVE_UNIT_ID");
// (Optional) 광고 요청 상태에 따른 UI를 구현합니다.
binder.addNativeAd2StateChangedListener(new NativeAd2StateChangedListener() {
@Override
public void onRequested() {
// 광고 할당을 요청한 상태입니다.
// 이후에는 onNext(), onComplete(), onError() 중 하나가 호출됩니다.
// 광고 자동 갱신을 시도할 때마다 반복적으로 호출됩니다.
// 로딩 화면 등을 구현할 수 있습니다.
}
@Override
public void onNext(NativeAd2 nativeAd2) {
// 광고 할당에 성공하면 호출됩니다.
// 이후에 광고 갱신 시 onRequested()가 다시 호출됩니다.
// 광고 자동 갱신을 성공할 때마다 반복적으로 호출됩니다.
// 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
}
@Override
public void onComplete() {
// 더 이상 갱신할 수 있는 광고가 없을 때 호출됩니다.
// 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
}
@Override
public void onError(@NonNull AdError adError) {
// 최초 광고 할당에 실패하면 호출됩니다.
// 로딩 화면 등을 구현한 경우, 여기에서 로딩을 종료합니다.
}
});
// 광고 할당 및 표시를 자동으로 수행합니다.
binder.bind();
✏️ 참고
- 최초 광고 할당 요청에 실패했을 때는
onError()가 호출되고 광고가 노출되지 않습니다. 광고 미할당 시 발생하는AdError오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.- 광고 갱신 시 할당 받을 수 있는 광고가 없을 때는
onComplete()가 호출되고 이전 광고가 유지됩니다.
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(네이티브 광고 지면에 피드로 이동하는 레이아웃)이 제대로 동작하여 클릭하면 피드로 이동하는지 확인하세요.