포또(Potto)

이 페이지에서는 팝에 포또를 연동하고 커스터마이징하는 방법을 확인할 수 있습니다.

포또는 매주 월요일부터 일요일까지 1주일 단위로 운영되는 포인트와 로또를 접목하여 팝 피드 지면에 연동하는 게이미피케이션 기능입니다.

포또를 팝에 연동하면 사용자는 팝을 통해 포또 지면에 진입하여 광고에 참여하는 대신 번호를 뽑을 수 있습니다. 번호 뽑기는 매주 월요일부터 토요일까지 하루에 1회씩 가능하며 일요일 0시에는 토요일까지 6개의 번호를 모두 뽑은 사용자를 대상으로 당첨자를 추첨합니다. 사용자는 일요일 0시 이후에 포또 지면에서 자신의 당첨 여부와 당첨 번호를 확인할 수 있습니다. 당첨자에게는 매주 월요일 오전에 자동으로 포인트가 지급됩니다.

피드 툴바의 오른쪽에 추가되는 포또 진입 경로

광고에 참여하고 당첨 번호를 뽑을 수 있는 포또 지면

사용자의 앱 방문율을 높일 수 있는 포또는 사용자에게 다음 날까지 이틀 치의 번호 뽑기를 허용합니다. 아래의 예시와 포또 참여 가능 여부를 참고하세요.

사용자의 번호 뽑기 참여일	포또 참여 가능 여부
월요일: 참여하지 않음 화요일: 참여함, 월요일의 번호까지 뽑을 수 있음. 수요일: 참여 가능	해당 주에 계속해서 번호 뽑기 및 포또 추첨에 참여할 수 있습니다.
월요일: 참여하지 않음 화요일: 참여하지 않음 수요일: 참여 불가	해당 주에 번호 뽑기 및 포또 추첨에 참여할 수 없습니다.

기본 설정

준비 사항

기본형 팝 기본 설정 완료
포또 지면에 사용할 Unit ID (이하 YOUR_POTTO_UNIT_ID)
당첨자에게 지급하는 포인트 금액을 버즈빌 담당자에게 전달 완료

포또 지면의 Unit ID 설정하기

포또 지면은 팝 피드 상단의 포또 아이콘을 통해 열리는 지면입니다. 포또 지면을 연동하려면 먼저 BuzzAd 라이브러리를 초기화하는 시점에 YOUR_POTTO_UNIT_ID를 설정하세요.

final FeedConfig popFeedConfig = new FeedConfig.Builder(YOUR_POP_UNIT_ID).build();
final PopConfig popConfig = new PopConfig.Builder(popFeedConfig)
    .build();

final PopConfigBuilder popConfigBuilder = new PopConfig.Builder(popFeedConfig)
    .pottoConfig(new PottoConfig.Builder(YOUR_POTTO_UNIT_ID).build());

final popConfig = popConfigBuilder.build();
final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
    .setPopConfig(popConfig)
    .build();

BuzzAdBenefit.init(this, buzzAdBenefitConfig);

팝 피드 커스텀 툴바에 포또 아이콘 추가하기

포또 지면의 Unit ID(YOUR_POTTO_UNIT_ID)를 설정한 다음에는 팝 피드 툴바에 포또 아이콘을 표시해야 합니다.

`PopToolbar`에 포또 아이콘 추가하기

✏️ 참고
DefaultPopToolbarHolder를 사용하는 경우 이 토픽을 건너뛰어도 됩니다.

BuzzAd Android용 SDK에서 제공하는 PopToolbar 기본 UI를 수정한 후 포또 아이콘을 추가하려면 getView()에서 addPottoMenuItemView(activity)를 호출하세요.

public class YourPopToolbarHolder extends DefaultPopToolbarHolder {

    @Override
    public View getView(Activity activity, @NonNull String unitId) {
        super.toolbar = new PopToolbar(activity);
        toolbar.setTitle("YourPopToolbarHolder");
        toolbar.setBackgroundColor(Color.LTGRAY);

        super.addPottoMenuItemView(activity);
        return toolbar;
    }
}

직접 구현한 `PopToolbarHolder`에서 포또 아이콘 표시하기

✏️ 참고
DefaultPopToolbarHolder를 사용하는 경우 이 토픽을 건너뛰어도 됩니다.

PopToolbarHolder를 직접 구현한 경우(CustomPopToolbarHolder), ToolbarHolder의 뷰를 직접 그리게 되므로 포또 아이콘을 표시하는 설정이 필요합니다. 포또 아이콘을 표시하고 포또 지면으로 이동하는 동작을 구현하려면 다음의 절차를 따르세요.

