네이티브 광고

1 : 준비

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

2 : SDK 초기화

• 최초 SDK 를 초기화 완료 후, 광고 요청이 가능하다.

• 사이트에서 발급받은 Media ID를 입력한다.

Swift

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

Objective-C

#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를 입력한다.
• 광고 호출에 대한 콜백이 필요하기에 델리게이트를 등록하며, 자세한 사항은 하단을 참고한다.

• 타겟팅 적용으로 보다 높은 수익을 얻을 수 있다.

Swift

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

Objective-C

// 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메소드를 호출하여 광고뷰에 광고 데이터를 채운다.

• 에러코드를 통해 광고 실패에 대한 이유를 알 수 있다.

Swift

// 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!) {
        // 광고 클릭 후 이벤트 발생
    }
}

Objective-C

// 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

네이티브 샘플