...

BuzzAd Andorid SDK의 개인 정보 수집 동의 UI를 사용하지 않거나, 다시 표시하고 싶은 경우 아래 표를 참고하여 설정할 수 있습니다.

프로필 입력 배너

...

사용자의 출생연도와 성별 정보를 설정하지 않으면 Feed 지면 상단에 프로필 정보 입력을 권장하는 배너가 표시됩니다.
사용자의 정보 제공 여부와 무관하게 배너를 표시하고 싶지 않을 수 있습니다.

...

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
      .feedHeaderViewAdapterClass(DefaultFeedHeaderViewAdapter::.class.java)
      .build();

헤더 영역 자체 구현

...

Feed 헤더 영역을 자유로이 활용할 수 있습니다. 예를 들어, Feed 영역을 설명하는 공간으로도 활용할 수 있습니다.

필요에 따라 직접 구현한 UI 에 적립 가능한 금액을 표시할 수 있습니다. onBindView를 통해 지급 가능한 금액(reward)을 알 수 있습니다.

다음은 헤더 영역을 변경하는 예시입니다.

...

AdsAdapter의 상속 클래스를 구현합니다. 구현한 상속 클래스의 onCreateViewHolder에서 your_feed_ad.xml을 사용하여 NativeAdView를 생성합니다. 그리고 FeedConfig에 구현한 YourAdsAdapter를 설정합니다. CTA 버튼 커스터마이징은 CTA 변경을 참고하시기 바랍니다. (아래 예시에서는 ImageLoader 라이브러리를 사용하였습니다.)

public class YourAdsAdapter extends AdsAdapter<AdsAdapter.NativeAdViewHolder> {

    @Override
    public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        final LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.your_feed_ad, parent, false);
        return new NativeAdViewHolder(feedNativeAdView);
    }

    @Override
    public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {
        final NativeAdView view = (NativeAdView) holder.itemView;

        final Ad ad = nativeAd.getAd();
        
        // create ad component
        final MediaView mediaView = view.findViewById(R.id.mediaView);
        final LinearLayout titleLayout = view.findViewById(R.id.titleLayout);
        final TextView titleView = view.findViewById(R.id.textTitle);
        final ImageView iconView = view.findViewById(R.id.imageIcon);
        final TextView descriptionView = view.findViewById(R.id.textDescription);
        final CtaView ctaView = view.findViewById(R.id.ctaView);
        final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null

        // data binding 
        ctaPresenter.bind(nativeAd);

        if (mediaView != null) {
            mediaView.setCreative(ad.getCreative());
            mediaView.setVideoEventListener(new VideoEventListener() {
                // Override and implement methods

                @Override
                public void onVideoStarted() {}

                ...생략...
          
            });
        }
        
        if (titleView != null) {
            titleView.setText(ad.getTitle());
        }

        if (iconView != null) {
            ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);
        }
        if (descriptionView != null) {
            descriptionView.setText(ad.getDescription());
        }

        // clickableViews에 추가된 UI 컴포넌트를 클릭하면 광고 페이지로 이동합니다.
        final Collection<View> clickableViews = new ArrayList<>();
        clickableViews.add(ctaView);
        clickableViews.add(mediaView);
        clickableViews.add(titleLayout);
        clickableViews.add(descriptionView);

        view.setMediaView(mediaView);
        view.setClickableViews(clickableViews);
        view.setNativeAd(nativeAd);
        
        // 광고 콜백 이벤트를 수신할 수 있습니다. 
        view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
            
            @Override
            public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
                ctaPresenter.bind(nativeAd);
            }

            @Override
            public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {

            }

            @Override
            public void onRewarded(@NonNull NativeAdView nativeAdView, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {

            }

            @Override
            public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {
                ctaPresenter.bind(nativeAd);
            }
        });
    }
}

...

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
      .feedFeedbackHandler(YourFeedFeedbackHandler.class)
      .build();

추가 Interstitial 광고 지면 연동

...

Feed 지면에 추가로 Interstitial 지면을 연동할 수 있습니다. 사용자가 Feed지면을 이탈을 할 때, Interstitial 지면이 보입니다. Interstitial 지면을 추가하기 위해서는 FeedConfig에 Interstitial 지면 unit id를 설정합니다. Unit id 발급이 필요한 경우에는 버즈빌 매니저에게 문의하시기 바랍니다.

다음은 Interstitial 지면을 추가하는 예시입니다.

...

...

광고 미할당 안내 디자인 자체 구현하기

Feed 지면에 진입한 시점에 노출할 광고가 없다면 광고 미할당 안내 UI가 표시됩니다. 미할당 안내 디자인은 자체 구현하여 변경할 수 있습니다.

...

광고 미할당 안내 디자인을 직접 구현하려면 다음의 절차를 따르세요.

1. Feed 지면에 광고가 할당되지 않았을 때의 화면에 추가할 에러 이미지(feedErrorImageView), 타이틀(feedErrorTitle), 상세 설명(feedErrorDescription) 레이아웃을 작성하세요.

   Code Block

   <!-- custom_feed_error_view.xml --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="vertical" android:padding="40dp"> <ImageView android:id="@+id/feedErrorImageView" android:layout_width="match_parent" android:layout_height="wrap_content"/> <TextView android:id="@+id/feedErrorTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="32dp" android:textColor="@color/bz_text_emphasis" android:textSize="16sp" /> <TextView android:id="@+id/feedErrorDescription" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="8dp" android:textAlignment="center" android:textColor="@color/bz_text_description" android:textSize="14sp" /> </LinearLayout>

2. FeedErrorViewHolder를 구현하는 커스텀 클래스 CustomErrorView를 새로 생성하고, 자동 완성되는 GetView() 메소드를 다음과 같이 구현하세요.

   Code Block

   public class CustomErrorView extends FeedErrorViewHolder { @NonNull @Override public View getErrorView(@NonNull Activity activity) { // TODO: 1번에서 생성한 custom_feed_error_view 레이아웃을 inflate View errorView = activity.getLayoutInflater().inflate(R.layout.custom_feed_error_view, null, false); final ImageView errorImageView = errorView.findViewById(R.id.feedErrorImageView); final TextView errorTitle = errorView.findViewById(R.id.feedErrorTitle); final TextView errorDescription = errorView.findViewById(R.id.feedErrorDescription); errorImageView.setImageResource(R.drawable.bz_ic_feed_profile_coin); // 에러 이미지 설정 errorTitle.setText("타이틀: 광고가 없습니다. "); // 에러 타이틀 텍스트 설정 errorDescription.setText("디스크립션: 할당된 광고가 없습니다!"); // 에러 상세 텍스트 설정 return errorView; } }

3. FeedConfig의 feedErrorViewHolderClass 속성에 이전 단계에서 생성한 CustomErrorView 클래스를 추가하세요.

   Code Block
   // Feed 지면 초기화 // TODO: feedErrorViewHolderClass 속성에 2번에서 생성한 CustomErrorView 클래스를 설정합니다. final FeedConfig feedConfig = new FeedConfig.Builder(YOUR_FEED_UNIT_ID) .feedErrorViewHolderClass(CustomErrorView.class) .build();

...

위의 Interstitial 지면은 제3의 ADN 광고를 할당할 수 있습니다. 더 많은 광고 물량 확보를 위해 제3의 ADN 연동을 권장합니다. 위의 Interstitial 지면에 연동할 수 있는 ADN은 다음과 같습니다.

• AdfitNative ADN (단, 연동 심사 필요)

...

액션형 광고의 브릿지 페이지에 배너 광고 지면 추가

...