iOS 네이티브 광고

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

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

• 아이콘

• 광고 게시자

• 헤드라인

• 바디

• 미디어

• CTA 버튼

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

• AdContainerView - superview (AdropNativeAdView)

  ⌞ Icon (UIImageView)

  ⌞ Advertiser (UILabel)

  ⌞ Media (UIView)

  ⌞ Body (UILabel)

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

• 필요한 파라미터 정의

Swift

struct AdropUnitId {
    // Native 이미지 광고
    static let NATIVE_IMAGE = "YOUR_NATIVE_UNIT_ID"
    
    // Native 비디오 광고  
    static let NATIVE_VIDEO_16_9 = "YOUR_NATIVE_VIDEO_UNIT_ID"
    static let NATIVE_VIDEO_9_16 = "YOUR_NATIVE_VIDEO_UNIT_ID"
}

Objective-C

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

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

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

Native	PUBLIC_TEST_UNIT_ID_NATIVE
Native Video (16:9)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9
Native Video (9:16)	PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16

Swift

import AdropAds

class ViewController: UIViewController {
    @IBOutlet weak var nativeAdView: AdropNativeAdView!
    @IBOutlet weak var iconImageView: UIImageView!
    @IBOutlet weak var headlineLabel: UILabel!
    @IBOutlet weak var callToActionButton: UIButton!
    @IBOutlet weak var mediaView: UIImageView!
    
    var nativeAd: AdropNativeAd?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Native 광고 인스턴스 생성
        nativeAd = AdropNativeAd(unitId: "PUBLIC_TEST_UNIT_ID_NATIVE")
        nativeAd?.delegate = self
        nativeAd?.load()
    }
}

extension ViewController: AdropNativeAdDelegate {
    func onAdReceived(_ ad: AdropNativeAd) {
        print("Native 광고 로드 성공")
        
        // UI 요소들을 Native Ad View에 연결
        nativeAdView.setIconView(iconImageView)
        nativeAdView.setHeadLineView(headlineLabel)
        nativeAdView.setCallToActionView(callToActionButton)
        nativeAdView.setMediaView(mediaView)
        
        // Native 광고 설정
        nativeAdView.setNativeAd(ad)
        nativeAdView.isHidden = false
    }
    
    func onAdFailedToReceive(_ ad: AdropNativeAd, _ error: AdropErrorCode) {
        print("Native 광고 로드 실패: \(error)")
    }
    
    func onAdClicked(_ ad: AdropNativeAd) {
        print("Native 광고 클릭")
    }
    
    func onAdImpression(_ ad: AdropNativeAd) {
        print("Native 광고 노출")
    }
}

Objective-C

SwiftUI

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"]

​적용 확인하기​

console에서 발급받은 unitId가 한 번이라도 광고요청을 할 경우 성공적으로 연결됩니다.

광고 유닛에 연결된 광고가 없다면, 네이티브가 랜더링 되지 않습니다. 따라서 네이티브가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST_UNIT_ID 를 사용해 주세요.

TEST_UNIT_ID 를 사용하면 네이티브 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.