Versions Compared

Version Old Version 10 New Version 11
Changes made by

George Kim

George Kim

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

목차

Table of Contents
minLevel1
maxLevel1
exclude목차

개요

...

이 문서에서 가이드 하는 내용은 BuzzAd iOS SDK의 Feed 지면의 기능을 설명하고 각 기능을 변경하는 방법을 설명합니다.

Feed 무한 스크롤

...

Feed 무한 스크롤 기능이 활성화되어 있으면 사용자에게 마지막 광고가 보였을 때 광고를 추가로 할당받습니다. 추가 요청에서 광고가 할당되지 않으면 더 이상 요청하지 않습니다. FeedConfig를 설정하여 무한 스크롤 기능을 활성화할 수 있습니다. 기본적으로 Feed 무한 스크롤 기능은 비활성화되어 있습니다.

...

Expand
titleSwift
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.autoLoadingEnabled = true

헤더 영역 자체 구현

...

Feed 헤더 영역을 자유로이 활용할 수 있습니다. 예를 들어, Feed 영역을 설명하는 공간으로도 활용할 수 있습니다.

...

Expand
titleSwift
Code Block
languageswift
class CustomHeaderView: BABFeedHeaderView {
  required init?(coder: NSCoder) {
    super.init(coder: coder)
    setUpView()
  }

  override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
  }

  override class func desiredHeight() -> CGFloat {
    return 115.0
  }
  
  override func availableRewardDidUpdate(_ reward: Double) {
    headerLabel.setText("\(reward) points available!")
  }

  func setUpView() {
    headerLabel = UILabel(frame: .zero)
    headerLabel.text = @"Custom Header Text";
    addSubview(headerLabel)
    
    // LayoutConstraint 설정
    ...
  }
}
Code Block
languageswift
let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID)
config.headerViewClass = CustomHeaderView.self

광고 분류 기능

Feed 지면에서는 사용자가 광고를 선택적으로 참여할 수 있도록 탭과 필터 기능을 지원합니다.

Table of Contents
minLevel1
maxLevel7
include(탭 기능)|(필터 기능)

탭 기능

...

사용자가 광고를 분류하여 볼 수 있도록 탭과 필터 기능이 기본으로 제공됩니다. 탭은 일반 광고와 쇼핑 적립형 광고를 구분하는 역할을 합니다. 설정하지 않았다면 탭은 보이지 않습니다.

...

Expand
titleSwift
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.tabUiEnabled = true

필터 기능

...

필터는 광고를 카테고리 별로 보다 세분화합니다. 필터는 탭에 종속되어 있습니다. 그래서, 탭이 비활성화되면 필터도 비활성화됩니다. 설정하지 않았다면 필터는 보이지 않습니다.

...

Expand
titleSwift
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.tabUiEnabled = true 
config.filterUiEnabled = true

광고 UI 자체 구현

BuzzAd iOS SDK에서 제공하는 광고는 일반 광고와 쇼핑 적립 광고가 있습니다. 각각의 광고에 따라 UI를 변경하는 방법이 상이합니다. 일반 광고과 쇼핑 적립 광고의 UI를 모두 변경하기 위해서는 각각 UI 변경을 진행해야 합니다.

...

Table of Contents
minLevel1
maxLevel7
include(일반 광고 UI 자체 구현)|(쇼핑 적립 광고 UI 자체 구현)|(광고 이벤트 콜백 수신)

일반 광고 UI 자체 구현

...

다음은 일반 광고의 디자인을 변경하는 방법을 설명합니다.

...

Expand
titleSwift
Code Block
languageswift
class CustomAdViewHolder: BABAdViewHolder {
  private var adView = BABNativeAdView()
  private var mediaView = BABMediaView()
  private var titleLabel = UILabel()
  ...

  required init?(coder: NSCoder) {
    super.init(coder: coder)
    setUpView()
  }
  
