Feed 타입 (iOS)

Owned by Jamie Koo (Unlicensed)
Last updated: May 10, 2022 by Olivia Kim
6 min read

BuzzAd-Benefit SDK: Type B - Feed

본 가이드는 BuzzAd-Benefit SDK의 피드 타입 광고를 연동하는 방법을 다루는 문서입니다.

※ 주의사항

  1. Feed 타입을 연동하기 전, 공통 가이드의 연동 사항을 모두 적용했는지 확인해주세요.

  2. Feed 의 커스터마이즈는 상단 툴바, 광고 리스트 아이템 영역, 헤더, 디자인 커스터마이즈가 가능합니다.

(중요) Basic Usage 를 모두 적용한 뒤, 하단의 Advanced Usage를 적용해해주세요.

 

Index

 

Basic Usage

BABFeedConfig 및 BABFeedHandler 설정

  1. Feed unit id로 BABFeedConfig를 설정합니다.

  2. BABFeedConfig 객체를 사용하여 BABFeedHandler를 생성합니다.

  3. populateViewController()를 호출하여 BABFeedViewController 를 생성합니다.

  4. 생성된 BABFeedViewController를 화면에 표시합니다.

 

// Objective-C BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:YOUR_FEED_UNIT_ID]; config.title = @"꿀 피드"; BABFeedHandler *feedHandler = [[BABFeedHandler alloc] initWithConfig:config]; BABFeedViewController *feedViewController = [feedHandler populateViewController]; // navigation에 push [self.navigationController pushViewController:feedViewController animated:YES]; // 또는 modal로 present // [self presentViewController:feedViewController animated:YES completion:nil];

 

// Swift let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID) config.title = "꿀 피드" let feedHandler = BABFeedHandler(with: config) let feedViewController = feedHandler.populateViewController() // navigation에 push navigationController?.pushViewController(feedViewController, animated: YES) // 또는 modal로 present // present(feedViewController, animated: YES, completion: nil)

추가 사항 : BABFeedViewController를 다른 viewController의 childViewController로 부착하여 사용하거나 custom navigationBar를 사용하는 경우 feed의 topInset이 올바로 설정되지 않는 문제가 발생할 수 있습니다. 이 경우 BABFeedViewController의 shouldOverrideTopInset과 topInset 프로퍼티를 설정하여 topInset을 퍼블리셔가 원하는 값으로 override 할 수 있습니다.

Feed의 광고 현황 확인

Basic Usage처럼 바로 BABFeedViewController를 생성하는 경우 Feed가 실행되면서 광고를 로드하게 되어, 유저에게 보여줄 수 있는 광고가 없어 빈 화면이 보이게 될 수도 있습니다. 이에 Feed를 화면에 띄우기 전에 preload를 호출한 뒤 onSuccess에서 상태를 확인하여 광고가 있을때만 피드로 진입할 수 있도록 하는 것을 추천합니다.

  • feedHandler.adsCount : 광고의 개수

  • feedHandler.availableReward : 적립 가능한 총 포인트 금액

     

// Objective-C [feedHandler preloadWithOnSuccess:^{ NSUInteger adsCount = feedHandler.adsCount; double availableReward = feedHandler.availableReward; } onFailure:^(NSError * _Nonnull error) { // 광고가 없을 때에 대한 처리 }];

 

 

유의사항

  • 프리로드한 BABFeedHandler와 동일한 객체에서 populateViewController()를 호출해야 합니다.

    • 하나의 FeedHandler 인스턴스에서 광고를 load/preload 하는 경우, 그 인스턴스는 계속 같은 광고를 들고 있게 됩니다. 그래서 유저가 feed에서 나왔더라도 다시 해당 인스턴스로 populateViewController()를 호출하는 경우 같은 광고 리스트를 보게 됩니다. 만약 피드에 진입할 때마다 새로 광고가 로드되는 것을 원하는 경우 새로운 FeedHandler 인스턴스를 만들어서 populateViewController()를 호출해야 합니다.

 

