Potto : Customize

Index

1 Custom 가능 영역
2 Potto 페이지 상단 제목
3 Potto 기능 튜토리얼 URL 변경
4 Potto Placeholder
5 Potto 광고의 CTA버튼 색상

Custom 가능 영역

Potto 페이지의 상단 제목
Tutorial의 landing URL
Potto의 placeholder 이미지와 문구
CTA 버튼 색상

Potto 페이지 상단 제목

PottoConfig 클래스를 이용하여 customize 할 수 있습니다. PottoConfig의 Builder 클래스를 이용하여 필요한 부분만 customize 하게 됩니다.

Potto 상단 제목을 변경하기 위해서는 titleResId에 원하는 string resource id를 추가해 줍니다. 필요한 설정이 완료되면 build() 함수를 호출해 PottoConfig 객체를 생성하고 PopConfig에 넘겨줍니다. Potto는 Pop에 포함된 기능이기 때문에 PopConfig에서 PottoConfig객체를 받아 가지고 있게 됩니다.

final PottoConfig pottoConfig = new PottoConfig.Builder(POTTO_UNIT_ID)
                .titleResId(R.string.pop_potto_sample_title)
                .build();
final PopConfig popConfig = new PopConfig.Builder(this, POP_UNIT_ID)
                .pottoConfig(pottoConfig);

Potto 기능 튜토리얼 URL 변경

Potto 우상단 물음표 아이콘(그림에서 Tutorial 영역) 클릭시에 Potto 기능에 대한 브라우저에서 튜토리얼 웹 페이지를 보여줄 수 있는데, 이때 보여지는 튜토리얼의 url을 변경할 수 있습니다. 이 튜토리얼 url은 PottoConfig 클래스에서 변경 가능한데, PottoConfig의 Builder 클래스를 이용하여 필요한 부분만 customize 하게 됩니다.

변경하기 위해서는 PottoConfig 의 tutorialUrl에 원하는 url string 을 추가해 줍니다. 필요한 설정이 완료되면 build() 함수를 호출해 PottoConfig 객체를 생성 합니다.

final PottoConfig pottoConfig = new PottoConfig.Builder(POTTO_UNIT_ID)
                .tutorialUrl("https://www.buzzvil.com")
                .build();
final PopConfig popConfig = new PopConfig.Builder(this, POP_UNIT_ID)
                .pottoConfig(pottoConfig);

Potto Placeholder

Potto의 Placeholder는 광고가 no fill 이거나, 이미 뽑기를 한 경우, 일요일에 당첨 확인을 기다리는 동안 보여주는 placeholder 이미지와 설명문구를 말합니다. placeholder의 이미지나, 문구를 변경하기 위해서는 PottoPlaceholer interface를 implementation하는 class를 만들어야 합니다. 해당 클래스에서는 placeholder 의 layout을 결정하는 view를 만들고, potto placeholder의 다양한 state에 대해 view를 업데이트 하는 역할을 합니다.

PottoPlacholer를 구현한 클래스가 만들어진 후에는 PottoConfig 클래스를 이용하여 customize할 수 있습니다. PottoConfig의 Builder 클래스를 이용하여 필요한 부분만 customize 하게 됩니다. Potto Placeholder를 변경하기 위해서는 placeHolderClass에 클래스 이름을 추가해 줍니다. 필요한 설정이 완료되면 build() 함수를 호출해 PottoConfig 객체를 생성하고 PopConfig에 넘겨줍니다.

final PottoConfig pottoConfig = new PottoConfig.Builder(POTTO_UNIT_ID)
                .placeHolderClass(CustomPottoPlaceHolder.class)
                .build();
final PopConfig popConfig = new PopConfig.Builder(this, POP_UNIT_ID)
                .pottoConfig(pottoConfig);

PottoPlaceholder interface를 구현하기 위해서는 다음과 같은 함수가 필요합니다.

getView에서는 원하는대로 placeholder의 layout을 만들고 inflate한 view를 리턴하도록 합니다. 이때 필요한 ImageView나 TextView를 멤버 변수로 지정해 놓도록 합니다.

updateView는 주어진 state에 대해 이미지와 텍스트를 어떻게 바꾸면 될 지 결정합니다. 이 함수는 potto의 state가 결정되면 SDK에서 호출하도록 되어있습니다. UpdateView에서는 State에 맞는 view를 그릴 수 있도록 작성해야 합니다.

Potto Placeholder의 State에 대한 설명은 다음과 같습니다.

State	설명

State	설명
DRAWABLE	현재 Potto는 뽑기 가능한 상태입니다.
ALREADY_DRAWN	오늘은 이미 뽑을 수 있는 번호를 모두 다 뽑은 상태입니다.
LAST_DAY	마지막날, 즉 일요일 입니다. 당첨번호를 확인할 수 있는 날입니다.
FAILED	유저가 Potto를 지속할 수 없는 상태입니다. 연속 이틀동안 Potto에 참여하지 않으면 이번주의 Potto는 더이상 참여할 수 없게 됩니다.
NEVER_PARTICIPATED	Failed와 같은 상태이긴 한데, 유저가 Potto에 한번도 참여한 적이 없어서 실패한 상태입니다. 일주일의 중간에 유입된 신규 유저일 가능성이 높습니다.

Potto 광고의 CTA버튼 색상

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

benefit_native_bg_cta_button_normal CTA 가 노출 됐을 때
benefit_native_bg_cta_button_pressed CTA 가 눌렸을 때
benefit_native_bg_cta_button_disabled CTA 가 비활성화 상태 일 때

이 값은 BuzzAd 의 모든 CTA color 를 변경합니다. 따라서 BuzzAd 연동시 색상값을 추가했다면 Potto 광고의 CTA color는 자동으로 변경됩니다.