  override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
  }
  
  func setUpView() {
    adView.delegate = self
    addSubview(self.adView)
    adView.addSubview(self.mediaView)
    adView.addSubview(self.titleLabel)
    ...
    
    // LayoutConstraint 설정
    ...
  }

  // Bind view with ad
  override func renderAd(_ ad: BABAd) {
    super.renderAd(ad)
    
    self.titleLabel.text = ad.creative.title
    self.descriptionLabel.text = ad.creative.body
    
    if let urlString = ad.creative.iconUrl {
      self.iconImageView.sd_setImage(with: URL(string: urlString))
    }
    
    self.adView.ad = ad
    self.adView.mediaView = self.mediaView
    self.adView.clickableViews = [self.ctaButton, self.iconImageView]
    
    updateCtaButton(ad: ad)
  }
  
  func updateCtaButton(ad: BABAd) {
    let callToAction = ad.creative.callToAction ?? "디폴트 스트링"
    let reward = ad.reward
    let totalReward = ad.getTotalReward()
    let isParticipated = ad.isParticipated()
    let isClicked = ad.isClicked()
    let isActionType = ad.isActionType()
    if (isClicked && isActionType && !isParticipated) {
      rewardIcon.image = nil
      ctaLabel.text = "참여 확인 중"
    } else {
      if (totalReward > 0 && isParticipated) {
        rewardIcon.image = UIImage(named: "ic_check")
        ctaLabel.text = "참여 완료"
      } else if (reward > 0) {
        rewardIcon.image = UIImage(named: "ic_coin")
        ctaLabel.text = "\(Int(ad.reward))P \(callToAction)"
      } else {
        rewardIcon.image = nil
        ctaLabel.text = callToAction
      }
    }
  }
  
  // MARK: BABNativeAdViewDelegate
  func babNativeAdView(_ adView: BABNativeAdView, didImpress ad: BABAd) {
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didClick ad: BABAd) {
    updateCtaButton(ad: ad)
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, willRequestRewardFor ad: BABAd) {
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didRewardFor ad: BABAd, with result: BABRewardResult) {
    updateCtaButton(ad: ad)
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didParticipateAd ad: BABAd) {
    updateCtaButton(ad: ad)
  }
}
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.adViewHolderClass = CustomAdViewHolder.self

쇼핑 적립 광고 UI 자체 구현

다음은 쇼핑 적립 광고의 디자인을 변경하는 방법을 설명합니다. 쇼핑 적립 광고는 일반 광고에 비해 많은 정보를 제공합니다.

...

Expand
titleSwift
Code Block
languageswift
class CustomCpsAdViewHolder: BABAdViewHolder {
  private var adView = BABNativeAdView()
  private var mediaView = BABMediaView()
  private var titleLabel = UILabel()
  ...

  required init?(coder: NSCoder) {
    super.init(coder: coder)
    setUpView()
  }
  
  override init(frame: CGRect) {
    super.init(frame: frame)
    setUpView()
  }
  
  func setUpView() {
    adView.delegate = self
    addSubview(self.adView)
    adView.addSubview(self.mediaView)
    adView.addSubview(self.titleLabel)
    ...
  }

  // 2) Bind view with ad
  override func renderAd(_ ad: BABAd) {
    super.renderAd(ad)
    
    self.titleLabel.text = ad.creative.title
    
    // description 필드가 objc 객체에 기본으로 있어서 body로 컨버팅 하여 사용
    self.descriptionLabel.text = ad.creative.body
    
    if let urlString = ad.creative.iconUrl {
      self.iconImageView.sd_setImage(with: URL(string: urlString))
    }
    
    // for CPS
    let product = ad.product
    if product.discountedPrice != 0 {
      self.priceView.text = NSNumber(value: product.discountedPrice).formattedString()
      self.originalPriceView.text = NSNumber(value: product.price).formattedString()
      let discountRate = (1 - product.discountedPrice / product.price) * 100
      self.discountRateView.text = String(format: "%d%%", Int(discountRate))
    } else {
      self.priceView.text = NSNumber(value: product.price).formattedString()
      self.originalPriceView.text = NSNumber(value: product.price).formattedString()
      self.discountRateView.text = "0%%"
    }
    
    if let category = product.category {
      self.categoryView.text = category
    } else {
      self.categoryView.isHidden = true
    }
    
    self.adView.ad = ad
    self.adView.mediaView = self.mediaView
    self.adView.clickableViews = [self.ctaButton, self.iconImageView]
    updateCtaButton(ad: ad)
  }
  
  func updateCtaButton(ad: BABAd) {
    let callToAction = ad.creative.callToAction ?? "디폴트 스트링"
    let reward = ad.reward
    let totalReward = ad.getTotalReward()
    let isParticipated = ad.isParticipated()
    let isClicked = ad.isClicked()
    let isActionType = ad.isActionType()
    if (isClicked && isActionType && !isParticipated) {
      rewardIcon.image = nil
      ctaLabel.text = "참여 확인 중"
    } else {
      if (totalReward > 0 && isParticipated) {
        rewardIcon.image = UIImage(named: "ic_check")
        ctaLabel.text = "참여 완료"
      } else if (reward > 0) {
        rewardIcon.image = UIImage(named: "ic_coin")
        ctaLabel.text = "\(Int(ad.reward))P \(callToAction)"
      } else {
        rewardIcon.image = nil
        ctaLabel.text = callToAction
      }
    }
  }
  
