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 15 Next »

개요

PopConfig 설정

PopConfig를 통해 Pop의 기능을 설정할 수 있습니다. BuzzAdBenefitConfig에 PopConfig를 추가합니다.

PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
        .build();
        
final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        .setPopConfig(popConfig)
        .build();
BuzzAdBenefit.init(this, buzzAdBenefitConfig);

Pop 활성화 버튼

Feed 지면에 Pop 지면 활성화 버튼을 표시할 수 있습니다. 사용자는 Pop 지면 활성화 버튼을 통해 자연스럽게 Pop 을 활성화할 수 있습니다. Pop 지면 연동 방법은 Pop 기본 설정 가이드에서 확인할 수 있습니다.

사용자에게 Pop 활성화 버튼을 표시하는 방법은 다음과 같습니다.

  • PopConfig를 설정하지 않고, FeedConfig를 아래와 같이 설정한 경우

    FeedConfig feedConfig = new FeedConfig.Builder(getApplicationContext(), YOUR_FEED_UNIT_ID)
            .optInFeatureList(Collections.singletonList(OptInFeature.Pop))
            .build();
  • PopConfig를 설정한 경우

    PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
            .build();
            
    final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
            .setPopConfig(popConfig) // PopConfig 설정
            .build();
    BuzzAdBenefit.init(this, buzzAdBenefitConfig);

위의 조건을 충족하도록 연동했다면, Pop을 활성화하지 않은 사용자에게 Pop 활성화 버튼이 보입니다.

Pop 활성화 버튼을 표시하지 않기 위해서는 아래와 같이 설정해야합니다. 위의 표시 가능 조건과 무관하게 Pop 활성화 버튼은 보이지 않습니다.

final FeedConfig feedConfig = new FeedConfig.Builder(context, "YOUR_FEED_UNIT_ID")
        .optInAndShowPopButtonHandler(null) // Pop 활성화 버튼 숨김
        .build();

커스텀 페이지 추가

Pop 지면을 이용하여 원하는 내용을 표시할 수 있습니다. 커스텀 페이지는 툴바와 컨텐츠로 이루어져있습니다.

  • 툴바에는 타이틀을 설정할 수 있습니다.

  • 컨텐츠영역에 원하는 Fragment를 설정할 수 있습니다.

아래 예시 코드에 따라 구현할 수 있습니다.

new PopNavigator().launchCustomFragment(
    context,
    new CustomInAppLandingInfo(
        new YourFragment(),
        R.stirng.your_title
    )
)

커스텀 페이지는 자유롭게 구현하여 사용할 수 있습니다. 예를 들어, 유틸리티 영역 혹은 툴바 영역에 버튼을 추가하고 원하는 페이지를 보여주기 위해 사용합니다. 유틸리티 영역과 툴바 영역의 커스터마이징https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2270135213/ver+2.25.x+6.2.3.#Pop-Feed-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95에서 확인할 수 있습니다.

Pop Service Notification 자체 구현

Pop이 정상적으로 동작하기 위해서 Service 를 필요로 합니다. 그래서 Pop이 활성화되어 있는 동안에 Service Notification이 보입니다.

다음은 Service Notification 을 직접 구현하여 BuzzAd Android SDK에서 제공하는 Notification 을 대체하는 방법을 안내합니다. Notification의 동작, UI 레이아웃까지 직접 구현하여 수정할 수 있습니다. 만일 BuzzAd Android SDK에서 제공하는 Notification 을 기반으로 간단한 UI 수정을 원하는 경우는 Notification UI 수정을 참고하시기 바랍니다.

Pop Notification 을 수정하기 위해서는 PopControlService 의 상속 클래스를 구현합니다. 필요에 따라 notificationChannel 을 생성하거나 View 를 등록할 수 있습니다. NotificationId는 PopNotificationConfig에서 설정할 수 있습니다. 구현한 상속 클래스는 Manifest에 등록해야 합니다.

PopControlService 은 몇 가지 편리한 기능을 제공합니다. 필요에 따라 사용할 수 있습니다.

API

설명

getPopPendingIntent(unitId, context)

Pop 지면으로 진입하는 PendingIntent 를 제공합니다.

