본문으로 건너뛰기

시작하기

네이티브 광고를 사용하면 앱의 컨텐츠와 유사한 형태의 광고 유닛을 디자인할 수 있습니다.

샘플 이미지

선행 챕터​

NAMSDK Import​

SDK 모듈을 import 합니다.

import GFPSDK

네이티브 광고 제공자 초기화​

연동할 네이티브 광고 제공자의 Pod이 프로젝트에 추가된 상태에서 GFPAdManager를 통해 초기화 합니다. (앱이 구동되는 시점에 한번만 수행)

Provider OptionAd Provider
GFPNativeProviderOptionNDA네이버 GFP 네이티브 광고
GFPNativeProviderOptionDFP구글 DFP 네이티브 광고
GFPNativeProviderOptionFAN페이스북 FAN 네이티브 광고
GFPNativeProviderOptionInMobi인모비 네이티브 광고
// DFP, NDA, Inmobi, Facebook 광고를 연동하려는 경우 cocoapods 의존성 추가.
GFPAdManager.setup(withPublisherCd: "publisherCd") { (error : GFPError?) in
    print("Setup Eror: \(String(describing: error?.description))")
}

뷰 컨트롤러 작성​

뷰 컨트롤러(MyViewController)를 만들고, 헤더파일(MyViewController.h)에 아래 작업을 수행합니다.
(이 예제에서는 하나의 뷰 컨트롤러가 모든 이벤트 프로토콜을 구현합니다.)

  1. 뷰 컨트롤러에 GFPAdLoader *adLoader 프로퍼티를 선언합니다.
  2. 뷰 컨트롤러에 GFPAdLoaderDelegate 프로토콜을 구현합니다.
  3. 뷰 컨트롤러에 GFPNativeAd *nativeAd 프로퍼티를 선언합니다.
  4. 뷰 컨트롤러에 GFPNativeAdDelegate 프로토콜을 구현합니다.

GFPAdLoaderDelegate는 네이티브 (및 배너) 광고 로드 관련 이벤트를, GFPNativeAdDelegate 로드된 네이티브 객체의 노출, 클릭, 렌더링 에러등의 이벤트를 전달합니다.

// MyViewController.h
import GFPSDK

class MyViewController : UIViewController, GFPAdLoaderDelegate, GFPNativeAdDelegate {
    private var adLoader : GFPAdLoader?

    private var nativeAd : GFPNativeAd?
    private var nativeAdView : GFPNativeAdView?
}

GFPAdLoader 생성 및 광고 요청​

MyViewController.m의 viewDidLoad 메소드에서 GFPAdLoader의 인스턴스를 생성하고, 광고를 요청합니다.

  • GFPAdLoader 인스턴스를 생성할 때, 발급받으신 광고유닛 ID와 함께, GFPAdParam 에서 사용자 정보를 세팅해주세요. GFPAdParam은 광고 효과를 높이기 위한 타게팅에 사용됩니다.
override func viewDidLoad() {
    super.viewDidLoad()
        
    let adParam = GFPAdParam()
    adParam.yearOfBirth = 1990
    adParam.gender = .male
    ...
        
    self.adLoader = GFPAdLoader(unitID: "UnitId", rootViewController: self, adParam: adParam)
        
    let nativeOption = GFPAdNativeOptions()
    nativeOption.renderingSetting = ... // 로드될 네이티브 일반형 광고 렌더링 설정
    self.adLoader?.setNativeDelegate(self, nativeOptions: nativeOption)

    self.adLoader?.delegate = self
    self.adLoader?.loadAd()
}
팁

광고 요청 성공 시 GFPAdLoaderDelegate의 adLoader:didReceiveNativeAd: 메소드가 호출됩니다.

GFPAdLoaderDelegate​

GFPAdLoaderDelegate를 구현하시면, 해당 메서드를 통해 광고 로드 관련 이벤트를 받으실 수 있습니다.

로드 성공시​

네이티브 광고 로드가 성공하면, GFPNativeAd 객체가 응답값으로 넘어옵니다.
GFPNativeAd객체를 이용하여 네이티브 광고 뷰(UIView)를 생성하게 됩니다. GFPNativeAd객체를 이용하여 네이티브 광고 뷰를 구성하는 방법은 네이티브 광고 뷰 생성를 확인해주세요.

func adLoader(_ unifiedAdLoader: GFPAdLoader!, didReceive nativeAd: GFPNativeAd!) {
      // nativeAd 객체를 이용하여 광고 뷰 생성
      ...
}

로드 실패시​

func adLoader(_ unifiedAdLoader: GFPAdLoader!, didFailWithError error: GFPError!, responseInfo: GFPLoadResponseInfo!) {
    ...
}

네이티브 광고 렌더링​

