| Table of Contents |
|---|
CtaView (버튼) 커스터마이징
CtaView를 Default로 제공되는 View가 아닌, 다른 모양의 View로 만들고 싶으신 경우 다음과 같이 설정을 진행하면 됩니다.
...
BuzzAd SDK 에서 기본으로 제공하는 CtaView UI 및 처리 로직을 사용하지 않고 기획에 맞게 구현할 경우 다음과 같이 진행할 수 있습니다.
| Info |
|---|
4.1. 기본 설정 | Step3 에서 안내한 populateAd 에서, CtaView 부분을 아래와 같이 수정합니다. |
| Code Block |
|---|
public void populateAd(final NativeAd nativeAd) {
final NativeAdView view = findViewById(R.id.native_ad_view);
final Ad ad = nativeAd.getAd();
final Creative.Type creativeType =// create ad.getCreative() == null ? null : ad.getCreative().getType(); component
...생략...
final YourCtaView ctaView = view.findViewById(R.id.your_cta_view);
// View를 상속받는 CustomCtaView class를 생성하여 원하는 모양의 CtaView를 사용 할 수 있습니다.updateCtaStatus(ctaView, nativeAd);
...생략...
final CustomCtaViewList<View> customizedCtaViewclickableViews = new view.findViewById(R.id.customCtaViewArrayList<>();
// 아래 정보를 이용하여 cta view를 업데이트
final String callToAction = nativeAd.getAd().getCallToAction();clickableViews.add(customizedCtaView);
...생략...
nativeAdView.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {
final int reward = nativeAd...getAd(생략).getReward(); // 주의사항 참조...
@Override
public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
final boolean participated =updateCtaStatus(ctaView, nativeAd.isParticipated();;
}
// 다음과 같은 function을 CustomCtaView class에 생성하여
텍스트 및 아이콘을 업데이트 할 수 있습니다. @Override
customizedCtaView.setCtaText(callToAction); // 텍스트 변경 public void customizedCtaView.setRewardText(reward);onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {
customizedCtaView.setRewardIcon(R.drawable.your_reward_icon); customizedCtaView.setParticiapted(participatedupdateCtaStatus(ctaView, nativeAd);
// 참여 완료된 광고에 대해서 UI를 처리하는 부분}
customizedCtaView.setBackgroundColor(Color.parseColor(“#3976FD”))});
}
// 변경하려는 "색상코드"를 입력
...
기획에 따라 수정될 수 있는 예시 코드입니다.
void updateCtaStatus(YourCtaView ctaView, NativeAd nativeAd) {
final List<View>String clickableViewscallToAction = new ArrayList<>nativeAd.getAd().getCallToAction();
final int reward = clickableViewsnativeAd.addgetAvailableReward(customizedCtaView);
final int totalReward = nativeAd...getAd().getReward();
final boolean participated = nativeAdViewnativeAd.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {isParticipated();
final boolean isClicked = nativeAd.isClicked();
final boolean isActionType = nativeAd...getAd().isActionType();
if (isClicked @Override
&& isActionType && !participated) {
public void onParticipated(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {ctaView.setCtaText("참여 확인 중");
ctaView.setRewardIcon(null);
ctaView.setRewardText(null);
} //else 퍼블리셔{
기획에 따라 UI 처리 if (totalReward > 0 && participated) {
// Customize 된 CtaView를 participated 상태에 맞게 업데이트 ctaView.setRewardIcon(R.drawable.your_reward_received_icon);
final boolean participated = nativeAdctaView.isParticipatedsetRewardText(null);
customizedCtaViewctaView.setParticipated(participatedsetCtaText("참여 완료");
} else if (reward > });
} |
광고 참여 상태에 따른 CTA 등 소재 표시 분기 처리 방법
아래 내용은 CtaView 를 Customization했을때만 해당하는 사항입니다.
Buzzvil Benefit SDK를 통해 내려가는 광고는 기본적으로 모두 리워드가 할당되어 있습니다. 다만 광고마다 리워드 적립 주기(기본 2시간)를 설정되어 있고 사용자가 리워드 적립 주기 내에 동일 광고를 다시 참여하는 경우 리워드가 적립되지 않습니다. 따라서 광고 렌더링시 다음과 같은 방법으로 분기 처리를 하여 기획 의도에 맞는 UI를 사용자에게 보여주어야 합니다.
예를 들어 어떤 광고의 IPU는 무제한이고 리워드 적립 주기는 1시간인 경우, 최초 참여시에는 리워드가 지급 되고 이후 1시간 내에 동일 광고가 노출되었을 때에는 광고를 참여하여도 리워드 지급이 되지 않으므로 CTA 등 UI를 "참여완료" 또는 "0P" 등으로 표시하여 사용자에게 리워드가 지급되지 않는 광고임을 알려주어야 합니다.
...
분기 처리시 사용되는 필드
Ad 객체의
reward_status: 버즈빌 서버에서 광고를 할당할 때 해당 광고에 대하여 리워드 적립 주기 내에 현재 사용자의 적립 내역이 존재하면 "received" 값을 넣어줍니다. (주의: reward_status가 "received"여도 reward의 값은 원래 리워드 금액이 그대로 기록되어 있습니다.)Ad 객체의
is_participated: 현재 할당 받은 광고들의 참여 상태를 sync하기 위한 값입니다. 광고 참여가 일어나면 해당 광고 및 메모리 상의 동일 광고들의 is_participated값이 true로 바뀌며 onParticipate 콜백이 호출됩니다. (주의: 버즈빌 서버에서 광고의 reward_status가 "received"로 내려온 경우에도 이번 할당에서 참여를 다시 하기 전까지 is_participated는 "false"로 설정되어 있습니다.)
분기 처리 예시 pseudo code
...
| language | java |
|---|
...
0) { ctaView.showRewardImage(R.drawable.your_reward_icon); ctaView.setRewardText(String.format(Locale.US, "+%,d", reward)); ctaView.setCtaText(callToAction); } else { ctaView.showRewardImage(null); ctaView.setRewardText(null); ctaView.setCtaText(callToAction); } } } |