Advanced Usage

디자인 커스터마이즈

툴바 Customization

Feed 상단의 툴바를 커스터마이징할 수 있습니다. 별도의 구현 없이 navigationBar의 속성을 수정하여 사용합니다.

 

Feed의 헤더 Customization

Feed 상단의 헤더 영역을 커스터마이징하여, 유저에게 해당 피드가 어떤 공간인지 상세히 안내할 수 있습니다.

  1. BABFeedHeaderView 를 구현하는 class 를 생성합니다.

    1. Interface builder 또는 코드를 통해 view를 구성합니다.

    2. desiredHeight를 override 하여 원하는 headerView의 높이를 지정합니다.




       

  2. BABFeedConfig를 통해 headerViewClass를 지정합니다.




 

Feed 광고 리스트 아이템 영역 Customization

Feed의 광고 리스트 아이템 뷰를 커스터마이징하고 광고 이벤트에 대한 콜백을 등록할 수 있습니다.

  1. BABAdViewHolder 를 상속받는 class 를 구현합니다.

    1. Interface builder 또는 코드를 통해 view를 구성합니다.

      1. 유의사항 v1.2.6 이상 버전에서는 feed item의 상하좌우에 설정되어 있던 기본 margin이 제거되었습니다. 이전 버전에서 업그레이드 하는 경우 커스터마이즈한 AdViewHolder 안에서 상하좌우 margin을 직접 설정하여야 합니다.

    2. renderAd를 구현하여 view component와 ad property를 bind 합니다. 유저가 적립을 받은지 시간이 얼마 지나지 않아서 리워드가 부여되지 않거나 또는 원래 광고 자체가 리워드를 가지고 있지 않은 경우가 있을 수 있습니다. 따라서 광고 레이아웃 및 바인딩 로직 구성시 rewardText에 대해서 ad.reward > 0 인지 체크해서 리워드를 보여줄지 말지 결정하는 로직이 필요합니다.

    3. (optional) BABNativeAdViewDelegate를 구현하여 광고의 임프레션, 클릭, 리워드 요청, 리워드 지급 결과, 참여완료에 대한 이벤트 콜백을 받을 수 있습니다. (콜백의 정의 및 동작은 문서 참조)






  2. BABFeedConfig 를 통해 adViewHolderClass 를 지정합니다.




 

Feed item 사이의 Separator Customization

Feed item 사이의 separator의 color, height, horizontalMargin을 설정할 수 있습니다.

 

 

 

컨텐츠 노출

Feed 컨텐츠 노출 설정

Feed에 광고 외의 컨텐츠(버즈빌 제공 컨텐츠 또는 퍼블리셔 자체 컨텐츠)를 노출하고 싶다면 BABFeedConfig를 통해 다음과 같이 설정합니다.

 

 

 

Feed 컨텐츠 아이템 영역 Customization

Feed의 컨텐츠 아이템 뷰를 커스터마이징하고 컨텐츠 이벤트에 대한 콜백을 등록할 수 있습니다.

  1. BABArticleViewHolder를 상속받는 class를 구현합니다.

    1. Interface builder 또는 코드를 통해 view를 구성합니다.

      • 유의사항 v1.2.6 이상 버전에서는 feed item의 상하좌우에 설정되어 있던 기본 margin이 제거되었습니다. 이전 버전에서 업그레이드 하는 경우 커스터마이즈한 ArticleViewHolder 안에서 상하좌우 margin을 직접 설정하여야 합니다.

    2. renderArticle을 구현하여 view component와 article property를 bind 합니다.

    3. (optional) BABArticleViewDelegate를 구현하여 컨텐츠의 임프레션, 클릭에 대한 이벤트 콜백을 받을 수 있습니다.


       



  2. BABFeedConfig를 통해 articleViewHolderClass를 지정합니다.