Content Comparison

...

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

Code Block

language	xml

<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>

...

서버에서 클라이언트로 전달되는 CustomPreviewMessageConfig 는 다음과 같은 정보를 가지고 있습니다.

Code Block

language	json

{
  "id": 5,
  "unit_id": 1234567890,
  "message": "오늘도 아케이드 게임하고 최대 90P 팡팡!",
  "landing_url": "deeplink://landing?activity=arcade",
  "start_date": "2020-03-01T00:00:00Z",
  "end_date": "2020-03-31T23:59:59Z",
  "start_hour_minute": "21:00",
  "end_hour_minute": "23:00",
  "dipu": 2,
  "tipu": 60,
  "dcpu": 1,
  "tcpu": 30,
  "icon": "http://imagelocation/arcade_icon.png"
}

...

Pop 의 CustomPreviewMessage 영역 (그림1)
- 설정된 기간, 시간 내에 dipu, tipu, dcpu, tcpu 에 따라 frequency capping 됩니다.
- frequency capping 에 의해 CustomPreviewMessage 가 보여져야 할 경우 AdPreview 와 ArticlePreview 보다 우선적으로 보여집니다.
PopFeedHeader 의 CustomPreviewMessage 영역 (그림2)
- frequency capping 되지 않고 설정된 기간, 시간내 라면 보여집니다.
- FeedConfig 를 customize 가능합니다
- FeedConfig 를 사용하면서 header 를 설정하지 않으면 CustomPreviewMessage 를 안보이게 설정 가능합니다

...

그림1. Pop 에 CustomPreviewMessage 가 표시된 모습

...

그림2. PopFeedHeader 에 CustomPreviewMessage 가 표시된 모습

...

Step 1. (Optional) PopFeedHeader Customize

DefaultPopHeaderViewAdapter 를 상속받아 CustomPopHeaderViewAdapter 를 만들고
getMessagePreviewLayout 를 오버라이드 합니다.
getMessagePreviewLayout 의 파라미터인 MessagePreview 안에 message, landingUrl, iconUrl 정보가 담겨있습니다.
line 9~17 3번에서 받아온 정보를 토대로 직접 layout 을 구성하고, clickEvent 처리할 수 있습니다.
line 24 FeedConfig.feedHeaderViewAdapterClass를 통해 1번에서 생성한 CustomPopHeaderViewAdapter 를 설정합니다.
line 29 PopConfig.feedConfig를 통해 5번에서 설정한 FeedConfig 를 설정합니다.

Code Block

language	java

public class CustomPopHeaderViewAdapter extends DefaultPopHeaderViewAdapter {
    @Nullable
    @Override
    protected View getMessagePreviewLayout(Context context, ViewGroup parent, MessagePreview messagePreview) {
        final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (inflater == null) {
            return null;
        }
        View viewMessagePreview = inflater.inflate(R.layout.view_custom_preview_message, parent, false);
        final TextView messagePreviewText = viewMessagePreview.findViewById(R.id.textCustomPreviewMessageTitle);
        messagePreviewText.setText(messagePreview.getMessage());
        viewMessagePreview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startDeeplinkActivity(context, messagePreview.getLandingUrl());
            }
        });
        return viewMessagePreview;
    }
}

final FeedConfig popFeedConfig = new FeedConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedHeaderViewAdapterClass(CustomPopHeaderViewAdapter.class)
        ...
        .build();
final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .feedConfig(popFeedConfig)
        ...
        .build();

...

PopConfig.previewIntervalInMillis를 통해서 Preview interval 을 설정합니다. AdPreview, ContentPreview/CustomPreviewMessage 동일하게 interval 이 설정됩니다.

Code Block

language	java

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        ...
        .previewIntervalInMillis(1 * 60 * 60 * 1000) // 1 hour
        ...
        .build();

...

Expand

title	예제 코드

Code Block

language	java

public class MyPopAdMessageView extends PopAdMessageView {

    private TextView textTitle, textDescription;