아래는 Pop Service Notification 자체 구현하는 예시입니다.

public class YourControlService extends PopControlService {

    @Override
    protected Notification buildForegroundNotification(@NonNull String unitId, @NonNull PopNotificationConfig popNotificationConfig) {
        // Pop을 표시하는 PendingIntent (원형 아이콘ㅇ)
        PendingIntent popPendingIntent = getPopPendingIntent(unitId, this);

        // 필요에 따라 notificationChannel을 등록합니다.
        NotificationCompat.Builder builder;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            createNotificationChannelIfNeeded();
            builder = new NotificationCompat.Builder(this, NOTIFICATION_CHANNEL_ID);
        } else {
            builder = new NotificationCompat.Builder(this);
        }

        // Pop Service Notification 에 사용할 View 를 등록합니다.
        RemoteViews remoteView = new RemoteViews(getPackageName(), R.layout.view_custom_notification);
        builder.setSmallIcon(popNotificationConfig.getSmallIconResId())
                .setContent(remoteView)
                .setContentIntent(popPendingIntent)
                .setPriority(PRIORITY_LOW)
                .setShowWhen(false);
        if (popNotificationConfig.getColor() == null) {
            builder.setColor(popNotificationConfig.getColor());
        }
        return builder.build();
    }

    @TargetApi(Build.VERSION_CODES.O)
    private void createNotificationChannelIfNeeded() {
        final NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
        if (notificationManager.getNotificationChannel(NOTIFICATION_CHANNEL_ID) == null) {
            final NotificationChannel channel = new NotificationChannel(NOTIFICATION_CHANNEL_ID, NOTIFICATION_CHANNEL_NAME, NotificationManager.IMPORTANCE_LOW);
            channel.setShowBadge(false);
            notificationManager.createNotificationChannel(channel);
        }
    }
}
final PopNotificationConfig popNotificationConfig = new PopNotificationConfig.Builder()
                .notificationId(NOTIFICATION_ID)
                .build();

final PopConfig popConfig = new PopConfig.Builder(getApplicationContext(), UNIT_ID_POP)
        .popNotificationConfig(popNotificationConfig)
        .controlService(YourControlService.class)
        .build();

final BuzzAdBenefitConfig buzzAdBenefitConfig = new BuzzAdBenefitConfig.Builder(context)
        .setPopConfig(popConfig)
        .build();
// AndroidManifest.xml

<application
    ...생략...
    
    <service android:name=".java.YourControlService" />
    
    ...생략...
</application>

툴바 영역 View 자체 구현

툴바 영역에 직접 구현한 View를 등록하여 UI를 변경할 수 있습니다. Buzzvil Android SDK가 제공하는 UI을 이용하여 변경하는 방법과 사용하지 않고 변경하는 방법이 있습니다.

  1. SDK가 제공하는 UI를 이용하여 변경
    기본으로 제공되는 UI를 이용하여 변경하는 방법입니다. 간단하지만 제약이 있습니다.

  2. UI를 직접 구현하여 변경
    Notification의 동작, UI 레이아웃까지 직접 구현하여 변경하는 방법입니다.

1. SDK가 제공하는 UI를 이용하여 변경

DefaultPopToolbarHolder의 상속 클래스는 구현하여 툴바를 변경합니다. SDK에서 제공하는 PopToolbar 를 이용하여 정해진 레이아웃에서 변경합니다. 상속 클래스는 PopConfig의 feedToolbarHolderClass에 설정합니다.

다음은 SDK가 제공하는 UI를 이용하여 구현하는 예시입니다.

public class YourPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        toolbar = new PopToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용
        toolbar.setTitle("TemplatePopToolbarHolder"); // 툴바 타이틀 문구를 변경합니다.
        toolbar.setIconResource(R.mipmap.ic_launcher); // 툴바 좌측 아이콘을 변경합니다. 
        toolbar.setBackgroundColor(Color.LTGRAY); // 툴바 배경색을 변경합니다.

        addInquiryMenuItemView(activity, unitId); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.
        addRightMenuItemView1(activity, unitId); // custom 버튼 추가
        return toolbar;
    }

    // custom 버튼 추가는 toolbar.buildPopMenuItemView 를 사용하여 PopMenuImageView 를 생성하고
    // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.
    private void addRightMenuItemView1(@NonNull final Activity activity, @NonNull final String unitId) {
        PopMenuImageView menuItemView = toolbar.buildPopMenuItemView(activity, R.mipmap.ic_launcher);
        menuItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showInquiry(activity, unitId); // 문의하기 페이지로 연결합니다. 
            }
        });
        toolbar.addRightMenuButton(menuItemView);
    }
}
new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
      .feedToolbarHolderClass(YourPopToolbarHolder.class)
      .build();