getView() 메소드가 호출되면 shouldShowPotto()를 사용해서 포또를 사용할 수 있는지 확인하세요.
shouldShowPotto()에 대해 true가 호출되어 포또 기능을 사용할 수 있으면 setVisibility()에 VISIBLE을 사용하여 CustomPopToolbarHolder에 포또 아이콘을 표시하세요.
setOnClickListener()에서 showPotto(activity);를 호출하면 포또 지면으로 이동합니다.

public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull String unitId) {
        ViewGroup root = (ViewGroup) activity.getLayoutInflater().inflate(R.layout.view_pop_custom_toolbar, null);

        showPottoButtonIfNeeded(activity, root);

        return root;
    }

    private void showPottoButtonIfNeeded(Activity activity, ViewGroup root) {
        if (super.shouldShowPotto()) { //포또를 사용할 수 있는지 확인
            View buttonPotto = root.findViewById(R.id.buttonPotto);
            buttonPotto.setVisibility(View.VISIBLE);
            buttonPotto.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    CustomPopToolbarHolder.super.showPotto(activity);
                }
            });
        }
    }
}

✏️ 참고
CustomPopToolbarHolder를 구현하는 방법에 대한 자세한 내용은 기본형 팝의 고급 설정 토픽을 참고하세요.

포또 당첨 확률

사용자가 물음표 아이콘을 롱 클릭하면 1등 당첨 확률이 아래와 같이 툴팁으로 표시됩니다.

고급 설정

포또 버튼과 지면에서 구현할 수 있는 기능과 각 기능의 설정을 변경하는 방법을 확인할 수 있습니다. 포또 지면을 구성하는 주요 기능들은 아래 그림과 같습니다.

포또 지면을 구성하는 컴포넌트

툴바 텍스트 수정하기

PottoConfig의 Builder 클래스를 사용하여 포또 툴바 영역의 텍스트를 수정할 수 있습니다.

포또 툴바 영역의 텍스트를 수정하려면 다음의 절차를 따르세요.

titleResId에 원하는 문자열(string)의 리소스 ID를 추가하세요.
build() 함수를 호출해 PottoConfig 객체를 생성하고 PopConfig에 넘겨 주세요.
- 포또는 팝에 포함된 기능이기 때문에 PopConfig에서 PottoConfig 객체를 받아 가지고 있게 됩니다.

final PottoConfig pottoConfig = new PottoConfig.Builder(YOUR_POTTO_UNIT_ID)
                .titleResId(R.string.pop_potto_sample_title)
                .build();
final PopConfig popConfig = new PopConfig.Builder((Context)this, YOUR_POP_UNIT_ID)
                .pottoConfig(pottoConfig);

물음표 아이콘에 연결하는 URL 수정하기

사용자가 포또 지면의 오른쪽 상단에 위치한 물음표 아이콘을 탭하면 포또 기능의 사용법을 알려 주는 튜토리얼 URL이 WebView로 열립니다. 해당 URL을 PottoConfig의 Builder 클래스를 사용하여 원하는 주소로 변경할 수 있습니다.

⚠️ 주의
튜토리얼 URL 대신 다른 URL로 변경할 수 있으나 버즈빌에서 제공하는 URL에 포함되는 앱 정책상 필요 내용인 당첨 확률, 추첨 방법(포또의 경우 무작위), 우승자 수, 참가 마감일, 상품 제공일의 내용을 변경된 URL로 열리는 페이지에 포함해야 합니다.

포또 지면의 WebView 연결 URL을 수정하려면 다음의 절차를 따르세요.

PottoConfig의 tutorialUrl에 원하는 URL 스트링을 추가하세요.
build() 함수를 호출해 PottoConfig 객체를 생성하고 PopConfig에 넘겨주세요.

final PottoConfig pottoConfig = new PottoConfig.Builder(YOUR_POTTO_UNIT_ID)
                .tutorialUrl("https://www.buzzvil.com") // URL 문자열 예시
                .build();

final FeedConfig popFeedConfig = new FeedConfig.Builder(YOUR_POP_UNIT_ID).build();

final PopConfig popConfig = new PopConfig.Builder(popFeedConfig)
                .pottoConfig(pottoConfig)
                .build();

`PottoPlaceHolder` 구현하기

포또 지면에 광고가 할당되지 않거나, 월요일부터 토요일까지 포또 번호 추첨을 완료한 후 일요일에 당첨 결과 발표 전 포또 지면에 진입하는 사용자에게 보여주는 이미지와 텍스트를 포함하는 placeholder를 원하는 대로 구현할 수 있습니다.

`PottoPlaceHolder` 인터페이스를 구현하기 위한 함수

PottoPlaceHolder 인터페이스를 구현하려면 다음과 같은 함수가 필요합니다.

View getView(Context context);
void updateView(State state);

