iOS 네이티브 광고

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

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

• 아이콘

• 광고 게시자

• 헤드라인

• 바디

• 미디어

• CTA 버튼

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

• AdContainerView - superview (AdropNativeAdView)

  ⌞ Icon (UIImageView)

  ⌞ Advertiser (UILabel)

  ⌞ Media (UIView)

  ⌞ Body (UILabel)

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

Swift

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. 네이티브 광고 불러오기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github에서 확인하실 수 있습니다. 테스트 유닛 아이디는 프로덕션 배포시 반드시 실제 광고 유닛으로 교체해 주셔야 합니다.

Ad type	Ad unit ID
Native	PUBLIC_TEST_UNIT_ID_NATIVE

Swift

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

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

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

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

Swift

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

        return cell
    }
}

4. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

Swift

view.t1Label.text = ad.extra["t1"]
view.t2Label.text = ad.extra["t2"]
view.t3Label.text = ad.extra["t3"]

적용 확인하기

여기서 광고 유닛이 제대로 적용 되었는지 확인하는 방법을 알아보세요.