iOS 네이티브 광고

1. 네이티브 광고를 스토리보드 또는 nib 파일에 레이아웃 만들기

네이티브 광고에서는 다음과 같은 view의 종류들이 포함될 수 있습니다.

  • 아이콘

  • 광고 게시자

  • 헤드라인

  • 바디

  • 미디어

  • CTA 버튼

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

  • AdContainerView - superview (AdropNativeAdView)

    ⌞ Icon (UIImageView)

    ⌞ Advertiser (UILabel)

    ⌞ Media (UIView)

    ⌞ Body (UILabel)

레이아웃 작업 시 superview가 AdropNativeAdView 로 선언되어 있는지 확인하세요. Identity Inspector의 Custom Class 섹션에서 이를 수정할 수 있습니다.

import UIKit
import AdropAds

class FeedContentTableViewCell: UITableViewCell {
    @IBOutlet weak var adContainerView: AdropNativeAdView!
    
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var mediaView: UIView!
    @IBOutlet weak var bodyLabel: UILabel!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        reset()
    }
    
    override func prepareForReuse() {
        super.prepareForReuse()
        reset()
    }
    
    private func reset() {
        iconImageView.image = nil
        nameLabel.text = ""
        bodyLabel.text = ""
    }
}

2. 네이티브 광고 불러오기

class NativeAdViewController: UIViewController {
    private var ad: AdropNativeAd!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ad = AdropNativeAd(unitId: "PUBLIC_TEST_UNIT_ID_NATIVE")
        ad.delegate = self
        ad.load()
    }
}

extension NativeAdViewController: AdropNativeAdDelegate {
    func onAdReceived(_ ad: AdropAds.AdropNativeAd) {
        self.ad = ad
        print("onAdReceived")
    }
    
    func onAdFailedToReceive(_ ad: AdropAds.AdropNativeAd, _ errorCode: AdropAds.AdropErrorCode) {
        print("onAdFailedToReceive")
    }
    
    func onAdClicked(_ ad: AdropAds.AdropNativeAd) {
        print("onAdClicked")
    }
}

3. 네이티브 광고 연결 후 조회하기

연동을 완료한 AdropNativeAdView 의 예시와 populate한 AdropNativeAd예시를 보여드립니다.

extension NativeAdFeedViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "FeedAdTableViewCell", for: indexPath) as! FeedContentTableViewCell
        cell.adContainerView.setIconView(cell.iconImageView)
        cell.adContainerView.setAdvertiserView(cell.nameLabel)
        cell.adContainerView.setMediaView(cell.mediaView)
        cell.adContainerView.setBodyView(cell.bodyLabel)
        cell.adContainerView.setNativeAd(ad)
        
        return cell
    }
}

Last updated