함수	설명
`getView`	원하는 대로 placeholder의 레이아웃을 만들고 inflate한 뷰를 리턴하도록 해야 합니다. 이때 필요한 ImageView나 TextView를 멤버 변수로 지정해야 합니다.
`updateView`	주어진 상태(`state`)에 대해 이미지와 텍스트를 어떻게 바꾸면 될지 결정합니다. 이 함수는 포또의 상태가 결정되면 SDK에서 호출하도록 되어 있습니다. UpdateView에서는 State에 맞는 view를 그릴 수 있도록 작성해야 합니다.

PottoPlaceHolder의 상태(state)에 대한 설명은 다음과 같습니다.

✏️ 참고
PottoPlaceHolder 아래의 CTA 버튼(placeholderButton) 텍스트는 PottoPlaceHolder의 상태(state)에 따라 변경되며, 커스텀할 수 없습니다.

상태	설명	CTA 버튼(`placeholderButton`) 텍스트
DRAWABLE	포또 번호 뽑기가 가능한 상태입니다.	`번호뽑기`
ALREADY_DRAWN	하루에 이미 뽑을 수 있는 번호를 모두 다 뽑은 상태입니다.	CTA 버튼이 나타나지 않음
LAST_DAY	포또 참여의 마지막 날인 매주 일요일입니다. 당첨 번호를 확인할 수 있는 상태입니다.	`번호 확인하기`
FAILED	사용자가 이틀 연속으로 포또에 참여하지 않아 해당 주에 더 이상 참여할 수 없는 상태입니다.	주중 & 토요일: CTA 버튼이 나타나지 않음 일요일: `번호 확인하기`
NEVER_PARTICIPATED	사용자가 한 번도 포또에 참여하지 않아 해당 주에 더 이상 참여할 수 없는 상태입니다. 포또의 사이클이 진행되는 한 주의 중간에 유입된 신규 사용자에게 NEVER_PARTICIPATED 상태의 placeholder가 노출될 가능성이 높습니다.	CTA 버튼이 나타나지 않음

`PottoPlaceHolder` 변경하기

PottoPlaceHolder의 이미지와 텍스트를 변경하려면 다음의 절차를 따르세요.

PottoPlaceHoler 인터페이스를 구현하는 클래스(CustomPottoPlaceHolder.class)를 생성하세요.

새로 생성한 클래스로 placeholder의 레이아웃을 결정하는 뷰를 만들고 포또 placeholder의 상태에 따라 뷰를 업데이트할 수 있습니다

PottoConfig의 Builder 클래스에서 placeHolderClass에 새로 생성한 클래스 이름(CustomPottoPlaceHolder.class)을 추가하세요.
build() 함수를 호출해 PottoConfig 객체를 생성하고 PopConfig에 넘겨주세요.

final PottoConfig pottoConfig = new PottoConfig.Builder(YOUR_POTTO_UNIT_ID)
                .placeHolderClass(CustomPottoPlaceHolder.class)
                .build();

final FeedConfig popFeedConfig = new FeedConfig.Builder(YOUR_POP_UNIT_ID).build();

final PopConfig popConfig = new PopConfig.Builder(popFeedConfig)
                .pottoConfig(pottoConfig)
                .build();

디자인 커스터마이징

포또 지면 CTA 버튼 디자인

포또 지면의 CTA 버튼(placeholderButton) 디자인은 Globaltheme의 설정대로 적용됩니다. Globaltheme은 BuzzAd Android용 SDK의 전체 지면 내 CTA 버튼의 구성 요소를 일괄적으로 관리할 수 있는 인터페이스입니다.

Globaltheme으로 CTA 버튼의 디자인을 변경하는 방법에 대한 자세한 내용은 전체 지면의 CTA 버튼 디자인 변경하기 토픽을 참고하세요.

✏️ 참고
PottoPlaceHolder 아래의 CTA 버튼(placeholderButton) 텍스트는 PottoPlaceHolder의 상태(state)에 따라 변경되며, 커스텀할 수 없습니다.

포또(Potto)

기본 설정​

준비 사항​

포또 지면의 Unit ID 설정하기​

팝 피드 커스텀 툴바에 포또 아이콘 추가하기​

PopToolbar에 포또 아이콘 추가하기​

직접 구현한 PopToolbarHolder에서 포또 아이콘 표시하기​

포또 당첨 확률​

고급 설정​

툴바 텍스트 수정하기​

물음표 아이콘에 연결하는 URL 수정하기​

PottoPlaceHolder 구현하기​

PottoPlaceHolder 인터페이스를 구현하기 위한 함수​

PottoPlaceHolder 변경하기​

디자인 커스터마이징​

포또 지면 CTA 버튼 디자인​