Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

Index

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

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

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

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

두 가지 방법 모두 Customize 할 수 있습니다. 자세한 내용은 아래를 참고 부탁드립니다.

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

  1. CTA 버튼 변경하기

  2. 툴바 Title 변경하기

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


Dialog 설정하기

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

Step 1. PushDialogConfig 설정

  1. colorConfirm: 확인버튼 색상 color resource id

  2. colorCancel: 취소버튼 색상 color resource id

  3. imageRegisterLogo: register dialog 로고 이미지 drawable resource id

  4. imageUnregisterLogo: unregister dialog 로고 이미지 drawable resource id

final PushDialogConfig pushDialogConfig = new PushDialogConfig.Builder()
                .colorConfirm(R.color.colorAccent)
                .colorCancel(R.color.colorPrimary)
                .imageRegisterLogo(R.drawable.benefit_push_dialog_image_logo)
                .imageUnregisterLogo(R.drawable.benefit_push_dialog_image_logo)
                .build();
                
private BuzzAdPush initBuzzAdPush() {
        return new BuzzAdPush(
                App.UNIT_ID_PUSH,
                CustomNotificationWorker.class,
                pushDialogConfig
        );
    }

BuzzAdPush buzzAdPush = initBuzzAdPush();

Step 2. Dialog Text 변경 (Optional)

Text 는 기본으로 제공되며, 필요한 경우 아래와 같은 방법으로 변경이 가능합니다.

./res/values-ko/strings.xml 에 Push 관련 string 을 같은 id PV-695 - Getting issue details... STATUS 로 입력하면 dialog text 가 변경됩니다.

Push 설명 Dialog
<string name="benefit_push_settings_dialog_register_step_1_title">리워드 광고 구독하기</string>
<string name="benefit_push_settings_dialog_register_step_1_message">원하는 시간대에 놓치는 리워드 광고를 모아서 참여할 수 있는 기능입니다. 간편하게 구독하고 푸짐한 리워드 받아가세요! 광고가 없는 경우에는 알림이 가지 않습니다.</string>
<string name="benefit_push_settings_dialog_register_step_1_confrim">다음</string>
<string name="benefit_push_settings_dialog_register_step_1_cancel">나중에 하기</string>

Push register (시간설정) Dialog
<string name="benefit_push_settings_dialog_register_step_2_title">구독 시간을 선택해 주세요</string>
<string name="benefit_push_settings_dialog_register_step_2_subscribe_all">모두 구독</string>
<string name="benefit_push_settings_dialog_register_step_2_confrim">완료</string>
<string name="benefit_push_settings_dialog_register_step_2_cancel">나중에 하기</string>

Push unregister Dialog
<string name="benefit_push_settings_dialog_unregister_title">구독을 취소합니다</string>
<string name="benefit_push_settings_dialog_unregister_message">지금 구독을 취소하면 더 이상 리워드 광고 구독하기 알림을 받아볼 수 없습니다. 취소 하시겠습니까?</string>
<string name="benefit_push_settings_dialog_unregister_confrim">구독 취소</string>
<string name="benefit_push_settings_dialog_unregister_cancel">나중에 하기</string>

Step 3. registerWithDialog/unregisterWithDialog 사용

이 방법을 사용하면 Push 에서 제공하는 Default Dialog 를 사용해서 간단하게 register/unregister 를 구현 가능합니다.

Register

Push register dialog 는 두개의 dialog 로 구성돼있습니다. 첫 번째는 Push 설명 Dialog, 두 번째는 Push 설정 Dialog.

registerWithDialog(Activity, OnRegisterListener)

registerWithDialog(Activity, showPushDescription, OnRegisterListener)

(Optional) 설명 Dialog 가 필요하지 않은 경우 registerWithDialogshowPushDescription 파라미터를 false 로 설정하면 됩니다.

buzzAdPush.registerWithDialog(activity, new BuzzAdPush.OnRegisterListener() {
    @Override
    public void onSuccess() {
        switchAdNotiRegister.setChecked(true);
    }

    @Override
    public void onCanceled() {
        switchAdNotiRegister.setChecked(false);
    }
});

Unregister

Unregister 확인 Dialog 를 보여주며 유저선택에 따라 unregister 합니다

unregisterWithDialog(Activity, OnRegisterListener)

buzzAdPush.unregisterWithDialog(activity, new BuzzAdPush.OnRegisterListener() {
    @Override
    public void onSuccess() {
    
    }

    @Override
    public void onCanceled() {
    
    }
});

2. Custom view - SDK 에서 제공하는 Register/Unregister dialog customize

이 방법은 Default 로 제공하는 Register Dialog 를 사용하지 않고, 직접 View 를 그리고 싶은 경우 사용합니다.

아래 함수들을 차례로 사용합니다.

Register

Step 1.

buzzAdPush.fetchPushHoursOptionIfNeeded: 설정 가능한 시간을 서버로부터 받아옵니다.

Step 2.

buzzAdPush.getPushHoursOption: fetch 후 설정 가능한 시간을 읽어옵니다. (fetch 에 실패해도 이 함수를 호출하면 Push에서 default 로 제공하는 값을 사용할 수 있습니다.)

// Step 1
buzzAdPush.fetchPushHoursOptionIfNeeded(
    activity,
    new PushRepository.OnFetchResultListener() {
        @Override
        public void onFetchFail() {
            // Step 2. fetch 에 실패해도 Push에서 default 로 제공하는 값을 사용할 수 있습니다
            List<Integer> list = buzzAdPush.getPushHoursOption(MainActivity.this);
        }
    
        @Override
        public void onFetchSuccess() {
            // Step 2
            List<Integer> list = buzzAdPush.getPushHoursOption(MainActivity.this);
        }
    });

Step 3.

buzzAdPush.setPushHours: 설정 가능한 시간 중 유저가 선택한 시간을 Push SDK 에 등록합니다.

Step 4.

buzzAdPush.register: 위 단계 설정이 끝나면 Push 를 등록하여 활성화합니다.

List<Integer> result = new ArrayList<>();
...
result.add(hour);
...
// Step 3
buzzAdPush.setPushHours(activity, result);
// Step 4
buzzAdPush.register(activity);

Unregister

Step 5.

buzzAdPush.unregister: Push 를 등록 해지 합니다.

buzzAdPush.unregister(activity);


Feed 설정하기

CTA Color 변경

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

기본 Color

변경 된 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 를 생성합니다.

    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 를 지정합니다.

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

  • No labels