본문으로 건너뛰기

기본 설정

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

1 단계. 준비하기

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

2 단계. 광고 레이아웃 구성하기

네이티브 광고 레이아웃을 구성하는 요소와 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>

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

3 단계. 광고 할당 및 표시하기

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

  1. loadAd()를 호출하여 광고를 할당받으세요.

 오류

  1. NativeAdViewBinder에 nativeAdViewMediaView, 그리고 광고를 보여주기 위해 필요한 뷰를 모두 설정하세요.
  2. 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로 전달되고, 광고가 노출되지 않습니다. 광고 미할당 시 발생하는 오류 코드에 대한 자세한 내용은 오류 코드가 나타납니다 토픽을 참고하세요.

4 단계. 네이티브 광고 지면에 피드로 이동하는 레이아웃 추가하기

NativeAdView 레이아웃에 사용자가 클릭하면 바로 피드로 이동하는 UI(NativeToFeedLayout)를 추가하세요.

⚠️  주의
NativeToFeedLayout<Button />은 사용할 수 없습니다.

✏️  참고

  • NativeToFeedLayout은 자유롭게 구성할 수 있습니다. 아래 그림과 같이 피드 이동 안내 텍스트와 화살표 아이콘을 적용하는 것을 추천합니다.
  • 피드 이동 안내 텍스트에 피드에 진입만 해도 받을 수 있는 포인트를 표시할 수도 있습니다. 자세한 내용은 기본 적립 포인트 표시하기 토픽을 참고하세요.

네이티브 광고 지면에서 피드 지면으로 이동하는 레이아웃을 추가하려면 다음의 절차를 따르세요.

  1. 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>
  2. 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));
}
}
);
}

⚠️  주의
사용자에게 지급하는 포인트 금액의 정확하게 표시하기 위해 ActivityonResume() 시점에 기본 적립 포인트를 포함한 유도 문구를 업데이트해야 합니다.

5 단계. 기본 연동 테스트하기

모든 기본 연동 단계를 완료한 후 광고가 정상적으로 할당되고 표시되는지 확인하세요. 그리고 NativeToFeedLayout(네이티브 광고 지면에 피드로 이동하는 레이아웃)이 제대로 동작하여 클릭하면 피드로 이동하는지 확인하세요.