  // MARK: BABNativeAdViewDelegate
  // Handle ad callbacks
  func babNativeAdView(_ adView: BABNativeAdView, didImpress ad: BABAd) {
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didClick ad: BABAd) {
    updateCtaButton(ad: ad)
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, willRequestRewardFor ad: BABAd) {
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didRewardFor ad: BABAd, with result: BABRewardResult) {
    updateCtaButton(ad: ad)
  }
  
  func babNativeAdView(_ adView: BABNativeAdView, didParticipateAd ad: BABAd) {
    updateCtaButton(ad: ad)
  }
}

extension NSNumber {
  func formattedString() -> String? {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    return formatter.string(from: self)
  }
}
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.cpsAdViewHolderClass = CustomCpsAdViewHolder.self

광고 이벤트 콜백 수신

필요에 따라 광고 노출, 클릭, 참여 이벤트 콜백을 받을 수 있습니다.

...

Expand
titleSwift
Code Block
languageswift
class CustomAdViewHolder: BABAdViewHolder, BABNativeAdViewDelegate {
    // Populate your view (example using xib file)
    
    func loadFromNib() {
        ...
        self.adView.delegate = self
        ...
    }

    // Handle ad callbacks
    func babNativeAdView(_ adView: BABNativeAdView, didImpress ad: BABAd) {\
      // 사용자에게 광고가 보여지면 호출됩니다.
    }
  
    func babNativeAdView(_ adView: BABNativeAdView, didClick ad: BABAd) {
      // 사용자가 광고를 클릭하여 참여하면 호출됩니다.
    }
  
    func babNativeAdView(_ adView: BABNativeAdView, willRequestRewardFor ad: BABAd) {
      // 사용자가 광고에 참여하고 리워드 요청을 하기 전에 호출됩니다.
    }
  
    func babNativeAdView(_ adView: BABNativeAdView, didRewardFor ad: BABAd, with result: BABRewardResult) {
      // SDK에서 광고 리워드 요청 후에 호출됩니다.
    }
  
    func babNativeAdView(_ adView: BABNativeAdView, didParticipateAd ad: BABAd) {
      // 광고 참여가 확인되면 호출됩니다. 
    }
}

App Tracking Transparency (iOS 14 지원) 권한 획득 기능

Feed 지면에서 ATT 권한 획득을 위한 팝업 및 가이드 배너를 보여줄 수 있습니다.

Table of Contents
minLevel1
maxLevel7
include(Feed 진입 시 권한 획득 다이얼로그 노출)|(Feed 헤더 영역에 권한 획득 유도 배너 노출)

Feed 진입 시 권한 획득 다이얼로그 노출

...

팝업 노출을 설정하면 iOS 14에서 ATT 권한 허용 여부를 결정하지 않은 사용자가 Feed 지면에 진입할 때 ATT 권한 획득 팝업이 보입니다.

...

Expand
titleSwift
Code Block
languageswift
let config = BABFeedConfig(unitId: "YOUR_FEED_UNIT_ID")
config.shouldShowAppTrackingTransparencyDialog = true

ATT 권한에 대한 추가적인 설명은 iOS14를 위한 준비를 참조해 주세요.

Feed 헤더 영역에 ATT 권한 설명 배너 추가하기

...

Feed 지면 상단의 헤더 영역에 배너를 표시하여 사용자에게 ATT 권한에 대해서 설명할 수 있습니다. 단, Feed 헤더 영역을 사용하는 경우에는 ATT 권한 설명 배너는 노출되지 않습니다.

...

Expand
titleInfo.plist 에 ATT 설명 페이지 URL 설정
Code Block
languagexml
<key>BuzzAdAppTrackingTransparencyLandingURL</key>
<string>YOUR_ATT_DESCRIPTION_URL</string>

Feed 지면 광고 미할당 안내 UI 자체 구현

...

사용자가 Feed 지면에 진입한 시점에 노출할 광고가 없다면 미 할당 안내 UI가 노출됩니다. BuzzAd iOS SDK는 위와 같은 기본 UI를 제공합니다. 안내 UI는 자체 구현하여 변경하거나 Feed 지면 광고 미할당 안내 UI 변경을 참고하여 이미지 혹은 문구만 변경하여 수정할 수도 있습니다.

...

Feed 지면에 진입하기 전에 광고를 미리 할당받아서 참여할 광고가 있는 경우에만 사용자를 Feed 지면으로 진입하도록 하면 미할당 안내 이미지를 보이지 않게 할 수 있습니다. 자세한 내용은 광고 미리 할당받기를 참고하시기 바랍니다.

기본 포인트 조회

사용자가 Feed 지면에 진입할 때 설정된 주기마다 기본 포인트를 지급합니다. BuzzAd iOS SDK 에서는 현재 사용자가 받을 수 있는 기본 포인트 양을 조회할 수 있습니다.

...