iOS 네이티브 광고

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

필요한 파라미터 설정하기

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

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

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

아이콘
광고 게시자
헤드라인
바디
미디어
CTA 버튼

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

AdContainerView - superview (AdropNativeAdView)
⌞ Icon (UIImageView)
⌞ Advertiser (UILabel)
⌞ Media (UIView)
⌞ Body (UILabel)

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

네이티브 광고 구현하기

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 광고 노출")
    }
}

@interface ViewController () <AdropNativeAdDelegate>
@property (weak, nonatomic) IBOutlet AdropNativeAdView *nativeAdView;
@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;
@property (weak, nonatomic) IBOutlet UILabel *headlineLabel;
@property (weak, nonatomic) IBOutlet UIButton *callToActionButton;
@property (strong, nonatomic) AdropNativeAd *nativeAd;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Native 광고 인스턴스 생성
    self.nativeAd = [[AdropNativeAd alloc] initWithUnitId:@"PUBLIC_TEST_UNIT_ID_NATIVE"];
    self.nativeAd.delegate = self;
    [self.nativeAd load];
}

- (void)onAdReceived:(AdropNativeAd *)ad {
    NSLog(@"Native 광고 로드 성공");
    
    // UI 요소들을 Native Ad View에 연결
    [self.nativeAdView setIconView:self.iconImageView];
    [self.nativeAdView setHeadLineView:self.headlineLabel];
    [self.nativeAdView setCallToActionView:self.callToActionButton];
    
    // Native 광고 설정
    [self.nativeAdView setNativeAd:ad];
    self.nativeAdView.hidden = NO;
}

- (void)onAdFailedToReceive:(AdropNativeAd *)ad :(enum AdropErrorCode)error {
    NSLog(@"Native 광고 로드 실패");
}

- (void)onAdClicked:(AdropNativeAd *)ad {
    NSLog(@"Native 광고 클릭");
}

- (void)onAdImpression:(AdropNativeAd *)ad {
    NSLog(@"Native 광고 노출");
}

@end

import SwiftUI
import AdropAds

class AdropNativeAdWrapper: ObservableObject, AdropNativeAdDelegate {
    @Published var isLoaded = false
    var nativeAd: AdropNativeAd?
    
    init() {
        nativeAd = AdropNativeAd(unitId: "PUBLIC_TEST_UNIT_ID_NATIVE")
        nativeAd?.delegate = self
    }
    
    func loadAd() {
        nativeAd?.load()
    }
    
    func onAdReceived(_ ad: AdropNativeAd) {
        DispatchQueue.main.async {
            self.isLoaded = true
        }
    }
    
    func onAdFailedToReceive(_ ad: AdropNativeAd, _ error: AdropErrorCode) {
        print("Native 광고 로드 실패")
    }
    
    func onAdClicked(_ ad: AdropNativeAd) {
        print("Native 광고 클릭")
    }
    
    func onAdImpression(_ ad: AdropNativeAd) {
        print("Native 광고 노출")
    }
}

struct ContentView: View {
    @StateObject var nativeAdWrapper = AdropNativeAdWrapper()
    
    var body: some View {
        VStack {
            Button("Native 광고 로드") {
                nativeAdWrapper.loadAd()
            }
            .padding()
            
            if nativeAdWrapper.isLoaded {
                Text("Native 광고가 로드되었습니다")
                    .padding()
            }
        }
    }
}

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

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

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

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

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

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 확인하기

PreviousiOS 배너 광고 NextiOS 전면 광고

Last updated 27 days ago