2. UI를 직접 구현하여 변경

DefaultPopToolbarHolder의 상속 클래스는 구현하여 툴바를 변경합니다. SDK에서 제공하는 PopToolbar를 사용하지 않고 직접 구성한 레이아웃을 사용합니다. 상속 클래스는 PopConfig의 feedToolbarHolderClass에 설정합니다.

다음은 레이아웃을 직접 구성하여 구현하는 예제입니다.

public class YourPopToolbarHolder extends DefaultPopToolbarHolder {
    @Override
    public View getView(Activity activity, @NonNull final String unitId) {
        // 직접 구성한 layout 을 사용합니다
        ViewGroup root =  (ViewGroup) activity.getLayoutInflater().inflate(R.layout.your_pop_custom_toolbar_layout, null);

        View buttonInquiry = root.findViewById(R.id.yourInquiryButton);
        buttonInquiry.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 문의하기 페이지 열기
                showInquiry(activity, unitId);
            }
        });
        return root;
    }
}
new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
      .feedToolbarHolderClass(YourPopToolbarHolder.class)
      .build();

유틸리티 영역 커스터마이징

유틸리티 영역은 PopUtilityLayoutHandler의 상속 클래스를 구현하여 변경할 수 있습니다. 유틸리티 영역에 넣고 싶은 View를 직접 구현하여 onLayoutCreated 시 parent에 추가합니다. 상속 클래스는 PopConfig의 popUtilityLayoutHandlerClass에 설정합니다.

public final class CustomPopUtilityLayoutHandler extends PopUtilityLayoutHandler {

    private Context context;

    public CustomPopUtilityLayoutHandler(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    public void onLayoutCreated(ViewGroup parent) {
        LayoutInflater inflater = LayoutInflater.from(context);
        final FrameLayout layout = (FrameLayout) inflater.inflate(
                R.layout.your_pop_utility_view,
                parent,
                false
        );
        parent.addView(layout);
    }
}
new PopConfig.Builder(getApplicationContext(), "YOUR_POP_UNIT_ID")
      .popUtilityLayoutHandlerClass(CustomPopUtilityLayoutHandler.class)
      .build();

유틸리티 영역 아이콘 디자인 규격

  • 추천 이미지 사이즈

    • 24*24 dp (mdpi 기준)

    • 96*96 px (xxxhdpi까지 지원, 픽셀기준 최대 4배)

  • 아이콘은 PNG 와 벡터이미지가 모두 가능합니다.

  • 컬러 아이콘 사용 가능

Interstitial 광고 지면 추가

Pop 지면에 추가로 Interstitial 지면을 연동할 수 있습니다. 사용자가 Pop 지면을 이탈을 할 때, Interstitial 지면이 보입니다. Interstitial 지면을 추가하기 위해서는 PopConfig 에 Interstitial 지면 unit id를 설정합니다. Unit id 발급이 필요한 경우에는 버즈빌 매니저에게 문의하시기 바랍니다.

PopConfig popConfig = new PopConfig.Builder(context, "YOUR_POP_UNIT_ID")
      .popExitUnitId("YOUR_POP_EXIT_UNIT_ID")
      .build();

위의 Interstitial 지면은 제3의 ADN 광고를 할당할 수 있습니다. 더 많은 광고 물량 확보를 위해 제3의 ADN 연동을 권장합니다. 위의 Interstitial 지면에 연동할 수 있는 ADN은 다음과 같습니다.

  • AdfitNative ADN (단, 연동 심사 필요)

ADN 광고를 연동하기 위해서 ADN 연동을 참고하시기 바랍니다.

  • No labels