    public MyPopAdMessageView(@NonNull Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.view_my_pop_ad_message, this);
        this.textTitle = findViewById(R.id.textTitle);
        this.textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(int reward, int remainSeconds) {
        textTitle.setText(reward + "포인트 적립 가능합니다.");
        textDescription.setText(remainSeconds + "초 후에 닫힙니다.");
    }

    @Override
    public int getDurationInSeconds() {
        return 5;
    }
}

사용법

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popAdMessageViewClass(MyPopAdMessageView.class)

...

updateView: 매초마다 말풍선을 업데이트 하는데 업데이트 해야 할때마다 호출됩니다. 남은 시간(초)과 기사의 제목이 인자로 넘어옵니다.
getDurationInSeconds: 몇초동안 유지될 지 return해 줘야 합니다. 5초를 권장합니다.

getNativeArticleView: NativeArticleView 클래스의 인스턴스를 반환합니다. NativeArticleView는 LinearLayout을 상속받아 Impression과 Click을 처리합니다. PopArticleMessageViewClass의 뷰를 다음과 같이 설정합니다.

Code Block

language	xml

<?xml version="1.0" encoding="utf-8"?>
<com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/my_pop_message_native_article"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipToPadding="false">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:maxWidth="210dp"
            android:maxLines="2"
            android:text="Article preview title here."/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="disappearing..." />
    </LinearLayout>
</com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView>

Expand

title	예제 코드

Code Block

import com.buzzvil.buzzad.benefit.presentation.article.NativeArticleView;

public class MyPopArticleMessageView extends PopArticleMessageView {

    private final NativeArticleView nativeArticleView;
    private TextView textTitle, textDescription;

    public MyPopArticleMessageView(@NonNull Context context) {
        super(context);
        LayoutInflater.from(context).inflate(R.layout.bz_view_article_message, this);
        this.nativeArticleView = findViewById(R.id.my_pop_message_native_article);
        this.textTitle = findViewById(R.id.textTitle);
        this.textDescription = findViewById(R.id.textDescription);
    }

    @Override
    public void updateView(@Nullable String title, int remainSeconds) {
        textTitle.setText(title);
        textDescription.setText(remainSeconds + "초 후에 닫힙니다.");
    }

    @NonNull
    @Override
    public NativeArticleView getNativeArticleView() {
        return nativeArticleView;
    }

    @Override
    public int getDurationInSeconds() {
        return 5;
    }
}

사용법

Code Block

language	java

new PopConfig.Builder(getApplicationContext(), "POP_UNIT_ID")
    .popArticleMessageViewClass(MyPopArticleMessageView.class)

...

CustomPopToolbarHolder class

Code Block

language	java

// DefaultPopToolbarHolder 상속
public class CustomPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity) {
        // 직접 구성한 layout 을 사용합니다
        ViewGroup root =  (ViewGroup) activity.getLayoutInflater().inflate(R.layout.view_pop_custom_toolbar, null);

        View buttonInquiry = root.findViewById(R.id.buttonInquiry);
        buttonInquiry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 문의하기 페이지 열기
                showInquiry(activity);
            }
        });
        return root;
    }
}

CustomPopToolbarHolder에서 사용하는 layout.view_pop_custom_toolbar

Code Block

language	xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@color/bzv_white_100">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="16dp">

        <ImageView
            android:id="@+id/imageIcon"
            android:layout_width="154dp"
            android:layout_height="24dp"
            android:src="@drawable/bz_img_buzzvil_logo" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/buttonInquiry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="16dp"
            android:src="@drawable/bzv_ic_circle_question"
            android:tint="@color/bzv_gray_light" />

    </LinearLayout>

</LinearLayout>

...

Version	Old Version 4	New Version 5
Changes made by	Jamie Koo (Unlicensed)	Jamie Koo (Unlicensed)
Saved on	Jun 09, 2020	Jun 09, 2020

Versions Compared

Key

Step 1. (Optional) PopFeedHeader Customize