네이티브 광고

1 : 준비

프로젝트 설정을 통해 광고 연동을 위한 준비를 합니다.

2 : SDK 초기화

최초 SDK 를 초기화 완료 후, 광고 요청이 가능합니다.
사이트에서 발급받은 Media ID를 입력합니다.

import UIKit
import AdPieSDK

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, 
        didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool 
    {
        // SDK 초기화
        AdPieSDK.sharedInstance().initWithMediaId("YOUR_MEDIA_ID")        
        return true
    }
}

#import "AppDelegate.h"
#import <AdPieSDK/AdPieSDK.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    // SDK 초기화
    [[AdPieSDK sharedInstance] initWithMediaId:@"YOUR_MEDIA_ID_HERE"];   
    return YES;
}

@end

3 : 레이아웃 관련 설정

1. 광고요소 선택

네이티브 광고의 요소 (① 아이콘 ② 제목 ③ 설명 ④ 메인 ⑤ 액션버튼) 중 사용할 요소를 미리 결정합니다.
단, ① 아이콘 ② 제목 ③ 설명 ④ 메인 중 최소 하나는 필수적으로 들어가야 하며, 선택한 요소에 따라 광고 물량에 차이가 발생합니다.
⑤ 액션버튼 이 없을 때보다 있을 때 CTR이 높게 나오기에 가능한 넣는 것을 추천합니다.
⑥ 옵트아웃 은 자동으로 우측 상단에 붙이고 있기에 텍스트 영역과 겹치지 않도록 고려해야 합니다. (옵트아웃 이미지 크기 : 20, 상단 및 우측 여백 : 5)
대시보드를 통해 슬롯을 생성하는 과정에서 슬롯유형에 네이티브(Native)를 선택하고, 네이티브 유형을 체크 합니다.
네이티브 유형은 앞서 선택한 필수 요소 (① 아이콘 ② 제목 ③ 메인 ④ 설명)에 해당됩니다.

체크한 유형은 XIB 파일에 필수로 들어가야 광고를 성공적으로 받아볼 수 있습니다.

2. xib 파일에 광고의 요소 배치

아래의 예시는 광고의 요소(아이콘, 제목, 설명, 메인, 액션버튼)이 놓여질 형태를 나타낸 것으로, 광고를 보여줄 xib 파일을 작성합니다.
네이티브 광고 템플릿 파일인 AdPieNativeAdView.xib를 참고하여 원하는 형태로 레이아웃을 구성합니다.

4 : 광고 요청

사이트에서 발급받은 Slot ID를 입력합니다.
광고 호출에 대한 콜백이 필요하기에 델리게이트를 등록하며, 자세한 사항은 하단을 참고합니다.

// ViewController.swift
class NativeAdViewController: UIViewController, APNativeDelegate {
    
    var nativeAd: APNativeAd!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Slot ID 입력
        nativeAd = APNativeAd(slotId: "YOUR_SLOT_ID_HERE")
        // 델리게이트 등록
        nativeAd.delegate = self
        // 광고 요청
        nativeAd.load()
    }
       
}

// ViewController.h
@interface ViewController : UIViewController
@property (strong) APNativeAd *nativeAd;
@end

// ViewController.m
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 광고 객체 생성 (Slot ID 입력)
    self.nativeAd = 
        [[APNativeAd alloc] initWithSlotId:@"YOUR_SLOT_ID_HERE"];
    // 델리게이트 등록
    self.nativeAd.delegate = self;
    // 광고 요청
    [self.nativeAd load];
}

@end

5 : 광고 표출 (광고 이벤트 수신)

광고 호출에 대한 콜백을 받을 수 있습니다.
ViewController에서 APNativeDelegate 프로토콜을 도입(adopt)합니다.
광고 객체의 delegate 프로퍼티에 콜백(이벤트)를 수신받을 객체를 설정합니다.
델리게이트의 메소드 중 성공, 실패에 대한 메소드는 필수사항으로 반드시 구현해야 하며, 나머지 메소드는 필요에 따라서 구현합니다.
광고를 성공적으로 수신한다면, 앞서 생성한 xib 파일을 통해 광고뷰(APNativeAdView)를 생성합니다.
fillAd메소드를 호출하여 광고뷰에 광고 데이터를 채웁니다.
에러코드를 통해 광고 실패에 대한 이유를 알 수 있습니다.

