Native Ad Guide (Deprecated)

GFPSDK Import

GFPSDK 모듈을 import 합니다.

@import GFPSDK;

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

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

• GFPNativeProviderOptionDFP : 구글 DFP 네이티브 광고
• GFPNativeProviderOptionFAN : 페이스북 FAN 네이티브 광고
• GFPNativeProviderOptionMoPub : 모펍 네이티브 광고
• GFPNativeProviderOptionInMobi : 인모비 네이티브 광고

// DFP, NDA, Mopub, Inmobi, FAN 네이티브 광고를 연동하려는 경우 cocoapods 의존성 추가.
GFPError *error = nil;
[GFPAdManager setupWithError:&error];

뷰 컨트롤러 작성

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

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

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

// MyViewController.h

@import GFPSDK;

@interface MyViewController : UIViewController <GFPNativeAdLoaderDelegate, GFPNativeAdDelegate>

@property (nonatomic) GFPNativeAdLoader *nativeAdLoader;

@property (nonatomic) GFPNativeAd *nativeAd;

@end

GFPNativeAdLoader 생성 및 광고 요청

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

• GFPNativeAdLoader 인스턴스를 생성할 때, 발급받으신 광고유닛 ID와 함께, GFPAdParam 에서 사용자 정보를 세팅해주세요. GFPAdParam은 광고 효과를 높이기 위한 타게팅에 사용됩니다.

- (void)viewDidLoad {
    [super viewDidLoad];

    GFPAdParam *adParam = [[GFPAdParam alloc]init];
    adParam.yearOfBirth = 1990;
    adParam.gender = GFPAdParamGenderTypeMale;
    ...

    self.nativeAdLoader = [[GFPNativeAdLoader alloc] initWithAdUnitID:@"YOUR_UNIT_ID"
                                                   rootViewController:self
                                                              adParam:adParam];
    // 광고 요청
    self.nativeAdLoader.delegate = self;
    [self.nativeAdLoader loadAd];
}

모펍의 경우 rootViewController가 nil이면, 내부적으로 UIApplication.sharedApplication.delegate.window.rootViewController로 세팅됨

추가 설정 가능 요소들

광고 요청 타임아웃 (기본값 60초)

광고요청 이후 지정한 시간(초)경과 까지 광고 응답을 얻지 못하면 기존 요청이 무효화되며, GFPNativeAdLoaderDelegate의 nativeAdLoader:didFailWithError: 메소드가 호출됩니다.

self.nativeAdLoader.requestTimeoutInterval = ...

GFPVideoAdRenderingSetting

DFP adChoicesView 위치 설정 옵션

DFP의 adChoiceView는 오버레이 형식으로 렌더링 됩니다. 따라서, adChoicesView가 자동으로 삽입될 네 귀퉁이중 한군데를 비워놓아야 합니다. DFP의 adChoicesView의 기본 위치는 오른쪽 상단 코너이며,
GFPNativeAdRenderingSetting의 preferredAdChoicesViewPosition 을 통해 설정 가능합니다.

GFPNativeAdRenderingSetting *setting = [GFPNativeAdRenderingSetting alloc] init];
setting.preferredAdChoicesViewPosition = GFPAdChoicesViewPositionTopRightCorner;

self.nativeAdLoader.renderingSetting = setting;

구글 문서에는 adChoiceView를 직접 등록하면 오버레이형식이 아닌 직접 등록한 뷰에 그려진다고 되어있으나, 아직까지 정상 동작 하지 않으므로 우상단이 아닌 위치에 adChoiceView가 렌더링 되기를 원하시는 경우 이 세팅이 필요합니다.

미디어뷰가 없는 네이티브 광고 사용시

미디어뷰가 없는 네이티브 광고(예를들어 아이콘과 타이틀 클릭 버튼만으로 구성된 네이티브 광고)를 사용하려면, GFPNativeAdRenderingSetting 의 hasMediaView = NO를 설정해야 합니다. (기본값은 YES)

네이티브 뷰에 미디어 뷰 존재여부와 GFPNativeAdRenderingSetting.hasMediaView 상태가 다르면, 네이티브 광고 렌더링 시점에 오류가 발생합니다.

GFPNativeAdRenderingSetting *setting = [GFPNativeAdRenderingSetting alloc] init];
setting.hasMediaView = NO;

self.nativeAdLoader.renderingSetting = setting;

GFPNativeAdLoaderDelegate

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

로드 성공시

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

@import FBAudienceNetwork;    // FAN
@import GoogleMobileAds;      // DFP

- (void)nativeAdLoader:(GFPNativeAdLoader *)nativeAdLoader
          didReceiveAd:(GFPNativeAd *)nativeAd {
      // nativeAd 객체를 이용하여 광고 뷰 생성
      ...
}

