본문으로 건너뛰기

기본 설정

이 페이지에서는 앱에 지면을 표시하는 방법과 광고 레이아웃을 구성하고 할당하는 방법 등 네이티브 지면을 연동하기 위한 기본적인 설정을 확인할 수 있습니다.

준비 사항

  • 시작하기 적용 완료
  • 네이티브 지면에 사용할 Unit ID (이하 YOUR_NATIVE_UNIT_ID)

광고 레이아웃 구성하기

네이티브 광고 레이아웃을 구성하는 요소와 UI에 대해서는 아래의 표를 참고하세요.

구성 요소설명
광고 제목 (필수)광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다.
광고 소재 (필수)
  • 이미지, 동영상 등 광고 소재입니다. 광고 소재의 종횡비는 반드시 유지해야 합니다.
  • com.buzzvil.buzzad.benefit.presentation.media.MediaView를 사용해서 표시해야 합니다.
  • 사이즈: 1,200 x 627 (px)
  • 여백을 추가할 수 있습니다. 자세한 내용은 버즈빌 매니저에게 문의하세요.
광고 설명 (필수)광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다.
광고주 아이콘 (필수)
  • 광고주 아이콘 이미지입니다. 아이콘의 종횡비는 반드시 유지해야 합니다.
  • 사이즈: 80 x 80 (px)
CTA 버튼 (필수)
  • 광고의 참여를 유도하는 버튼입니다. 최대 7자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호로 대체할 수 있습니다.
  • com.buzzvil.buzzad.benefit.presentation.media.DefaultCtaView를 사용해서 표시해야 합니다.
  • CTA 버튼의 디자인을 변경하려면 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>

✏️  참고
액티비티 또는 프래그먼트 이외의 다른 방식으로 네이티브 지면을 구현하려면 버즈빌 담당자에게 문의하세요.

광고 할당 및 표시하기

네이티브 지면에 광고를 할당받고 표시하려면 예시 코드를 참고하여 다음의 절차를 따르세요.

  1. loadAd()를 호출하여 광고를 할당받으세요.
  2. NativeAdViewBinder에 nativeAdViewMediaView, 그리고 광고를 보여주기 위해 필요한 뷰를 모두 설정하세요.
  3. 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);
}
});

✏️  참고
할당된 광고가 없을 때에는 AdErrorerrorMessage가 empty response로 전달되고, 광고가 노출되지 않습니다. 광고 미할당 시 발생하는 오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.

 중요
광고가 정상적으로 네이티브 지면에 보이면 연동의 기본 단계가 완료된 것입니다. 이제 네이티브 지면에 더 많은 광고를 노출하는 피드 지면으로의 진입 경로를 추가하여 앱의 수익화를 한 단계 부스트업할 수 있는 사용자 플로우를 만들어 낼 수 있습니다. 네이티브에 진입 경로 추가 토픽에서 자세한 내용을 확인하세요.