// ViewController.swift
import UIKit
import AdPieSDK

class ViewController: UIViewController, APNativeDelegate {

    ... 
    
    // MARK: - APNative delegates
    func nativeDidLoad(_ nativeAd: APNativeAd!) {
        // 광고 요청 완료 후 이벤트 발생 (성공)
        
        // 네이티브 광고뷰 생성 및 추가
        let nativeAdView = 
            Bundle.main.loadNibNamed("AdPieNativeAdView", 
                owner: nil, 
                options: nil)?[0] as! APNativeAdView
        view.addSubview(nativeAdView)
       
        // 제약 생성 및 적용 
        var viewDictionary = [String: AnyObject]()
        viewDictionary["nativeAdView"] = nativeAdView
            
        view.addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "H:|[nativeAdView]|", 
                options: [], 
                metrics: nil, 
                views: viewDictionary))
        
        view.addConstraints(
            NSLayoutConstraint.constraints(
                withVisualFormat: "V:|[nativeAdView]|", 
                options: [], 
                metrics: nil, 
                views: viewDictionary))
        
        // 광고뷰에 데이터 표출
        if nativeAdView.fillAd(nativeAd.getData()) {
            // 광고 클릭 이벤트 수신을 위해 등록
            nativeAd.registerView(forInteraction: nativeAdView)
        } else {
            nativeAdView.removeFromSuperview()
        }
    }
    
    func nativeDidFail(toLoad nativeAd: APNativeAd!, withError error: Error!) {
        // 광고 요청 실패 후 이벤트 발생
        // error code : error._code
        // error message : error.localizedDescription
    }
    
    func nativeWillLeaveApplication(_ nativeAd: APNativeAd!) {
        // 광고 클릭 후 이벤트 발생
    }
}

// ViewController.m
@implementation ViewController

#pragma mark APNativeAd delegates

- (void)nativeDidLoadAd:(APNativeAd *)nativeAd {
    // 광고 요청 완료 후 이벤트 발생 (성공)

    // 네이티브 광고뷰 생성 및 추가
    APNativeAdView *nativeAdView = 
        [[[NSBundle mainBundle] loadNibNamed:@"AdPieNativeAdView"
            owner:nil
            options:nil] firstObject];
    
    [self.view addSubview:nativeAdView];
    
    // 제약 생성 및 적용
    NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(nativeAdView);
    [self.view addConstraints:[NSLayoutConstraint 
        constraintsWithVisualFormat:@"H:|[nativeAdView]|"
        options:0
        metrics:nil
        views:viewDictionary]];
        
    [self.view addConstraints:[NSLayoutConstraint 
        constraintsWithVisualFormat:@"V:|[nativeAdView]|"
        options:0
        metrics:nil
        views:viewDictionary]];
    
    // 광고뷰에 데이터 표출
    if ([nativeAdView fillAd:nativeAd.nativeAdData]) {
        // 광고 클릭 이벤트 수신을 위해 등록
        [nativeAd registerViewForInteraction:nativeAdView];
    } else {
        // 광고 데이터를 채우는데 실패한 경우로 광고뷰 제거
        [nativeAdView removeFromSuperview];
    }
}

- (void)nativeDidFailToLoadAd:(APNativeAd *)nativeAd
                          withError:(NSError *)error {

    // 광고 요청 실패 후 이벤트 발생
    // error code : [error code]
    // error message : [error localizedDescription]
}

- (void)nativeWillLeaveApplication:(APNativeAd *)nativeAd {
    // 광고 클릭 후 이벤트 발생
}

@end

Previous전면 광고 Next리워드 비디오 광고

Last updated 1 month ago