본문으로 건너뛰기

커스터마이징

전체 테마 변경하기

BuzzAd Android용 SDK에서 제공하는 기본 UI를 사용해 광고 지면의 색상, 아이콘 이미지 등 테마를 변경할 수 있습니다.

✏️  참고
테마를 변경하려면 BuzzAdBenefit.init()을 호출해 BuzzAd Android용 SDK를 초기화하기 전에 BuzzAdTheme.setGloabalTheme()을 호출해야 합니다.

버즈빌은 Application.onCreate에서 테마를 설정하는 것을 권장합니다. 각 속성 값에서 커스터마이징할 수 있는 UI에 대해서는 아래의 표를 참고하세요.

속성 값커스터마이징이 가능한 UI
rewardIcon
  • 모든 지면: CTA 뷰 리워드 아이콘
  • 피드: 프로필 배너 리워드 아이콘
  • 피드: 팝 opt-in 버튼 아이콘
  • 푸시: 푸시 알림 리워드 아이콘
participatedIcon
  • 모든 지면: CTA 뷰
ctaBackgroundSelector
  • 모든 지면: CTA 뷰
  • 안드로이드 뷰가 지원하는 state 적용 가능 (예: state_pressed, state_enabled 등)
ctaTextColorSelector
  • 모든 지면: CTA 뷰
  • 안드로이드 TextView가 지원하는 state 적용 가능 (예: stat_pressed, state_enabled 등)
ctaTextSize
  • 모든 지면: CTA 뷰
colorPrimaryDark
colorPrimary
colorPrimaryLight
colorPrimaryLighter
colorPrimaryLightest
  • 피드: 탭 UI, 필터 UI, 팝 아이콘 배경색 등
  • 인터스티셜: 피드 진입 경로 텍스트 색상
  • 팝: 팝 아이콘 배경색, 툴바 UI, 다른 앱 위에 그리기 권한 다이얼로그 UI 등
  • 푸시: 구독 다이얼로그 UI
  • Ext. Auth: 로그인 바텀 시트 UI
  • 개인 정보 수집 동의 UI

주요 색상 변경하기

BuzzAd Android용 SDK에서 제공하는 UI 중 다이얼로그의 버튼 색상, 바텀 시트 UI의 확인 버튼 등 앱에 연동한 모든 지면 내 주요 UI의 색상(Primary color)을 GlobalTheme을 사용해 변경할 수 있습니다.

다음은 앱에 연동한 전체 지면의 주요 색상을 변경하는 예시입니다.

BuzzAdTheme buzzAdTheme = new BuzzAdTheme()
...생략...
.colorPrimary(R.color.your_primary_color)
.colorPrimaryDark(R.color.your_primary_color_dark)
.colorPrimaryLight(R.color.your_primary_color_light)
.colorPrimaryLighter(R.color.your_primary_color_lighter)
.colorPrimaryLightest(R.color.your_primary_color_lightest);
BuzzAdTheme.setGlobalTheme(buzzAdTheme);

BuzzAdBenefit.init(...);

리워드 아이콘 변경하기

다음은 BuzzAdThemerewardIcon를 추가해 리워드 아이콘을 변경하는 예시입니다.

BuzzAdTheme buzzAdTheme = new BuzzAdTheme()
...생략...
.rewardIcon(R.drawable.your_reward_icon);
BuzzAdTheme.setGlobalTheme(buzzAdTheme);

BuzzAdBenefit.init(...);

CTA 버튼 커스터마이징하기

BuzzAd Android용 SDK에서 제공하는 CTA 버튼의 디자인을 변경할 수 있습니다.

CTA 버튼 디자인을 변경하려면 GlobalTheme을 설정해 앱에 연동된 모든 유형의 지면의 CTA 버튼 디자인을 변경하거나, 각 지면에서 개별적으로 변경해야 합니다.

