{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"목차","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"1"},"exclude":{"value":"목차"}},"macroMetadata":{"macroId":{"value":"5a0a4194c4cfdfd93dcbf56d68987a0a"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"dc415a47-ecd2-4996-af55-dbadc76b60de"}},{"type":"heading","attrs":{"level":1},"content":[{"text":"개요","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"4283cb7d-f824-497d-92e1-8d3e87224afc","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"이 문서","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"f6c3f9c8-511f-4aed-b161-14924eee2607"}}]},{"text":"에서 가이드 하는 내용은 BuzzAd Android SDK의 Feed 지면의 기능을 설명하고 각 기능을 변경하는 방법을 설명합니다.","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"이하 가이드에서 커스터마이징을 위해 구현 클래스를 정의합니다. 구현하는 클래스는 아래의 조건을 충족해야 합니다. 아래 조건을 충족하지 않는 경우 커스터마이징이 적용되지 않습니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"구현 클래스는 내부 클래스(Inner 클래스)가 아니어야 합니다.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"만일 내부 클래스로 생성을 해야 할 경우, public 정적(static) 클래스로 구현해야 합니다.","type":"text"}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"개인정보 수집 동의 UI","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"bc13b2d6-1e54-4fcb-91fa-b64938190756","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"개인 정보 보호법과 구글 정책에 따라, 개인 정보 수집 및 사용에 대한 사용자의 동의가 필요합니다. 사용자가 개인 정보 수집에 동의하지 않으면, Feed 지면에 광고가 할당되지 않습니다. BuzzAd Andorid SDK는 동의를 얻기 위한 UI를 제공합니다. Feed 지면에 처음 진입한 사용자에게는 위 이미지와 같은 UI가 보입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"BuzzAd Andorid SDK의 개인 정보 수집 동의 UI를 사용하지 않거나, 다시 표시하고 싶은 경우 아래 표를 참고하여 설정할 수 있습니다. ","type":"text"}]},{"type":"table","attrs":{"layout":"default","localId":"dd7e9b6b-ac84-45b8-87ea-e6b2a5c53921"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"API","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"설명","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzAdBenefit.getPrivacyPolicyManager();","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"PrivacyPolicyManager에 접근합니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzAdBenefit.getPrivacyPolicyManager()","type":"text"},{"type":"hardBreak"},{"text":".showConsentUI(context, listener);","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"개인 정보 수집 동의 UI를 표시합니다. ","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzAdBenefit.getPrivacyPolicyManager()","type":"text"},{"type":"hardBreak"},{"text":".grantConsent();","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"개인 정보 수집 동의합니다.","type":"text"},{"type":"hardBreak"},{"text":"사용자가 처음 Feed 지면에 진입하기 전에 호출하면 해당 사용자에게 개인 정보 수집 동의 UI가 보이지 않습니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzAdBenefit.getPrivacyPolicyManager()","type":"text"},{"type":"hardBreak"},{"text":".revokeConsent();","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"개인 정보 수집 동의를 철회합니다. ","type":"text"},{"type":"hardBreak"},{"text":"만일 철회하게 되면 사용자가 Feed 지면에 진입하면 개인 정보 수집 동의 UI가 표시됩니다.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[337.0]},"content":[{"type":"paragraph","content":[{"text":"BuzzAdBenefit.getPrivacyPolicyManager()","type":"text"},{"type":"hardBreak"},{"text":".isConsentGranted();","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[423.0]},"content":[{"type":"paragraph","content":[{"text":"개인 정보 수집 동의 여부를 확인합니다.","type":"text"}]}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"프로필 입력 배너","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"59f9b3d2-9fcc-4a4d-9d24-22be7a79ae03","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"사용자의 출생연도와 성별 정보를 설정하지 않으면 Feed 지면 상단에 프로필 정보 입력을 권장하는 배너가 표시됩니다. ","type":"text"},{"type":"hardBreak"},{"text":"사용자의 정보 제공 여부와 무관하게 배너를 표시하고 싶지 않을 수 있습니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"를 수정하여 프로필 입력 배너를 표시하지 않는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .profileBannerEnabled(false) // 프로필 배너 미노출\n .build(); ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"프래그먼트로 Feed 연동","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"f9af8c24-94da-4d1e-bf39-94e017af1791","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"Feed 지면은 기본적으로 제공되는 액티비티로 제공됩니다. 더 다양한 연동 방식을 지원하기 위해 액티비티가 아닌 프래그먼트로 Feed 지면을 연동할 수 있습니다. 프래그먼트를 추가하고자 하는 액티비티에 프래그먼트를 추가하고, 해당 액티비티의 onCreate에서 프래그먼트를 초기화합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 ","type":"text"},{"text":"FeedFragment","type":"text","marks":[{"type":"code"}]},{"text":"를 연동하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"\n\n...생략...\n\n\n\n\n...생략...\nclass YourActivity extends Actvity {\n private FeedHandler feedHandler;\n\n @Override\n public void onCreate() {\n super.onCreate();\n ...생략...\n \n // 광고를 새로 받기 위해 필요한 부분입니다.\n feedHandler = new FeedHandler(context, \"YOUR_FEED_UNIT_ID\");\n \n // FeedFragment 초기화\n final FeedFragment feedFragment = (FeedFragment) getSupportFragmentManager().findFragmentById(R.id.feed_fragment);\n if (feedFragment != null) {\n feedFragment.init(context, \"YOUR_FEED_UNIT_ID\");\n }\n }\n\n ...생략...\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"FeedFragment의 UI도 ","type":"text"},{"text":"Feed 디자인 커스터마이징","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~79598069/pages/2352874316"}}]},{"text":"을 참고하여 변경할 수 있습니다. (단, FeedFragment는 툴바 영역이 없습니다.)","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"Feed ","type":"text"},{"text":"무한 스크롤","type":"text","marks":[{"type":"annotation","attrs":{"annotationType":"inlineComment","id":"f89e7830-06a2-43d4-9c2c-e17582f5e03f"}}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1094,"id":"ebe4fa67-f6f8-4ce8-808c-da6f8524d85e","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"Feed 무한 스크롤 기능이 활성화되어 있으면 사용자에게 마지막 광고가 보였을 때 광고를 추가로 할당받습니다. 추가 요청에서 광고가 할당되지 않으면 더 이상 요청하지 않습니다. FeedConfig를 설정하여 무한 스크롤 기능을 비활성화할 수 있습니다. 기본적으로 Feed 무한 스크롤 기능은 활성화됩니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .autoLoadingEnabled(false) // Feed 무한 스크롤 기능 비활성화\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"툴바 영역 자체 구현","type":"text"}]},{"type":"paragraph","content":[{"text":"Feed 툴바 영역의 디자인을 변경할 수 있습니다. 툴바 영역을 UI를 변경하는 방법은 2가지입니다. 아래 2가지 방법 중 하나를 선택하여 연동합니다. ","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"},"include":{"value":"(SDK에서 기본으로 제공하는 UI를 이용하는 방법)|(직접 구현한 Custom View를 이용하는 방법)"}},"macroMetadata":{"macroId":{"value":"c3b2a01d03f9684ca27ed869e303f0e7"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"51e8d21c-93b9-4633-a907-8647369e708e"}},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"0bc7b2c2-786a-4343-8368-069a2b337ef4","collection":"contentId-2352874133","type":"file","height":572}}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"SDK에서 기본으로 제공하는 UI를 이용하는 방법","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"BuzzAd Android SDK에서 제공하는 UI를 수정하여 타이틀 혹은 배경색을 변경할 수 있습니다. 다음은 BuzzAd Android SDK의 기본 UI를 수정하여 툴바를 변경하는 예시입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"DefaultFeedToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":"의 상 클래스를 구현하고, 기본으로 제공되는 UI(","type":"text"},{"text":"FeedToolbar","type":"text","marks":[{"type":"code"}]},{"text":")를 사용하여 타이틀 혹은 배경색을 변경합니다. 그리고 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"에 구현한 클래스를 추가합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class YourFeedToolbarHolder extends DefaultFeedToolbarHolder {\n\n @Override\n public View getView(Activity activity, @NonNull final String unitId) {\n toolbar = new FeedToolbar(activity); // PopToolbar 에서 제공하는 기본 Template 사용\n toolbar.setTitle(\"YourFeedToolbarHolder\");\n toolbar.setIconResource(R.drawable.your_icon);\n toolbar.setBackgroundColor(YourColor);\n\n addInquiryMenuItemView(activity); // 문의하기 버튼은 이 함수를 통해 간단하게 추가 가능합니다.\n addSettingsMenuItemView(activity); // 세팅 버튼은 이 함수를 통해 간단하게 추가 가능합니다.\n addRightMenuItemView1(activity); // custom 버튼 추가\n return toolbar;\n }\n\n // custom 버튼 추가는 DefaultMenuLayout 를 사용하여 View 를 생성하고\n // toolbar.addRightMenuButton 를 사용하여 toolbar 에 추가합니다.\n private void addRightMenuItemView1(@NonNull final Activity activity) {\n MenuLayout menuLayout = new DefaultMenuLayout(activity, R.mipmap.ic_launcher);\n menuLayout.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n showInquiry(); // showInquiry 를 호출하여 문의하기 페이지로 연결합니다.\n }\n });\n toolbar.addRightMenuButton(menuLayout);\n }\n}\n","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .feedToolbarHolderClass(YourFeedToolbarHolder.class)\n .build();","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"직접 구현한 Custom View를 이용하는 방법","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"BuzzAd Android SDK에서 제공하는 UI를 이용하지 않고 직접 구현하여 변경할 수 있습니다. 다음은 Custom View를 직접 생성하여 툴바를 변경하는 예시입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"DefaultFeedToolbarHolder","type":"text","marks":[{"type":"code"}]},{"text":"의 상속 클래스를 구현하고, Custom View(","type":"text"},{"text":"your_toolbar_header_layout","type":"text","marks":[{"type":"code"}]},{"text":")를 구현하여 툴바 영역에 View를 구현합니다. 그리고 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"에 구현한 클래스를 추가합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class YourFeedToolbarHolder extends DefaultFeedToolbarHolder {\n\n @Override\n public View getView(final Activity activity, @NonNull final String unitId) {\n final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n return inflater.inflate(R.layout.your_toolbar_header_layout, null);\n }\n\n @Override\n public void onTotalRewardUpdated(int totalReward) {\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .feedToolbarHolderClass(YourFeedToolbarHolder.class)\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":"Custom View의 높이가 안드로이드 액티비티의 기본 액션바 높이와 다를 경우, 직접 구현한 View가 정상적으로 보이지 않을 수 있습니다. 이 경우에는 액티비티에 Theme 을 설정하여 액션바 높이를 수정해야 합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 Theme을 설정하여 액션바의 높이를 수정하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"// AndroidManifest.xml\n\n...\n\n\n \n...","type":"text"}]},{"type":"codeBlock","attrs":{"language":"xml"},"content":[{"text":"// styles.xml\n ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"적립 가능 금액 표시","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"4cc91d2e-82e6-4815-a05f-99e9a651179a","collection":"contentId-2352874133","type":"file","height":572}}]},{"type":"paragraph","content":[{"text":"헤더 영역에 BuzzAd Android SDK 에서 기본으로 제공하는 UI를 사용해 “총 적립 가능 금액“을 사용자에게 보여줍니다. UI를 변경하기 위해서는 헤더 영역을 자체 구현해야 합니다. 헤더 영역을 자체 구현하는 방법은 아래 ","type":"text"},{"text":"헤더 영역 자체 구현","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352874133/ver+2.27.x+3.2.#%ED%97%A4%EB%8D%94-%EC%98%81%EC%97%AD-%EC%9E%90%EC%B2%B4-%EA%B5%AC%ED%98%84"}}]},{"text":"을 참고하시기 바랍니다. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .feedHeaderViewAdapterClass(DefaultFeedHeaderViewAdapter.class)\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"헤더 영역 자체 구현","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"1fd6767a-93ba-4187-9a5d-fb1c15dd1319","collection":"contentId-2352874133","type":"file","height":572}}]},{"type":"paragraph","content":[{"text":"Feed 헤더 영역을 자유로이 활용할 수 있습니다. 예를 들어, Feed 영역을 설명하는 공간으로도 활용할 수 있습니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"필요에 따라 직접 구현한 UI 에 적립 가능한 금액을 표시할 수 있습니다. ","type":"text"},{"text":"onBindView","type":"text","marks":[{"type":"code"}]},{"text":"를 통해 지급 가능한 금액(","type":"text"},{"text":"reward","type":"text","marks":[{"type":"code"}]},{"text":")을 알 수 있습니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 헤더 영역을 변경하는 예시입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"FeedHeaderViewAdapter","type":"text","marks":[{"type":"code"}]},{"text":"의 구현 클래스를 구현하고, 구현한 Custom View(","type":"text"},{"text":"your_feed_header_layout","type":"text","marks":[{"type":"code"}]},{"text":")를 헤더영역에 구현합니다. 그리고 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"에 구현한 클래스를 추가합니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class CustomFeedHeaderViewAdapter implements FeedHeaderViewAdapter {\n @Override\n public View onCreateView(final Context context, final ViewGroup parent) {\n final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);\n return inflater.inflate(R.layout.your_feed_header_layout, parent, false);\n }\n\n @Override\n public void onBindView(final View view, final int reward) {\n // Display total reward on the header if needed.\n final View rewardLayout = view.findViewById(R.id.rewardLayout);\n if (reward == 0) {\n rewardLayout.setVisibility(View.GONE);\n } else {\n rewardLayout.setVisibility(View.VISIBLE);\n final TextView rewardTextView = view.findViewById(R.id.rewardText);\n final String rewardText = view.getContext().getString(R.string.bz_feed_header_view_reward_text, reward);\n rewardTextView.setText(rewardText);\n }\n }\n \n @Override \n public void onDestroyView() {\n // Use this this callback for clearing memory \n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .feedHeaderViewAdapterClass(CustomFeedHeaderViewAdapter.class)\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"광고 분류 기능","type":"text"}]},{"type":"paragraph","content":[{"text":"Feed지면에서는 사용자가 광고를 선택적으로 참여할 수 있도록 탭과 필터 기능을 지원합니다.","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"2"},"maxLevel":{"value":"7"},"include":{"value":"(탭 기능)|(필터 기능)"}},"macroMetadata":{"macroId":{"value":"feb7eee3a8e801e3b375986c1edc7f50"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"895f7723-392c-4386-bd0d-a6b5776f55a2"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"탭 기능","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"82492213-a017-40b4-9ecc-aab90a899b78","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"사용자가 광고를 분류하여 볼 수 있도록 탭과 필터 기능이 기본으로 제공됩니다. 탭은 일반 광고(노출형 및 참여형)와 쇼핑 적립형 광고를 구분하는 역할을 합니다. 기본값은 True입니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"를 수정하여 탭을 비활성화하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .tabUiEnabled(false) // 탭 비활성화\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":" 탭의 디자인을 변경하기 위해서는 ","type":"text"},{"text":"탭 UI 변경","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352874316/ver+2.27.x+3.3.#%ED%83%AD-UI-%EB%B3%80%EA%B2%BD"}}]},{"text":"을 참고하시기 바랍니다","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":3},"content":[{"text":"필터 기능","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"a2d23a0b-b200-4aa9-aa7e-d6cfea769fd8","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"필터는 광고를 카테고리 별로 보다 세분화합니다. 필터는 탭에 종속되어 있습니다. 그래서, 탭이 비활성화되면 필터도 비활성화됩니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 ","type":"text"},{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"를 수정하여 필터를 비활성화하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .tabUiEnabled(true) // 탭이 비활성화되면 필터도 비활성화 됩니다.\n .filterUiEnabled(false) // 필터 비활성화\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":"필터의 디자인을 변경하기 위해서는 ","type":"text"},{"text":"필터 UI 변경","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352874316/ver+2.27.x+3.3.#%ED%95%84%ED%84%B0-UI-%EB%B3%80%EA%B2%BD"}}]},{"text":"을 참고하시기 바랍니다. ","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"광고 UI 자체 구현","type":"text"}]},{"type":"paragraph","content":[{"text":"BuzzAd Android SDK에서 제공하는 광고는 일반 광고와 쇼핑 적립 광고가 있습니다. 각각의 광고에 따라 UI를 변경하는 방법이 상이합니다. 일반 광고과 쇼핑 적립 광고의 UI를 모두 변경하기 위해서는 아래 2가지 가이드를 모두 적용해야합니다. ","type":"text"}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"},"include":{"value":"(일반 광고 UI 자체 구현)|(쇼핑 적립 광고 UI 자체 구현)"}},"macroMetadata":{"macroId":{"value":"85d4a1aa22eafa253730d677aac9feb0"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"66199ffd-5232-47b0-951d-4370da04e837"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"일반 광고 UI 자체 구현","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"07dad7ba-f66d-401e-ba7a-3b98cb6ed83b","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"다음은 일반 광고의 디자인을 변경하는 방법을 설명하는 예시입니다.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"일반 광고용 NativeAdView의 규격에 맞는 레이아웃(","type":"text"},{"text":"your_feed_ad.xml","type":"text","marks":[{"type":"code"}]},{"text":")을 구현합니다. ","type":"text"}]},{"type":"codeBlock","content":[{"text":"// your_feed_ad.xml\n\n\n \n // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다.\n \n \n \n \n \n \n \n \n","type":"text"}]},{"type":"paragraph","content":[{"text":"AdsAdapter의 상속 클래스를 구현합니다. 구현한 상속 클래스의 onCreateViewHolder에서 ","type":"text"},{"text":"your_feed_ad.xml","type":"text","marks":[{"type":"code"}]},{"text":"을 사용하여 NativeAdView를 생성합니다. 그리고 FeedConfig에 구현한 ","type":"text"},{"text":"YourAdsAdapter","type":"text","marks":[{"type":"code"}]},{"text":"를 설정합니다. CTA 버튼 커스터마이징은 ","type":"text"},{"text":"CTA 변경","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352875706/ver+2.27.x+9.#CTA-%EB%B3%80%EA%B2%BD"}}]},{"text":"을 참고하시기 바랍니다. ","type":"text"},{"type":"hardBreak"},{"text":"(아래 예시에서 아이콘을 그리기 위해 ","type":"text"},{"text":"ImageLoader","type":"text","marks":[{"type":"code"}]},{"text":" 라이브러리를 사용하였습니다.)","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class YourAdsAdapter extends AdsAdapter {\n\n @Override\n public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\n final LayoutInflater inflater = LayoutInflater.from(parent.getContext());\n final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.your_feed_ad, parent, false);\n return new NativeAdViewHolder(feedNativeAdView);\n }\n\n @Override\n public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {\n final NativeAdView view = (NativeAdView) holder.itemView;\n\n final Ad ad = nativeAd.getAd();\n \n // create ad component\n final MediaView mediaView = view.findViewById(R.id.mediaView);\n final TextView titleView = view.findViewById(R.id.textTitle);\n final ImageView iconView = view.findViewById(R.id.imageIcon);\n final TextView descriptionView = view.findViewById(R.id.textDescription);\n final CtaView ctaView = view.findViewById(R.id.ctaView);\n final CtaPresenter ctaPresenter = new CtaPresenter(ctaView); // CtaView should not be null\n\n // data binding \n ctaPresenter.bind(nativeAd);\n\n if (mediaView != null) {\n mediaView.setCreative(ad.getCreative());\n mediaView.setVideoEventListener(new VideoEventListener() {\n // Override and implement methods\n\n @Override\n public void onVideoStarted() {}\n\n ...생략...\n \n });\n }\n \n if (titleView != null) {\n titleView.setText(ad.getTitle());\n }\n\n if (iconView != null) {\n ImageLoader.getInstance().displayImage(ad.getIconUrl(), iconView);\n }\n if (descriptionView != null) {\n descriptionView.setText(ad.getDescription());\n }\n\n // clickableViews에 추가된 UI 컴포넌트를 클릭하면 광고 페이지로 이동합니다.\n final Collection clickableViews = new ArrayList<>();\n clickableViews.add(ctaView);\n clickableViews.add(mediaView);\n clickableViews.add(titleView);\n clickableViews.add(descriptionView);\n \n // 광고 콜백 이벤트를 수신할 수 있습니다. \n // view.setNativeAd 보다 전에 호출해야 합니다.\n view.addOnNativeAdEventListener(new NativeAdView.OnNativeAdEventListener() {\n \n @Override\n public void onImpressed(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {\n\n }\n\n @Override\n public void onClicked(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {\n ctaPresenter.bind(nativeAd);\n }\n\n @Override\n public void onRewardRequested(@NonNull NativeAdView view, @NonNull NativeAd nativeAd) {\n\n }\n\n @Override\n public void onRewarded(@NonNull NativeAdView nativeAdView, @NonNull NativeAd nativeAd, @Nullable RewardResult rewardResult) {\n\n }\n\n @Override\n public void onParticipated(final @NonNull NativeAdView view, final @NonNull NativeAd nativeAd) {\n ctaPresenter.bind(nativeAd);\n }\n });\n \n view.setMediaView(mediaView);\n view.setClickableViews(clickableViews);\n view.setNativeAd(nativeAd);\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .adsAdapterClass(YourAdsAdapter.class)\n .build();","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"쇼핑 적립 광고 UI 자체 구현","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 쇼핑 적립 광고의 디자인을 변경하는 방법을 설명합니다. 쇼핑 적립 광고는 일반 광고에 비해 많은 정보를 제공합니다. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"일반 광고의 커스터마이징도 참고하시기 바랍니다.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"a0a14d34-4f9f-4269-91af-c388033ba914","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"쇼핑 적립 광고용 NativeAdView의 규격에 맞는 레이아웃(","type":"text"},{"text":"your_feed_ad_cps.xml","type":"text","marks":[{"type":"code"}]},{"text":")을 구현합니다. 일반 광고용 레이아웃에 없는 ","type":"text"},{"text":"priceText","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"originalPriceText","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"discountPercentageText","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"categoryText","type":"text","marks":[{"type":"code"}]},{"text":" 가 있습니다.","type":"text"}]},{"type":"codeBlock","content":[{"text":"// your_feed_ad_cps.xml\n\n\n\n \n \n // MediaView와 CtaView는 NativeAdView의 하위 컴포넌트로 구현해야합니다.\n \n \n \n ...생략...\n \n \n \n \n \n \n ...생략...\n \n \n ...생략...\n","type":"text"}]},{"type":"paragraph","content":[{"text":"AdsAdapter의 상속 클래스를 구현합니다. 구현한 상속 클래스의 onCreateViewHolder에서 ","type":"text"},{"text":"your_feed_ad_cps.xml","type":"text","marks":[{"type":"code"}]},{"text":"을 사용하여 NativeAdView를 생성합니다. 그리고 FeedConfig에 구현한 ","type":"text"},{"text":"YourCPSAdsAdapter","type":"text","marks":[{"type":"code"}]},{"text":"를 설정합니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"CTA 버튼 커스터마이징은 ","type":"text"},{"text":"CTA 변경","type":"text","marks":[{"type":"link","attrs":{"href":"https://buzzvil.atlassian.net/wiki/spaces/BDG/pages/2352875706/ver+2.27.x+9.#CTA-%EB%B3%80%EA%B2%BD"}}]},{"text":"을 참고하시기 바랍니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"public class YourCPSAdsAdapter extends AdsAdapter {\n\n @Override\n public NativeAdViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {\n final LayoutInflater inflater = LayoutInflater.from(parent.getContext());\n final NativeAdView feedNativeAdView = (NativeAdView) inflater.inflate(R.layout.your_feed_ad_cps, parent, false);\n return new NativeAdViewHolder(feedNativeAdView);\n }\n\n @Override\n public void onBindViewHolder(NativeAdViewHolder holder, NativeAd nativeAd) {\n final NativeAdView view = (NativeAdView) holder.itemView;\n final Ad ad = nativeAd.getAd();\n \n // create ad component\n ...생략...\n final TextView priceText = view.findViewById(R.id.discountedPriceText);\n final TextView originalPriceText = view.findViewById(R.id.originalPriceText);\n final TextView discountPercentageText = view.findViewById(R.id.discountPercentageText);\n final TextView categoryText = view.findViewById(R.id.categoryText);\n\n // data binding \n ...생략...\n final Product product = ad.getProduct();\n if (product != null) {\n if (product.getDiscountedPrice() != null) {\n // 할인이 있는 쇼핑 광고\n originalPriceText.setPaintFlags(originalPriceText.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);\n int percentage = 0;\n if (product.getPrice() > product.getDiscountedPrice()) {\n percentage = Math.round(((product.getPrice() - product.getDiscountedPrice()) / product.getPrice() * 100));\n }\n if (percentage > 0) {\n priceText.setText(getCommaSeparatedPrice(product.getDiscountedPrice().longValue()));\n originalPriceText.setText(getCommaSeparatedPrice((long) product.getPrice()));\n discountPercentageText.setText(String.format(Locale.ROOT, \"%d%%\", percentage));\n discountPercentageText.setVisibility(View.VISIBLE);\n } else {\n priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));\n originalPriceText.setText(\"\");\n discountPercentageText.setVisibility(View.GONE);\n }\n } else {\n // 할인이 없는 쇼핑 광고\n priceText.setText(getCommaSeparatedPrice((long) product.getPrice()));\n originalPriceText.setText(\"\");\n discountPercentageText.setVisibility(View.GONE);\n }\n categoryText.setText(product.getCategory());\n if (!TextUtils.isEmpty(product.getCategory())) {\n categoryText.setVisibility(View.VISIBLE);\n }\n }\n\n final Collection clickableViews = new ArrayList<>();\n clickableViews.add(ctaView);\n clickableViews.add(mediaView);\n clickableViews.add(descriptionView);\n \n ...생략...\n \n view.setMediaView(mediaView);\n view.setClickableViews(clickableViews);\n view.setNativeAd(nativeAd);\n \n \n }\n\n private String getCommaSeparatedPrice (long price){\n return String.format(Locale.getDefault(), \"₩%,d\", price);\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .cpsAdsAdapterClass(YourCPSAdsAdapter.class)\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"기본 포인트 지급 안내 UI 자체 구현","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1100,"id":"f72124a1-e56f-4b9d-967d-64303abec04c","collection":"contentId-2352874133","type":"file","height":572}}]},{"type":"paragraph","content":[{"text":"사용자가 Feed 지면에 접근하면 일정 주기로 기본 포인트를 지급합니다. 기본 포인트 지급 알림 UI는 위의 이미지와 같습니다. 기본 포인트 지급 알림 UI를 수정하여 좀 더 사용자 경험을 개선할 수 있습니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 기본 포인트 지급 알림 UI 를 수정하는 예시입니다. ","type":"text"}]},{"type":"codeBlock","attrs":{"language":"kotlin"},"content":[{"text":"public class YourFeedFeedbackHandler extends DefaultFeedFeedbackHandler {\n \n @Override\n @NotNull\n public View getBaseRewardNotificationView(@NotNull Context context, int reward) {\n View view = LayoutInflater.from(context).inflate(R.layout.your_layout, null); \n return view\n }\n}","type":"text"}]},{"type":"codeBlock","attrs":{"language":"kotlin"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .feedFeedbackHandler(YourFeedFeedbackHandler.class)\n .build();","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"광고 미할당 안내 디자인 자체 구현하기","type":"text"}]},{"type":"paragraph","content":[{"text":"Feed 지면에 진입한 시점에 노출할 광고가 없다면 광고 미할당 안내 UI가 표시됩니다. 미할당 안내 디자인은 자체 구현하여 변경할 수 있습니다.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1200,"id":"82964a01-c2f1-425c-8b8c-c5891865f2f5","collection":"contentId-2352874133","type":"file","height":1041}}]},{"type":"paragraph","content":[{"text":"광고 미할당 안내 디자인을 직접 구현하려면 다음의 절차를 따르세요.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Feed 지면에 광고가 할당되지 않았을 때의 화면에 추가할 에러 이미지(","type":"text"},{"text":"feedErrorImageView","type":"text","marks":[{"type":"code"}]},{"text":"), 타이틀(","type":"text"},{"text":"feedErrorTitle","type":"text","marks":[{"type":"code"}]},{"text":"), 상세 설명(","type":"text"},{"text":"feedErrorDescription","type":"text","marks":[{"type":"code"}]},{"text":") 레이아웃을 작성하세요.","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n\n\n \n\n \n\n \n\n","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FeedErrorViewHolder","type":"text","marks":[{"type":"code"}]},{"text":"를 구현하는 커스텀 클래스 ","type":"text"},{"text":"CustomErrorView","type":"text","marks":[{"type":"code"}]},{"text":"를 새로 생성하고, 자동 완성되는 ","type":"text"},{"text":"GetView()","type":"text","marks":[{"type":"code"}]},{"text":" 메소드를 다음과 같이 구현하세요.","type":"text"}]},{"type":"codeBlock","content":[{"text":"public class CustomErrorView extends FeedErrorViewHolder {\n @NonNull\n @Override\n public View getErrorView(@NonNull Activity activity) {\n // TODO: 1번에서 생성한 custom_feed_error_view 레이아웃을 inflate\n View errorView = activity.getLayoutInflater().inflate(R.layout.custom_feed_error_view, null, false);\n final ImageView errorImageView = errorView.findViewById(R.id.feedErrorImageView);\n final TextView errorTitle = errorView.findViewById(R.id.feedErrorTitle);\n final TextView errorDescription = errorView.findViewById(R.id.feedErrorDescription);\n\n errorImageView.setImageResource(R.drawable.bz_ic_feed_profile_coin); // 에러 이미지 설정\n errorTitle.setText(\"타이틀: 광고가 없습니다. \"); // 에러 타이틀 텍스트 설정\n errorDescription.setText(\"디스크립션: 할당된 광고가 없습니다!\"); // 에러 상세 텍스트 설정\n \n return errorView;\n }\n}","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"FeedConfig","type":"text","marks":[{"type":"code"}]},{"text":"의 ","type":"text"},{"text":"feedErrorViewHolderClass","type":"text","marks":[{"type":"code"}]},{"text":" 속성에 이전 단계에서 생성한 ","type":"text"},{"text":"CustomErrorView","type":"text","marks":[{"type":"code"}]},{"text":" 클래스를 추가하세요.","type":"text"}]},{"type":"codeBlock","content":[{"text":"// Feed 지면 초기화\n// TODO: feedErrorViewHolderClass 속성에 2번에서 생성한 CustomErrorView 클래스를 설정합니다.\nfinal FeedConfig feedConfig = new FeedConfig.Builder(YOUR_FEED_UNIT_ID)\n .feedErrorViewHolderClass(CustomErrorView.class)\n .build();","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":1},"content":[{"text":"액션형 광고의 브릿지 페이지에 배너 광고 지면 추가","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":1100,"id":"7f138d7b-8f87-450c-97a4-fa196e2044bc","collection":"contentId-2352874133","type":"file","height":933}}]},{"type":"paragraph","content":[{"text":"액션형 광고는 광고 페이지로 이동하기 전에 브릿지 페이지가 보여집니다. 사용자는 브릿지 페이지에 서술된 액션을 달성하여 리워드를 획득합니다. ","type":"text"}]},{"type":"paragraph","content":[{"text":"브릿지 페이지 하단에 배너형 광고를 추가할 수 있습니다. 배너 광고 지면을 추가하기 위해서는 FeedConfig에 배너 광고 지면 unit id를 설정합니다. Unit id 발급이 필요한 경우에는 버즈빌 매니저에게 문의하시기 바랍니다.","type":"text"}]},{"type":"paragraph","content":[{"text":"다음은 액션형 광고의 브릿지 페이지에 배너형 광고를 추가하는 예시입니다.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"java"},"content":[{"text":"final FeedConfig feedConfig = new FeedConfig.Builder(context, \"YOUR_FEED_UNIT_ID\")\n .bottomSheetUnitId(\"YOUR_FEED_BOTTOM_SHEET_UNIT_ID\")\n .build();","type":"text"}]},{"type":"paragraph","content":[{"text":"위의 배너 지면은 제3의 ADN 광고를 할당할 수 있습니다. 더 많은 광고 물량 확보를 위해 제3의 ADN 연동을 권장합니다. 위의 배너 지면에 연동할 수 있는 ADN은 다음과 같습니다.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"AdfitNative ADN (연동 심사 불필요)","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"ADN 광고를 연동하기 위해서 ","type":"text"},{"text":"ADN 연동","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/~79598069/pages/2352875661"}}]},{"text":"을 참고하시기 바랍니다. ","type":"text"}]},{"type":"paragraph"}],"version":1}