(ver 2.29.x) 9. 커스터마이징

Owned by George Kim (Unlicensed)
Last updated: Nov 10, 2021 by 諸俊赫(Jesse) (Unlicensed)
6 min read

테마 적용

BuzzAd Benefit에서 제공하는 광고지면의 CTA 테마를 변경할 수 있습니다. 이 단계는 선택사항이긴 하지만 원하는 색상, 아이콘을 적용하는 단계이므로 적용하는 것을 권장합니다. 앱에서 사용중인 application theme에 Buzzvil에서 제공하는 attribute를 정의하여 간편하게 BuzzAd Benefit SDK의 CTA UI를 커스터마이징 할 수 있습니다.

attribute (type)

child attribute (type)

커스터마이징 되는 UI

attribute (type)

child attribute (type)

커스터마이징 되는 UI

buzzvilRewardIcon (reference)

N/A

  • [All] cta view 리워드 아이콘

  • [Feed] profile banner 리워드 아이콘

  • [Feed] pop opt-in 버튼 아이콘

  • [Pedometer] pop icon 리워드 아이콘

  • [Pedometer] header banner 리워드 아이콘

  • [Pedometer] milestone 리워드 아이콘

  • [Pedometer] notification 리워드 아이콘

  • [Push] notification 리워드 아이콘

  • [Bridge Point] appCurrencyIcon

buzzvilCtaViewStyle
(reference)

buzzvilCtaBackground
(reference) Cta 배경 설정
buzzvilCtaParticipatedIcon
(reference) 광고 참여 후 아이콘 설정
buzzvilCtaTextColor
(color|reference) Cta 텍스트 색상
buzzvilCtaTextSize
(dimension) Cta 텍스트 크기

  • [All] cta view

buzzvilColorPrimaryDark(reference|color)

N/A

[Feed] Tab UI, Filter UI, Pop FAB 배경색 등

[Interstitial] Feed 진입 경로 텍스트 색상

[Pop] Pop 아이콘 배경색, Toolbar UI, 다른 앱 위에 그리기 권한 다이얼로그 UI 등

[Push] 구독 다이얼로그 UI

[Ext. Auth] 바텀싯 UI

buzzvilColorPrimary (reference|color)

buzzvilColorPrimaryLight
(reference|color)

buzzvilColorPrimaryLighter (reference|color)

buzzvilColorPrimaryLightest (reference|color)



PrimaryColor 변경

BuzzAd SDK 에서 제공하는 UI 중 Dialog의 버튼 색상, Bottom sheet UI의 확인 버튼을 포함하한 일부 UI 의 색상을 아래와 같이 Theme 에서 설정할 수 있습니다.

<!-- Base application theme. --> <style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <item name="buzzvilColorPrimaryDark">@color/samplePrimaryDark</item> <item name="buzzvilColorPrimary">@color/samplePrimary</item> <item name="buzzvilColorPrimaryLight">@color/samplePrimaryLight</item> <item name="buzzvilColorPrimaryLighter">@color/samplePrimaryLighter</item> <item name="buzzvilColorPrimaryLightest">@color/samplePrimaryLightest</item> </style>

리워드 아이콘

리워드를 표시하는 아이콘 추가를 위해 application theme에 buzzvilRewardIcon 를 추가합니다.

<!-- Base application theme. --> <style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <!-- 생략 --> <item name="buzzvilRewardIcon">@drawable/your_reward_icon</item> </style>

CTA 변경

광고의 CTA의 색상, 아이콘 등을 변경하기 위해 application theme에 buzzvilCtaViewStyle 를 추가합니다.

<!-- Base application theme. --> <style name="YourAppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar"> <!-- 생략 --> <item name="buzzvilCtaViewStyle">@style/YourCtaViewStyle</item> </style> <style name="YourCtaViewStyle"> <item name="buzzvilCtaBackground">@drawable/your_background</item> <item name="buzzvilCtaParticipatedIcon">@drawable/your_participated_icon</item> <item name="buzzvilCtaRewardIcon">@drawable/your_reward_icon</item> <item name="buzzvilCtaTextColor">@color/your_text_color</item> <item name="buzzvilCtaTextSize">14sp</item> </style>

Cta 배경 예시

커스텀 런쳐 설정

Custom In-App Browser 사용법

  • 현재 Custom Launcher 를 사용하지 않을 경우 아래 가이드는 아무 영향이 없습니다.

  • Custome Launcher 사용할 예정이거나, 1.X 버전에서 이미 사용하고 있을 경우, 아래의 항목을 필수로 적용해야 합니다.

Custom launcher 사용시, 광고를 클릭했을 때 랜딩되는 In-App Browser를 Customize 할 수 있습니다. 예를 들어, 광고 랜딩 페이지 로드 등을 매체사가 지정하는 Class에서 구현할 수 있습니다.

구현시 주의사항 :

  • BuzzAdBrowser에서 제공하는 Fragment를 사용하여 In-App Browser를 구현해야 합니다. 사용하지 않을 경우, 일부 광고(액션형 광고, 체류 리워드 광고)가 제대로 동작하지 않을 수 있습니다.

  • Launcher에서 제공하는 LandingInfo 의 URL을 임의로 변경해서 사용하면 안됩니다. 이 경우 웹 페이지가 제대로 로드되지 않을 수 있습니다.

[1] CustomBrowserActivity 를 구현합니다.

[2] activity_custom_browser.xml

[3] Launcher 를 구현

[4] BuzzAdBenefit.init 호출 이후에 생성한 Launcher를 세팅

[+] Custom launcher 사용시 Article의 sourceUrl 사용법

컨텐츠의 경우 url scheme에 따라 랜딩 방식을 다르게 처리하고 싶다면 (ex. 앱 안에서 브라우저 오픈 없이 다른 화면으로 이동되는 컨텐츠) 다음과 같은 방법으로 NativeArticle 객체의 sourceUrl을 가져와 분기 처리를 할 수 있습니다.

[+] Custom launcher 사용시 광고 또는 컨텐츠인지 미리 판단하고 싶을 경우