또는 GlobalTheme을 설정한 후에 각 지면의 CTA 버튼 디자인을 개별적으로 변경할 수 있습니다. 앱에 연동한 모든 지면의 디자인을 효율적인 관리를 위해, 버즈빌은 GlobalTheme을 설정한 후에 각 지면의 CTA 버튼 디자인을 개별적으로 변경하는 방법을 권장합니다.

전체 지면의 CTA 버튼 디자인 변경하기

GlobalTheme을 설정해 피드, 네이티브, 인터스티셜의 CTA 버튼 디자인을 일괄적으로 설정할 수 있습니다.

ctaBackgroundSelector, ctaTextColorSelector처럼 이름에 selector가 포함된 옵션은 Android 개발 정책에 따라 설정하는 리소스에 지정한 <selector>가 포함되어야 합니다. 자세한 내용은 Android 공식 문서를 참고하세요.

전체 지면의 CTA 버튼 디자인을 변경하려면 ApplicationonCreate에서 다음과 같이 설정하세요.

BuzzAdTheme buzzAdTheme = new BuzzAdTheme()
...생략...
.participatedIcon(R.drawable.your_participated_icon) // 광고 참여 완료 후 CTA 버튼의 아이콘
.ctaBackgroundSelector(R.drawable.your_cta_background) // CTA 버튼의 배경 색상(state_enabled 필수 적용)
.ctaTextColorSelector(R.color.your_cta_text_color) // CTA 버튼의 텍스트 색상
.ctaTextSize(R.dimen.your_cta_text_size);// CTA 버튼의 텍스트 크기
BuzzAdTheme.setGlobalTheme(buzzAdTheme);

BuzzAdBenefit.init(...);

다음은 CTA 버튼의 배경 색상(ctaBackgroundSelector)을 설정하는 예시입니다.

<!-- your_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="@color/colorPrimaryDark"/>
<corners android:radius="4dp"/>
</shape>
</item>
<item android:state_enabled="false">
<shape>
<solid android:color="@color/gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
<item>
<shape>
<solid android:color="@color/colorPrimary"/>
<corners android:radius="4dp"/>
</shape>
</item>
</selector>

피드 지면의 CTA 버튼 디자인 변경하기

다음은 BuzzAdFeedTheme에서 구성 요소를 설정해 피드의 CTA 버튼 디자인을 변경하는 예시입니다.

final BuzzAdFeedTheme buzzAdFeedTheme = 
BuzzAdFeedTheme.getDefault()
...생략...
.ctaBackgroundSelector(R.color.your_background_color) // CTA 버튼의 배경 색상. state_enabled 필수
.ctaTextColorSelector(R.color.your_text_color) // CTA 버튼의 텍스트 색상
.rewardIcon(R.drawable.your_reward_icon) // 리워드 아이콘. 광고 참여전 CTA 버튼의 아이콘
.participatedIcon(R.drawable.your_participated_icon); // 광고 참여 완료 후 CTA 버튼의 아이콘
final BuzzAdFeed buzzAdFeed = new BuzzAdFeed.Builder()
.theme(buzzAdFeedTheme)
.build();

인터스티셜 지면의 CTA 버튼 디자인 변경하기

다음은 BuzzAdInterstitialTheme에서 구성 요소를 설정해 인터스티셜의 CTA 버튼 디자인을 변경하는 예시입니다.

final BuzzAdInterstitialTheme theme = 
BuzzAdInterstitialTheme
.getDefault()
.ctaBackgroundSelector(R.color.your_background_color)
.ctaTextColorSelector(R.color.your_text_color)
.ctaTextSize(R.dimen.your_cta_text_size)
.rewardIcon(R.drawable.your_reward_icon);
final BuzzAdInterstitial buzzAdInterstitial =
new BuzzAdInterstitial.Builder("YOUR_INTERSTITIAL_UNIT_ID")
...생략...
.theme(theme)
.buildDialog();

광고 참여 방식 변경하기

