...

버즈빌 SDK에서 제공하는 광고는 일반광고와 쇼핑 적립 광고가 있습니다. 아래 가이드는 다음은 일반 광고의 디자인을 변경하는 방법을 설명합니다.

...

일반 광고용 NativeAdView의 규격에 맞는 레이아웃(your_feed_ad.xml)을 구현합니다.

...

Code Block
// your_feed_ad.xml

...



<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView
    android:id="@+id/native_ad_view"
    ...생략... >
    
    // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다.
    
    <LinearLayout
        ...생략... >
        <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.CtaView
            android:id="@+id/ctaView"
            ...생략... />
    ...생략...
    </LinearLayout>
    ...생략...
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

...

onCreateViewHolder에서 NativeAdViewHolder에 NativeAdView를 설정합니다.

onBindViewHolder에서는 NativeAdView에 광고 데이터(NativeAd)를 바인딩합니다.

...

clickableViews 리스트에 UI 컴포넌트를 추가하여, 클릭 이벤트를 수신할 컴포넌트를 설정합니다. 추가된 UI 컴포넌트를 클릭 시 광고 페이지로 이동하게 됩니다.

...

CTA 버튼은 CtaPresenter 를 이용하여 상황에 맞는 적절한 문구로 변경됩니다.
CTA 버튼의 UI 혹은 문구의 커스터마이징은 가이드에 따라 진행할 수 있습니다.

...

AdsAdapter의 상속 클래스를 구현합니다. 구현한 상속 클래스의 onCreateViewHolder에서 your_feed_ad.xml을 사용하여 NativeAdView 를 생성해야합니다. 그리고 FeedConfig에 구현한 YourAdsAdapter를 설정합니다.

CTA 버튼 커스터마이징은 https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2270134722/ver+2.25.x+3.3.#CtaView-(%EB%B2%84%ED%8A%BC)-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95을 참고하시기 바랍니다.

Code Block

language	java

public class CustomAdsAdapterYourAdsAdapter 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.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);
            }
        });
    }
}

...

Code Block

language	java

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

광고 아이템 커스터마이징: 쇼핑 적립 광고

<<일반 광고과 쇼핑광고이미지 (일반광고 강조)>>

Info
일반 광고의 커스터마이징을 참고하시기 바랍니다.

버즈빌 SDK에서 제공하는 광고는 일반광고와 쇼핑 적립 광고가 있습니다. 아래 가이드는 쇼핑 적립 광고의 디자인을 변경하는 방법을 설명합니다. 쇼핑 적립 광고는 일반 광고에 비해 많은 정보를 제공합니다.

쇼핑 적립 광고용 NativeAdView의 규격에 맞는 레이아웃(your_feed_ad_cps.xml)을 구현합니다. 일반 광고용 레이아웃에는 레이아웃에 없는 priceText, originalPriceText, discountPercentageText, categoryText 가 있습니다.

...

가 있습니다.

Code Block

// your_feed_ad_cps.xml

<?xml version="1.0" encoding="utf-8"?>
<com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView
    android:id="@+id/native_ad_view"
    ...생략... >
    <LinearLayout
        ...생략... >
        
        // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다.
        
        <com.buzzvil.buzzad.benefit.presentation.media.MediaView
            android:id="@+id/mediaView"
            ...생략... />
            
        ...생략...
    
        <TextView
            android:id="@+id/priceText"
            ...생략... />
        <TextView
            android:id="@+id/originalPriceText"
            ...생략... />
        <TextView
            android:id="@+id/discountPercentageText"
            ...생략... />
        <TextView
            android:id="@+id/categoryText"
            ...생략... />
            
        ...생략...
        
    </LinearLayout>
    ...생략...
</com.buzzvil.buzzad.benefit.presentation.nativead.NativeAdView>

AdsAdapter의 상속 클래스를 구현합니다. 구현한 상속 클래스의 onCreateViewHolder에서 your_feed_ad_cps.xml을 사용하여 NativeAdView 를 생성해야합니다.

...

Info위에서 안내한 AdsAdapter 를 참고하여 수정합니다그리고 FeedConfig에 구현한 YourCPSAdsAdapter를 설정합니다.

CTA 버튼 커스터마이징은 https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2270134722/ver+2.25.x+3.3.#CtaView-(%EB%B2%84%ED%8A%BC)-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95을 참고하시기 바랍니다.

Code Block

language	java

public class

...

YourCPSAdsAdapter 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_cps, 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 TextView priceText = view.findViewById(R.id.discountedPriceText);
        final TextView originalPriceText = view.findViewById(R.id.originalPriceText);
        final TextView discountPercentageText = view.findViewById(R.id.discountPercentageText);
        final TextView categoryText = view.findViewById(R.id.categoryText);

        // data binding 
        ...생략...
        final Product product = ad.getProduct();
        if (product != null) {
            if (product.getDiscountedPrice() != null) {
                // 할인이 있는 쇼핑 광고
                originalPriceText.setPaintFlags(originalPriceText.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
                int percentage = 0;
                if (product.getPrice() > product.getDiscountedPrice()) {
                    percentage = Math.round(((product.getPrice() - product.getDiscountedPrice()) / product.getPrice() * 100));
                }
                if (percentage > 0) {
                    priceText.setText(getCommaSeparatedPrice(product.getDiscountedPrice().longValue()));
                    originalPriceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
                    discountPercentageText.setText(String.format(Locale.ROOT, "%d%%", percentage));
                    discountPercentageText.setVisibility(View.VISIBLE);
                } else {
                    priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
                    originalPriceText.setText("");
                    discountPercentageText.setVisibility(View.GONE);
                }
            } else {
                // 할인이 없는 쇼핑 광고
                priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));
                originalPriceText.setText("");
                discountPercentageText.setVisibility(View.GONE);
            }
            categoryText.setText(product.getCategory());
            if (!TextUtils.isEmpty(product.getCategory())) {
                categoryText.setVisibility(View.VISIBLE);
            }
        }

        final Collection<View> clickableViews = new ArrayList<>();
        clickableViews.add(ctaView);
        clickableViews.add(mediaView);
        clickableViews.add(descriptionView);

        view.setMediaView(mediaView);
        view.setClickableViews(clickableViews);
        view.setNativeAd(nativeAd);
        
        ...생략...
    }

    private String getCommaSeparatedPrice (long price){
        return String.format(Locale.getDefault(), "₩%,d", price);
    }
}

FeedConfig에 구현한 CustomCPSAdsAdapter를 설정합니다.

Code Block

language	java

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

CtaView

...

버튼

...

2.21 버전 이상에서는 아래 방법보다는 Theme을 활용하는 방법을 권장합니다.
...

Versions Compared

Old Version 3

New Version 4

Key

광고 아이템 커스터마이징: 쇼핑 적립 광고

CtaView

버튼

2.21 버전 이상에서는 아래 방법보다는 Theme을 활용하는 방법을 권장합니다.
...

Page Comparison

Versions Compared

Old Version 3

New Version 4

Key

광고 아이템 커스터마이징: 쇼핑 적립 광고

CtaView

버튼

2.21 버전 이상에서는 아래 방법보다는 Theme을 활용하는 방법을 권장합니다....

2.21 버전 이상에서는 아래 방법보다는 Theme을 활용하는 방법을 권장합니다.
...