{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"e8530ffa-3be0-46a7-a917-7081b2271138"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"e7754b94-c181-4c7d-887e-c644207de81b"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"테마 적용","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1100,"id":"f73c2393-5d2f-4188-b9e9-a1d8b29fc5ae","collection":"contentId-2441055216","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"BuzzAd Benefit에서 제공하는 광고지면의 CTA 테마를 변경할 수 있습니다. 이 단계는 선택사항이긴 하지만 원하는 색상, 아이콘을 적용하는 단계이므로 적용하는 것을 권장합니다. 앱에서 사용중인 application theme에 Buzzvil에서 제공하는 attribute를 정의하여 간편하게 BuzzAd Benefit SDK의 CTA UI를 커스터마이징 할 수 있습니다. ","type":"text"}]},{"type":"table","attrs":{"layout":"default"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"attribute (type)","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"child attribute (type)","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[297.0]},"content":[{"type":"paragraph","content":[{"text":"커스터마이징 되는 UI","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilRewardIcon","type":"text","marks":[{"type":"code"}]},{"text":" (reference)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"N/A","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[297.0]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[All] cta view 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Feed] profile banner 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Feed] pop opt-in 버튼 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Pedometer] pop icon 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Pedometer] header banner 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Pedometer] milestone 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Pedometer] notification 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Push] notification 리워드 아이콘","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[Bridge Point] ","type":"text"},{"text":"appCurrencyIcon","type":"text","marks":[{"type":"code"}]}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilCtaViewStyle","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(reference)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilCtaBackground","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(reference) Cta 배경 설정","type":"text"},{"type":"hardBreak"},{"text":"buzzvilCtaParticipatedIcon","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(reference) 광고 참여 후 아이콘 설정","type":"text"},{"type":"hardBreak"},{"text":"buzzvilCtaTextColor","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(color|reference) Cta 텍스트 색상 ","type":"text"},{"type":"hardBreak"},{"text":"buzzvilCtaTextSize","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(dimension) Cta 텍스트 크기","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[297.0]},"content":[{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"[All] cta view","type":"text"}]}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilColorPrimaryDark","type":"text","marks":[{"type":"code"}]},{"text":"(reference|color)","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":5,"colwidth":[254.0]},"content":[{"type":"paragraph","content":[{"text":"N/A","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":5,"colwidth":[297.0]},"content":[{"type":"paragraph","content":[{"text":"[Feed] Tab UI, Filter UI, Pop FAB 배경색 등","type":"text"}]},{"type":"paragraph","content":[{"text":"[Interstitial] Feed 진입 경로 텍스트 색상","type":"text"}]},{"type":"paragraph","content":[{"text":"[Pop] Pop 아이콘 배경색, Toolbar UI, 다른 앱 위에 그리기 권한 다이얼로그 UI 등","type":"text"}]},{"type":"paragraph","content":[{"text":"[Push] 구독 다이얼로그 UI","type":"text"}]},{"type":"paragraph","content":[{"text":"[Ext. Auth] 바텀싯 UI","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilColorPrimary","type":"text","marks":[{"type":"code"}]},{"text":" (reference|color)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilColorPrimaryLight","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"(reference|color)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilColorPrimaryLighter","type":"text","marks":[{"type":"code"}]},{"text":" (reference|color)","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[209.0]},"content":[{"type":"paragraph","content":[{"text":"buzzvilColorPrimaryLightest","type":"text","marks":[{"type":"code"}]},{"text":" (reference|color)","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"PrimaryColor 변경","type":"text"}]},{"type":"paragraph","content":[{"text":"BuzzAd SDK 에서 제공하는 UI 중 Dialog의 버튼 색상, Bottom sheet UI의 확인 버튼을 포함하한 일부 UI 의 색상을 아래와 같이 Theme 에서 설정할 수 있습니다. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"0bb86ad1-56fe-4adb-a0b0-ccba2cb9a9ca","collection":"contentId-2441055216","type":"file","height":1177}}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"리워드 아이콘","type":"text"}]},{"type":"paragraph","content":[{"text":"리워드를 표시하는 아이콘 추가를 위해 application theme에 ","type":"text"},{"text":"buzzvilRewardIcon","type":"text","marks":[{"type":"code"}]},{"text":" 를 추가합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"CTA 변경","type":"text"}]},{"type":"paragraph","content":[{"text":"광고의 CTA의 색상, 아이콘 등을 변경하기 위해 application theme에 ","type":"text"},{"text":"buzzvilCtaViewStyle","type":"text","marks":[{"type":"code"}]},{"text":" 를 추가합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Cta 배경 예시","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"커스텀 런처 설정","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom In-App Browser 사용법","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"현재 Custom Launcher 를 사용하지 않을 경우 아래 가이드는 아무 영향이 없습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Custome Launcher 사용할 예정이거나, 1.X 버전에서 이미 사용하고 있을 경우, 아래의 항목을 필수로 적용해야 합니다.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Custom launcher 사용시, 광고를 클릭했을 때 랜딩되는 In-App Browser를 Customize 할 수 있습니다. 예를 들어, 광고 랜딩 페이지 로드 등을 매체사가 지정하는 Class에서 구현할 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"구현시 주의사항","type":"text","marks":[{"type":"strong"}]},{"text":" :","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"BuzzAdBrowser에서 제공하는 Fragment를 사용하여 In-App Browser를 구현해야 합니다. 사용하지 않을 경우, 일부 광고(액션형 광고, 체류 리워드 광고)가 제대로 동작하지 않을 수 있습니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Launcher에서 제공하는 LandingInfo 의 URL을 임의로 변경해서 사용하면 안됩니다. 이 경우 웹 페이지가 제대로 로드되지 않을 수 있습니다.","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"[1] ","type":"text"},{"text":"CustomBrowserActivity","type":"text","marks":[{"type":"code"}]},{"text":" 를 구현합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class CustomBrowserActivity extends AppCompatActivity {\n public static final String KEY_URL = \"com.sample.KEY_URL\";\n private BuzzAdBrowserFragment fragment;\n\n @Override\n protected void onCreate(@Nullable Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_custom_browser);\n\n // URL을 KEY로 하여 WebView를 가지고있는 Fragment를 받아와 사용합니다.\n Intent intent = getIntent();\n fragment = BuzzAdBrowser.getInstance(this).getFragment(intent.getStringExtra(KEY_URL));\n getSupportFragmentManager().beginTransaction().replace(R.id.browserContainer, fragment).commit();\n final BuzzAdWebView webView = fragment.getWebView();\n\n // Browser의 이벤트를 받을 수 있습니다. DeepLink가 열렸을 경우, Browser를 닫아주어야 빈 페이지가 보여지는 현상을 방지할 수 있습니다.\n BuzzAdBrowser.getInstance(this).setOnBrowserEventListener(new BuzzAdBrowser.OnBrowserEventListener() {\n \n // 기존에 사용하던 isDeepLink 를 아래로 대체\n @Override\n public void onDeepLinkOpened() {\n finish();\n }\n });\n }\n\n // Optional - BackButton을 눌렀을때 뒤로가기 기능\n @Override\n public void onBackPressed() {\n final BuzzAdWebView webView = fragment.getWebView();\n if (webView != null && webView.canGoBack()) {\n webView.goBack();\n } else {\n super.onBackPressed();\n }\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"[2] ","type":"text"},{"text":"activity_custom_browser.xml","type":"text","marks":[{"type":"code"}]}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"?xml version=\"1.0\" encoding=\"utf-8\"?>\n\n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"[3] ","type":"text"},{"text":"Launcher","type":"text","marks":[{"type":"code"}]},{"text":" 를 구현","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class MyLauncher implements Serializable, Launcher {\n\n @Override\n public void launch(@NonNull Context context, @NonNull LaunchInfo launchInfo) {\n launch(context, launchInfo, null);\n }\n\n @Override\n public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener) {\n launch(context, launchInfo, listener, null);\n }\n\n @Override\n public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List> javascriptInterfaces) {\n \n // Custom Browser 실행\n final Intent intent = new Intent(context, CustomBrowserActivity.class);\n intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);\n intent.putExtra(CustomBrowserActivity.KEY_URL, launchInfo.getUri().toString()); // URI는 변경 하면 안 됨\n context.startActivity(intent);\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"[4] ","type":"text"},{"text":"BuzzAdBenefit.init","type":"text","marks":[{"type":"code"}]},{"text":" 호출 이후에 생성한 ","type":"text"},{"text":"Launcher","type":"text","marks":[{"type":"code"}]},{"text":"를 세팅","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"BuzzAdBenefit.setLauncher(new MyLauncher());","type":"text"}]},{"type":"paragraph","content":[{"text":"[+] Custom launcher 사용시 Article의 sourceUrl 사용법","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class MyLauncher implements Serializable, Launcher {\n @Override\n public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List> javascriptInterfaces) {\n if (launchInfo.getArticle() != null) {\n String sourceUrl = launchInfo.getArticle().getSourceUrl();\n }\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"컨텐츠의 경우 url scheme에 따라 랜딩 방식을 다르게 처리하고 싶다면 (ex. 앱 안에서 브라우저 오픈 없이 다른 화면으로 이동되는 컨텐츠) 다음과 같은 방법으로 ","type":"text"},{"text":"NativeArticle","type":"text","marks":[{"type":"code"}]},{"text":" 객체의 ","type":"text"},{"text":"sourceUrl","type":"text","marks":[{"type":"code"}]},{"text":"을 가져와 분기 처리를 할 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"[+] Custom launcher 사용시 광고 또는 컨텐츠인지 미리 판단하고 싶을 경우","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class MyLauncher implements Serializable, Launcher {\n ...\n @Override\n public void launch(@NonNull final Context context, @NonNull final LaunchInfo launchInfo, @Nullable final LauncherEventListener listener, @Nullable List> javascriptInterfaces) {\n \n // 광고 또는 컨텐츠인지 미리 판단하고 싶을 경우, 다음을 이용하여 확인\n if (launchInfo.getAd() != null) {\n // 광고\n } else if (launchInfo.getArticle() != null) {\n // 컨텐츠\n } \n \n ...// Custom Browser 실행\n }\n}","type":"text"}]}],"version":1}