Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagexml
<!-- your_activity_layout.xml -->

...생략...

<!-- FeedFragment 추가 -->
<fragment
    android:id="@+id/feed_fragment"
    android:name="com.buzzvil.buzzad.benefit.presentation.feed.FeedFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

...생략...
class YourActivity extends Actvity {
  private FeedHandler feedHandler;

  @Override
  public void onCreate() {
    super.onCreate();
    ...생략...
    
    // 광고를 새로 받기 위해 필요한 부분입니다.
    feedHandler = new FeedHandler(context, "YOUR_FEED_UNIT_ID");
    
    // FeedFragment 초기화
    final FeedFragment feedFragment = (FeedFragment) getSupportFragmentManager().findFragmentById(R.id.feed_fragment);
    if (feedFragment != null) {
      feedFragment.init(context, "YOUR_FEED_UNIT_ID");
    }
  }

  ...생략...
}

FeedFragment의 UI도 Feed 디자인 커스터마이징을 참고하여 변경할 수 있습니다. (단, FeedFragment는 툴바 영역이 없습니다.)

...

헤더 영역에 BuzzAd Android SDK 에서 기본으로 제공하는 UI를 사용해 “총 적립 가능 금액“을 사용자에게 보여줍니다. UI를 변경하기 위해서는 헤더 영역을 자체 구현해야 합니다. 헤더 영역을 자체 구현하는 방법은 아래 헤더 영역 자체 구현을 참고하시기 바랍니다.

Code Block
languagejava
final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
      .feedHeaderViewAdapterClass(DefaultFeedHeaderViewAdapter.class)
      .build();

...

Code Block
languagejava
final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
    .tabUiEnabled(false) // 탭 비활성화
    .build();

탭의 디자인을 변경하기 위해서는 탭 UI 변경을 참고하시기 바랍니다

필터 기능

...

필터는 광고를 카테고리 별로 보다 세분화합니다. 필터는 탭에 종속되어 있습니다. 그래서, 탭이 비활성화되면 필터도 비활성화됩니다.

...

Code Block
languagejava
final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
    .tabUiEnabled(true) // 탭이 비활성화되면 필터도 비활성화 됩니다.
    .filterUiEnabled(false)  // 필터 비활성화
    .build();

필터의 디자인을 변경하기 위해서는 필터 UI 변경을 참고하시기 바랍니다.

광고 UI 자체 구현

BuzzAd Android SDK에서 제공하는 광고는 일반 광고와 쇼핑 적립 광고가 있습니다. 각각의 광고에 따라 UI를 변경하는 방법이 상이합니다. 일반 광고과 쇼핑 적립 광고의 UI를 모두 변경하기 위해서는 아래 2가지 가이드를 모두 적용해야합니다.

...

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

...

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

CTA 버튼 커스터마이징은 CTA 변경을 참고하시기 바랍니다.

Code Block
languagejava
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);
    }
}

...

  • AdfitNative ADN (연동 심사 불필요)

ADN 광고를 연동하기 위해서 ADN 연동을 참고하시기 바랍니다.