네이티브 광고

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

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

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

네이티브 샘플

Last updated