Index

Push는 다음의 두 가지 항목을 변경하여, 파트너 환경에 더 잘 어울리는 방식으로 사용할 수 있습니다.

[1] Dialog 를 보여주는 방식을 설정할 수 있습니다. 다음 두 가지 방법으로 Register/Unregister 를 할 수 있습니다.

1. Default dialog - SDK 에서 제공하는 Register/Unregister dialog 사용

2. Custom view - SDK 에서 제공하는 Register/Unregister 함수 사용

두가지 두 가지 방법 모두 Customize 할 수 있으며 방법은 아래에 소개합니다.

Index

...

있습니다. 자세한 내용은 아래를 참고 부탁드립니다.

[2] Feed 를 Customize 할 수 있습니다.

1. CTA 버튼 변경하기

2. 툴바 Title 변경하기

Push Feed 는 일부 커스터마이즈를 제한하고 있어, 다음의 항목만 커스터마이즈가 가능합니다. (버즈빌에서 이미 제공하는 Feed Type 을 사용하고 있는 경우, Push 의 피드와는 별도의 적용이 필요합니다.)

...

Dialog 설정하기

1. Default dialog - SDK 에서 제공하는 Register/Unregister dialog customize

...

buzzAdPush.unregister(activity);

...

Feed 설정하기

CTA Color 변경

여기에서는 CTA color 변경을 설명합니다. Color 변경 외에 CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우, 아래의 ‘CtaView (버튼) Customization’ 항목을 참조해주세요.

Image Added	기본 Color
Image Added	변경 된 Color

project 의 colors.xml 파일에 아래의 color resource 값을 추가 하면 CTA color 가 변경됩니다. (Benefit 의 모든 CTA Color 가 변경됩니다.)

• benefit_native_bg_cta_button_normal CTA 가 노출 됐을 때

• benefit_native_bg_cta_button_pressed CTA 가 눌렸을 때

• benefit_native_bg_cta_button_disabled CTA 가 비활성화 상태 일 때

<resources>
    ...
    <color name="benefit_native_bg_cta_button_normal">#1290FF</color>
    <color name="benefit_native_bg_cta_button_pressed">#0072E1</color>
    <color name="benefit_native_bg_cta_button_disabled">#DDDEDF</color>
</resources>

CtaView (버튼) Customization

CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 다음과 같이 설정을 진행하면 됩니다.

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

    final Ad ad = nativeAd.getAd();
    final Creative.Type creativeType = ad.getCreative() == null ? null : ad.getCreative().getType();
    
    ...
    // View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.
    final CustomCtaView customizedCtaView = view.findViewById(R.id.customCtaView);

    // 아래 정보를 이용하여 cta view를 업데이트
    final String callToAction = nativeAd.getAd().getCallToAction();
    final int reward = nativeAd.getAd().getReward(); // 주의사항 참조
    final boolean participated = nativeAd.isParticipated();
    
    // 다음과 같은 function을 CustomCtaView class에 생성하여 텍스트 및 아이콘을 업데이트 할 수 있습니다.
    customizedCtaView.setCtaText(callToAction);
    customizedCtaView.setRewardText(reward);
    customizedCtaView.setRewardIcon(R.drawable.your_reward_icon);
    customizedCtaView.setParticiapted(participated); // 참여 완료된 광고에 대해서 UI를 처리하는 부분
    customizedCtaView.setBackgroundColor(Color.parseColor(“#3976FD”)); // 변경하려는 "색상코드"

    ...

    final List<View> clickableViews = new ArrayList<>();
    clickableViews.add(customizedCtaView);
    ...

    nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
        ...

        @Override
        public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
            // 매체사 기획에 따라 UI 처리
            // Customize 된 CtaView를 participated 상태에 맞게 업데이트
            final boolean participated = nativeAd.isParticipated();
            customizedCtaView.setParticipated(participated);
        }
    });
}

※ 주의사항

유저가 적립을 받은지 시간이 얼마 지나지 않아서 리워드가 부여되지 않거나 또는 원래 광고 자체가 리워드를 가지고 있지 않은 경우가 있을 수 있습니다. 따라서 광고 레이아웃을 구성할 때 Ad Properties를 Assign 하는 과정에서 rewardImage와 rewardText에 대해서 reward > 0 인지 체크해서 리워드를 보여줄지 말지 결정하는 로직이 필요합니다 (아래의 샘플 코드 참조).

if (reward > 0) {
    customizedCtaVIew.showRewardImage(CtaView.ImageType.Default);
    customizedCtaVIew.setRewardText(String.format(Locale.US, "+%d", reward));
} else {
    customizedCtaVIew.showRewardImage(null);
    customizedCtaVIew.setRewardText(null);
}

Feed Toolbar 디자인 커스터마이즈

(중요) Feed Customization 주의사항

FeedToolbarHolder, class의 custom class를 생성할때 다음 조건 중 하나를 사용해야합니다. 아래의 조건에 맞지 않는 경우, class를 찾지못하는 현상이 발생하여 customization이 적용되지 않습니다.

• 각 클래스는 inner class 가 아니어야 합니다.

• Inner class로 생성을 해야할 경우, public static class로 선언이 되어야 합니다.

1. FeedToolbarHolder를 구현하는 class 를 생성합니다.

   Code Block
   language java
   public class CustomFeedToolbarHolder implements FeedToolbarHolder { private FeedActivityToolbar toolbar; @Override public View getView(final Activity activity, @NonNull final String unitId) { // FeedActivityToolbar is a default toolbar view that you can only change the title and view's attributes. // Create a custom view and return it if you would like to add more UI components. this.toolbar = new FeedActivityToolbar(activity, unitId); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { activity.finish(); } }); toolbar.setTitle("BuzzAdBenefit Feed"); toolbar.setBackgroundColor(Color.parseColor("#1290FF")); // 변경하려는 "색상코드" 를 입력 return toolbar; } @Override public void onTotalRewardUpdated(int totalReward) { // Use this callback if you want to show the current total points that users can get } }

2. FeedConfig 빌드 시점에 해당 FeedToolbarHolder class 를 지정합니다.

   Code Block
   language java
   final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID") ... .feedToolbarHolderClass(CustomFeedToolbarHolder.class) .build();