GFPNativeAd가 성공적으로 로드되면, 네이티브 광고를 렌더링할 수 있습니다.
이를 위해서는 네이티브 광고의 요소가 정의된 뷰 객체가 필요하며, 이 객체는 GFPNativeAdView 클래스를 상속해야 합니다. 이 문서에서는 인터페이스 빌더를 사용하여 뷰를 구성합니다.

네이티브 광고 뷰 생성​

  1. 네이티브 광고용 뷰(xib)를 만들고, Xcode 의 Identity Inspector 탭에서 Custom Class를 GFPNativeAdView 로 설정합니다. 예시이미지

  2. 네이티브 광고 뷰를 구성하는 각 에셋 뷰(title, body 등등)를 만들고, Connections Inspector 탭에서 GFPNativeAdView의 해당 Outlet과 연결합니다.

  • 광고의 동영상 또는 이미지를 표시하는 데 사용되는 mediaView도 Custom Class를 GFPMedaiView로 설정해주어야 합니다. 예시이미지
  1. 네이티브 광고 로드이후 아래와 같은 형태로 구현이 가능합니다.
func adLoader(_ unifiedAdLoader: GFPAdLoader!, didReceive nativeAd: GFPNativeAd!) { 

    // 네이티브 광고객체 및 delegate 등록   
    self.nativeAd = nativeAd
    self.nativeAd?.delegate = self

    // 네이티브 광고 에셋 설정            
    self.nativeAdView?.titleLabel?.text = nativeAd.title
    self.nativeAdView?.bodyLabel?.text = nativeAd.body
    self.nativeAdView?.advertiserLabel?.text = nativeAd.advertiser
    self.nativeAdView?.callToActionLabel?.text = nativeAd.callToAction
    ...

    // 뷰 객체에 네이티브 광고를 세팅하면, iconView, mediaView 렌더링 및 뷰 트래킹이 시작됨.
    self.nativeAdView?.nativeAd = nativeAd

    // subview 등록
    self.view.addSubview(self.nativeAdView!)
}

GFPNativeAdDelegate​

네이티브 광고가 노출, 클릭 되었을때 이벤트가 전달 됩니다.

광고 노출 이벤트 발생시​

func nativeAdWasSeen(_ nativeAd: GFPNativeAd) {
    ...
}

광고 rendered 이벤트 발생시​

func nativeAdWasRendered(_ nativeAd: GFPNativeAd) {
    ...
}

클릭 이벤트 발생시​

func nativeAdWasClicked(_ nativeAd: GFPNativeAd) {
    ...
}

렌더링 에러 발생시​

func nativeAd(_ nativeAd: GFPNativeAd, didFailWithError error: GFPError) {
    ...
}

광고가 사용자에 의해 Mute 되었을 때​

광고가 Mute 되었을 때, 서비스에 콜백을 통해 Mute 를 알립니다. Mute 후 NAMSDK에서는 "이 광고는 더 이상 보이지 않습니다." 라는 화면을 노출하고 있으며, 서비스의 정책에 따라 광고를 화면에서 없앨 지/그대로 노출할 지를 정합니다.

func nativeAdWasMuted(_ nativeAd: GFPNativeAd) {
    
}

기타​

직접 광고 제공자의 네이티브 광고 객체를 사용하여 네이티브 광고 렌더링​

GFPNativeAd 객체는 네이티브 광고 제공자로부터 얻은 원본 네이티브 객체를 가지고 있으며, GFPNativeAd 객체의 adProviderNativeAd 필드를 통해 접근이 가능합니다.

또한, GFPNativeAd 객체의 adProviderType에 따라 현재 로드된 네이티브 광고가 어떤 광고 제공자의 것인지 알 수 있습니다. 따라서 adProviderType에 따라 adProviderNativeAd 객체를 해당 광고 제공자의 네이티브 객체로 업 캐스팅하면, 각 광고 제공자의 원본 네이티브 객체에 접근이 가능합니다.

최종적으로 이 원본 네이티브 객체를 가지고 각 광고 제공자의 가이드에 따라 네이티브 광고 뷰를 구성하게 됩니다.

import FBAudienceNetwork    // FAN SDK
import GoogleMobileAds      // DFP SDK

func adLoader(_ unifiedAdLoader: GFPAdLoader!, didReceive nativeAd: GFPNativeAd!) {

    // 네이티브 광고객체 및 delegate 등록   
    self.nativeAd = nativeAd
    self.nativeAd?.delegate = self

    if nativeAd.adProviderType == .FAN {
        // FAN 네이티브 인 경우
        ...            
    } else if nativeAd.adProviderType == .DFP {
        // DFP 네이티브 인 경우
        ...
    }
}

광고제공자별 네이티브 광고 제작 가이드​