본문으로 건너뛰기

시작하기

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

샘플 이미지

선행 챕터​

NAMSDK Import​

SDK 모듈을 import 합니다.

import GFPSDK

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

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

Provider OptionAd ProviderCocoaPods
GFPNativeProviderOptionNDA네이버 NDApod 'GFPSDK/MediationNDA'
GFPNativeProviderOptionDFP구글 GAM (Google Ad Manager)pod 'GFPSDKMediationDFP'
GFPNativeProviderOptionFANMeta Audience Networkpod 'GFPSDKMediationFAN'
GFPNativeProviderOptionInMobiInMobipod 'GFPSDKMediationInMobi'
GFPNativeProviderOptionVungleLiftoff (Vungle)pod 'GFPSDKMediationVungle'
GFPNativeProviderOptionLANLINE Ads Networkpod 'GFPSDKMediationLAN'
GFPNativeProviderOptionBidMachineBidMachinepod 'GFPSDKMediationBidMachine'
GFPNativeProviderOptionPanglePanglepod 'GFPSDKMediationPangle'
// DFP, NDA, Inmobi, Facebook 광고를 연동하려는 경우 cocoapods 의존성 추가.
GFPAdManager.setup(withPublisherCd: "publisherCd") { (error : GFPError?) in
    print("Setup Eror: \(String(describing: error?.description))")
}
팁

GFPAdManager 상세 설정 방법은 광고매니저 설정을 참고해 주세요.

뷰 컨트롤러 작성​

뷰 컨트롤러(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를 GFPMediaView로 설정해주어야 합니다. 예시이미지

GFPNativeAdView IBOutlet 목록​

Outlet타입설명
mediaViewGFPMediaView광고 이미지 또는 동영상을 표시하는 미디어 뷰
iconViewUIImageView광고주 아이콘 이미지
titleLabelUILabel광고 제목
bodyLabelUILabel광고 본문
advertiserLabelUILabel광고주 이름
socialContextLabelUILabel소셜 컨텍스트(예: "좋아요 123개")
callToActionLabelUILabelCTA(행동 유도) 버튼 레이블
adChoicesViewUIViewAdChoices 뷰 (DFP 광고에서 자동 삽입)
adBadgeLabelUILabel"광고" 배지 레이블
noticeLabelUILabel광고 고지 레이블
serviceAdBadgeViewUIView서비스 광고 배지 뷰

socialContextLabel, adBadgeLabel, noticeLabel, serviceAdBadgeView는 광고 소재에 따라 값이 제공되지 않을 수 있습니다.

추가 레이블이 필요한 경우 아래 메서드로 등록·조회할 수 있습니다.

// 추가 레이블 등록
nativeAdView.setExtraLabel(with: "custom_key", label: myLabel)

// 추가 레이블 조회
let label = nativeAdView.extraLabel(with: "custom_key")
  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) {
    
}

Mute 취소 시​

func nativeAdWasCanceledMute(_ nativeAd: GFPNativeAd) {

}

인앱 브라우저 표시 / 닫힘 이벤트​

광고 클릭 후 기본 인앱 브라우저가 표시되거나 닫힐 때 호출됩니다.

func nativeAdDidPresentDefaultInAppBrowser(_ nativeAd: GFPNativeAd) {
    // 인앱 브라우저 표시됨
}

func nativeAdDidDismissDefaultInAppBrowser(_ nativeAd: GFPNativeAd) {
    // 인앱 브라우저 닫힘
}

리소스 재로드 이벤트​

광고 리소스 재로드가 필요한 시점에 재로드 성공/실패 시 호출됩니다.

func nativeAdDidReloaded(_ nativeAd: GFPNativeAd) {
    // 재로드 성공
}

func nativeAd(_ nativeAd: GFPNativeAd, didReloadFailWithError error: GFPError) {
    // 재로드 실패
}

userInterestDelegate​

GFPNativeAd.userInterestDelegate를 설정하면 사용자의 광고 관심 여부 변화를 수신할 수 있습니다.

self.nativeAd?.userInterestDelegate = self

// GFPUserInterestDelegate
func ad(_ ad: NSObject, didChangeUserInterest userInterest: Bool) {
    // userInterest: 사용자가 광고에 관심을 보이는지 여부
}

기타​

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

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 네이티브 인 경우
        ...
    }
}

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

광고 무효화 확인​

네이티브 광고는 만료 시간이 있으므로, 미리 로드하여 캐싱한 광고를 게재할 경우 반드시 isAdInvalidate 메서드를 사용해 광고가 만료되었는지 확인해야 합니다. 만료된 광고를 게재하면 광고 노출에 대한 보상을 받을 수 없습니다.


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

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

    // 광고가 이미 만료되었거나 무효화되었는지 확인하고, 그 경우 광고를 표시하지 않습니다.
    // 무효화된 광고를 표시해도 수익을 받을 수 없습니다.
    if nativeAd.isAdInvalidate {
        print("This ad has been invalidated. Try again!")
        return
    }
}