iOS 네이티브 광고

1

Unit ID 설정하기

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

2

필요한 파라미터 설정하기

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

3

네이티브 광고 레이아웃 설정하기

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

• 아이콘

• 광고 게시자

• 헤드라인

• 바디

• 미디어

• CTA 버튼

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

• AdContainerView - superview (AdropNativeAdView)

  ⌞ Icon (UIImageView)

  ⌞ Advertiser (UILabel)

  ⌞ Media (UIView)

  ⌞ Body (UILabel)

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

4

네이티브 광고 구현하기

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: AdropUnitId.NATIVE_IMAGE)
        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

5

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

연동을 완료한 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
    }
}

6

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

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

Swift

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

7

BackFill 광고 구현

• 애드컨트롤 콘솔에서 BackFill 설정이 된 유닛을 선택해 주세요.

  • 해당 유닛을 사용하면 간단하게 백필(BackFill) 광고 연동이 가능합니다.

• Podfile에 adrop-ads-backfill을 추가해 주세요.

pod 'adrop-ads', '~> 1.7.0'
pod 'adrop-ads-backfill', '~> 1.7.0'

• pod install 실행

pod install --repo-update

• Info.plist에 AdMob에서 발급받은 appId를 추가해주세요.

  • Info.plist 확인하기