iOS 네이티브 광고

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

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

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

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

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

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

필요한 파라미터 정의

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

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

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

@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()
            }
        }
    }
}

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.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 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

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과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.

PreviousiOS 배너 광고 NextiOS 팝업 광고

Last updated 3 months ago

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

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

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

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

​적용 확인하기​

적용 확인하기