PopConfig 설정

...

PopConfig를 통해 Pop에서 원하는 Pop의 기능을 켜고 끌 제어할 수 있습니다. YOUR_POP_UNIT_ID에 Feed에서 사용한 Unit ID와 동일한 값을 넣어주세요. Application 의 OnCreate에 onCreate에 다음과 같이 추가합니다. BuzzAdBenefit.init 시점에 BuzzAdBenefitConfig 에 PopConfig를 설정합니다.

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

Pop Feed 커스터마이징

Custom Bottom Sheet

PopContentActivity 내에서 사용가능한 Custom Bottom Sheet 입니다. 일반적으로 PopUtilityLayoutHandler 를 Customize 후 유저가 UtilityLayout내 아이콘을 클릭시 호출합니다.

BottomSheet 호출 코드 (CustomPopUtilityLayoutHandler 사용)

Utility 버튼을 눌렀을 때 아래 코드를 호출하면 BottomSheet 이 열립니다.

...

1. line 1~6: bottomsheet 에서 사용할 view 와 동작을 지정할 수 있습니다.

val inflater: LayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val dialogView = inflater.inflate(R.layout.view_fragment_pop_bottom_sheet, null)
val textBottomSheet: TextView = dialogView.findViewById(R.id.textBottomSheet)
textBottomSheet.setOnClickListener {
    Toast.makeText(context, "text bottom sheet clicked", Toast.LENGTH_SHORT).show()
}
val dialog = BottomSheetDialog(context)
dialog.setContentView(dialogView)
dialog.show()

PopContentActivity 에 Theme을 적용하여 BottomSheet 좌우측 상단 모서리 둥글게 만들기

기본적으로 제공되는 BottomSheet은 사각형입니다. 좌우측 상단을 둥글게 사용하기 위해서는 다음과 같이 설정하면 됩니다.

...

1. 좌우측 상단 모서리가 둥근 drawable 을 준비합니다.

rounded_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>
</shape>

1. PopContentActivity 를 위한 theme(BuzzvilSamplePopContentActivityTheme) 을 준비합니다.

styles.xml BottomSheet 에서 위에서 설정한 좌우측이 둥근 background 를 사용할 수 있도록 설정합니다.

<style name="BuzzvilSamplePopContentActivityTheme" parent="Theme.Buzzvil.PopContentActivity">
    <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

<style name="AppBottomSheetDialogTheme"
    parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/AppModalStyle</item>
</style>

<style name="AppModalStyle"
    parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@drawable/rounded_dialog</item>
</style>

1. BuzzvilSamplePopContentActivityTheme 을 PopContentActivity 에 적용합니다.

AndroidManifest.xml를 통해 PopContentActivity 에 위에서 선언한 BuzzvilSamplePopContentActivityTheme 스타일을 사용하도록 설정합니다.

<activity android:name="com.buzzvil.buzzad.benefit.pop.PopContentActivity"
    tools:replace="android:theme"
    android:theme="@style/BuzzvilSamplePopContentActivityTheme"/>

Custom In-app-landing

Utility 영역이나 Toolbar 영역에 버튼을 추가한 경우, 유저가 버튼을 클릭했을때 새로운 activity로 랜딩시키거나 fragment로 랜딩시킬 수 있습니다. fragment를 이용하는 경우, 보다 자연스러운 UX를 만들 수 있습니다. Utility/Toolbar Customization 가이드를 참고하세요.

• activity로 랜딩하는 경우, startActivity를 이용하여 원하는 activity를 열 수 있습니다.

• fragment로 랜딩하는 경우, 정해신 방식을 따라야 합니다. (아래의 그림은 fragment로 in app landing 시켰을 경우의 예시입니다.)

  • BuzzAdBenefit SDK에서는 Fragment 내의 툴바를 제공하며, 매체사는 fragment 의 내용을 채워넣게 됩니다.

  • toolbar 영역은 제목의 텍스트만 변경가능합니다.

  • contents 영역은 모든 내용을 fragment 로 만들어 넣을 수 있습니다.

...

다음의 클래스가 필요합니다.

• PopNavigator: pop의 navigation을 담당하는 클래스

• CustomInAppLandingInfo: 랜딩하게 될 fragment의 내용에 대한 정보를 가지고 있는 클래스

  • fragment: 랜딩되는 화면의 컨텐츠를 담당하는 fragment 객체를 넘겨줍니다.

  • titleResId: 랜딩되는 화면의 타이틀의 resource id를 넘겨줍니다.

...

PopFeed 지면 활용

커스텀 페이지

커스텀 페이지는 툴바와 컨텐츠로 이루어져있습니다.

...

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

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

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

new PopNavigator().launchCustomFragment(
    context,
    new CustomInAppLandingInfo(
        new ExampleFragmentYourFragment(),
        R.stirng.exampleyour_title
    )
)

Exit 광고 설정

...

PopConfig 중 popExitUnitId 을 설정하면 뒤로가기 버튼 또는 Feed 닫기 버튼을 눌렀을 때(Pop feed 를 종료할 때) 광고를 보여줍니다.

Exit 광고에서 SDK 광고 (Adfit 등) 를 사용하려면 아래 내용을 추가합니다.

...

...

커스텀 페이지는 유틸리티 영역, 툴바 영역을 커스터마이징할때 사용할 수 있습니다.
유틸리티 영역과 툴바 영역의 커스터마이징은 여기에서 확인할 수 있습니다.