로드 실패시

- (void)nativeAdLoader:(GFPNativeAdLoader *)nativeAdLoader
      didFailWithError:(GFPError *)error {
    ...
}

네이티브 광고 렌더링

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

네이티브 광고 뷰 생성

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

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

• 광고의 동영상 또는 이미지를 표시하는 데 사용되는 mediaView도 Custom Class를 GFPMedaiView로 설정해주어야 합니다.

3. 네이티브 광고 로드이후 아래와 같은 형태로 구현이 가능합니다.

// selt.nativeAdView 는 GFPNativeAdView 객체임

- (void)nativeAdLoader:(GFPNativeAdLoader *)nativeAdLoader
                didReceiveAd:(GFPNativeAd *)nativeAd {

    // 네이티브 광고객체 및 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;
    selt.nativeAdView.callToActionLabel.text = nativeAd.callToAction;
    ...
    
    // 뷰 객체에 네이티브 광고를 세팅하면, iconView, mediaView 렌더링 및 뷰 트래킹이 시작됨. 
    self.nativeAdView.nativeAd = nativeAd;
    
    // subview 등록
    [self.view addSubView:self.nativeAdView]
}

GFPNativeAdDelegate

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

광고 노출 이벤트 발생시

- (void)nativeAdWasSeen:(GFPNativeAd *)nativeAd {
    ...
}

클릭 이벤트 발생시

- (void)nativeAdWasClicked:(GFPNativeAd *)nativeAd {
    ...
}

렌더링 에러 발생시

- (void)nativeAd:(GFPNativeAd *)nativeAd didFailWithError:(GFPError *)error {
    ...
}

기타

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

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

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

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

@import FBAudienceNetwork;    // FAN SDK
@import GoogleMobileAds;      // DFP SDK

- (void)nativeAdLoader:(GFPNativeAdLoader *)nativeAdLoader
          didReceiveAd:(GFPNativeAd *)nativeAd {

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

    if (_nativeAd.adProviderType == GFPNativeAdProviderTypeFAN) {
        // FAN 네이티브 인 경우, FBNativeAd로 캐스팅
        FBNativeAd *fanNativeAd = (FBNativeAd *)nativeAd.adProviderNativeAd;
        /* 페이스북 가이드에 따라 네이티브 광고 뷰 구현 */
        ...


    } else if (gfpNativeAd.adProviderType == GFPNativeAdProviderTypeDFP) {
        // DFP 네이티브 인 경우 GADUnifiedNativeAd로 캐스팅
        GADUnifiedNativeAd *gadNativeAd = 
                    (GADUnifiedNativeAd *)nativeAd.adProviderNativeAd;
        /* 구글의 가이드에 따라 네이티브 광고 뷰 구현 */
        ...
    }

}

모펍 네이티브 광고 적용시 주의사항

모펍의 경우, 네이티브 광고가 렌더링 될 MPNativeAdRendering 프로토콜을 구현한 클래스를 광고를 로드하기 전에 등록해야 합니다.

GFPNativeAdRenderingSetting *setting = [GFPNativeAdRenderingSetting alloc] init];
setting.renderingViewClass = MyMoPubNativeViewClass.class;

self.nativeAdLoader.renderingSetting = setting;

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

• 페이스북 FAN 가이드
• 구글 DFP 가이드
• 모펍 MoPub 가이드
• 인모비 InMobi 가이드

원본 네이티브 객체 사용시 주의사항

각 광고 제공자의 네이티브 응답객체의 delegate에는 값을 세팅하면 안됩니다. (GFPSDK 에서 사용)
네이티브 광고 이벤트는 GFPNativeAd.delegate 를 통해서 얻으실 수 있습니다.

FAN 잘못된 사용 예

// 일반 네이티브 광고인 경우
FBNativeAd *nativeAd = (FBNativeAd *)nativeAd.adProviderNativeAd;
nativeAd.delegate = self <= (X)

// 미디어뷰 없는 네이티브 광고인 경우
FBNativeBannerAd *nativeAd = (FBNativeBannerAd *)nativeAd.adProviderNativeAd;
nativeAd.delegate = self <= (X)

DFP 잘못된 사용 예

GADUnifiedNativeAd *nativeAd = (GADUnifiedNativeAd *)nativeAd.adProviderNativeAd;
nativeAd.delegate = self <= (X)

MoPub 잘못된 사용 예

MPNativeAd *nativeAd = (MPNativeAd *)nativeAd.adProviderNativeAd;
nativeAd.delegate = self <= (X)

InMobi 잘못된 사용 예

IMNative *nativeAd = (IMNative *)nativeAd.adProviderNativeAd;
nativeAd.delegate = self <= (X)