BuzzAd Android용 SDK는 사용자가 클릭한 광고나 콘텐츠에 설정된 URL을 Launcher로 전달하고, launch()에서는 광고를 어떤 브라우저로 보여줄지 결정합니다. 광고를 보여주는 브라우저는 외부 브라우저, 버즈빌의 인앱 브라우저, 그리고 직접 구현하는 커스텀 인앱 브라우저가 있습니다.

외부 브라우저나 버즈빌 인앱 브라우저의 경우 BuzzAd Android용 SDK의 기본 런처를 통해 둘 중 어느 브라우저를 사용할지 광고 설정에 따라 자동으로 결정됩니다. 커스텀 인앱 브라우저로 광고를 보여주려면 커스텀 런처를 등록해야 합니다.

커스텀 인앱 브라우저 사용하기

커스텀 인앱 브라우저로 광고를 보여주려면 먼저 커스텀 인앱 브라우저를 구현하고, 브라우저를 실행하기 위해 런처를 구현한 다음 BuzzAdBenefit에 설정해야 합니다.

커스텀 인앱 브라우저 구현

다음은 커스텀 인앱 브라우저를 구현하는 예시입니다. 커스텀 인앱 브라우저를 구현하려면 BuzzAdBrowser.getInstance(this).getFragment(url)을 사용해야 합니다. 그렇지 않으면 액션형 광고와 체류 리워드 광고가 제대로 동작하지 않을 수 있습니다.

public class CustomBrowserActivity extends AppCompatActivity {
public static final String KEY_URL = "com.sample.KEY_URL";
private BuzzAdBrowserFragment fragment;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_browser);

// URL을 KEY로 하여 WebView를 가지고있는 Fragment를 받아와 사용합니다.
Intent intent = getIntent();
fragment = BuzzAdBrowser.getInstance(this).getFragment(intent.getStringExtra(KEY_URL));
getSupportFragmentManager().beginTransaction().replace(R.id.browserContainer, fragment).commit();
final BuzzAdWebView webView = fragment.getWebView();

// Browser의 이벤트를 받을 수 있습니다. DeepLink가 열렸을 경우, Browser를 닫아주어야 빈 페이지가 보여지는 현상을 방지할 수 있습니다.
BuzzAdBrowser.getInstance(this).addBrowserEventListener(new BuzzAdBrowser.OnBrowserEventListener() {
@Override
public void onDeepLinkOpened() {
finish();
}
});
}

// Optional - BackButton을 눌렀을때 뒤로가기 기능
@Override
public void onBackPressed() {
final BuzzAdWebView webView = fragment.getWebView();
if (webView != null && webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}
}

다음은 커스텀 인앱 브라우저의 레이아웃을 구현하는 예시입니다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/browserContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

커스텀 런처 구현

구현한 인앱 브라우저를 사용하려면 커스텀 런처를 구현해야 합니다. 커스텀 런처를 구현할 때 광고와 콘텐츠에 따라 동작을 다르게 설정할 수 있으며, 콘텐츠의 sourceUrl에는 딥 링크를 설정할 수 있습니다.

다음은 커스텀 런처를 구현하고 커스텀 인앱 브라우저에서 광고를 실행하도록 구현한 예시입니다. 

public class MyLauncher implements Serializable, Launcher {

@Override
public void launch(@NonNull Context context, @NonNull LaunchInfo launchInfo) {
launch(context, launchInfo, null);
}

@Override
public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener) {
launch(context, launchInfo, listener, null);
}

@Override
public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List<Class<? extends BuzzAdJavascriptInterface>> javascriptInterfaces) {

// 커스텀 인앱 브라우저를 실행합니다.
final Intent intent = new Intent(context, CustomBrowserActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.putExtra(CustomBrowserActivity.KEY_URL, launchInfo.getUri().toString()); // URI는 변경 하면 안 됨
context.startActivity(intent);
}
}

커스텀 런처 설정

BuzzAdBenefit에 구현한 커스텀 런처를 설정하세요. 다음은 커스텀 런처를 설정하는 예시입니다.

BuzzAdBenefit.setLauncher(new MyLauncher());