네이티브 스페셜 광고

정보

Naver (NDP) 에서 제공하는 스페셜 광고(=RichMedia) 상품에 대한 관련 설정 가이드입니다.

의존성 추가

Rich Media 광고를 사용하기 위해서는 Podfile의 의존성이 추가되어야 합니다.
GFPSDK Core 모듈과 NDA, NDAVideo, NDARich 모듈이 필요합니다.

#static library 사용 시

pod 'GFPSDK'               # SDK 본체
pod 'GFPSDK/MediationNDA'  # 네이버 배너/네이티브 광고
pod 'GFPSDK/MediationNDAVideo'  # 네이버 비디오 광고 (since 4.3.0)
pod 'GFPSDK/MediationNDARich'  # 네이버 프리미엄 광고 (since 4.3.0)

#dynamic library 사용 시

pod 'GFPSDK-Dynamic'               # SDK 본체
pod 'GFPSDK-Dynamic/MediationNDA'  # 네이버 배너/네이티브 광고
pod 'GFPSDK-Dynamic/MediationNDAVideo'  # 네이버 비디오 광고 (since 4.3.0)
pod 'GFPSDK-Dynamic/MediationNDARich'  # 네이버 프리미엄 광고 (since 4.3.0)

로더 설정

리치미디어 상품은 NativeSimple (aka. NS) 형태로 제공 됩니다.
NS 가이드 참고 하시어 광고 로더 설정을 해주시면 됩니다.

GFPNativeSimpleAdDelegate 추가 구현

리치미디어 상품은 기존 NS와는 다르게 상하 확장 기능이 있으므로 확장 / 축소 시 서비스에게 광고뷰 사이즈 변경 이벤트를 전달합니다.
서비스는 해당 델리게이트에서 받은 size 값으로 광고뷰를 조정하면 적용이 가능합니다.

Swift
Objective-C

func nativeSimpleAd(_ nativeSimpleAd: GFPNativeSimpleAd, didChangeRichAdSizeWith size: CGSize) {
    // ...
}

- (void)nativeSimpleAd:(GFPNativeSimpleAd *)nativeSimpleAd didChangeRichAdSizeWith:(CGSize)size {
    // ...
}

정보

7.5.2 버전부터 확장 / 축소 시 시작과 종료를 알려주는 Delegate가 추가되었습니다.

Swift
Objective-C

func nativeSimpleRichAdExtendComplete(_ nativeSimpleAd: GFPNativeSimpleAd) {
    // 확장 완료
}

func nativeSimpleRichAdExtendStart(_ nativeSimpleAd: GFPNativeSimpleAd, toSize size: CGSize) {
    // 확장 시작, 확장될 최종 크기 전달
}

func nativeSimpleRichAdShrinkComplete(_ nativeSimpleAd: GFPNativeSimpleAd) {
    // 축소 완료
}

func nativeSimpleRichAdShrinkStart(_ nativeSimpleAd: GFPNativeSimpleAd, toSize size: CGSize) {
    // 축소 시작, 축소될 최종 크기 전달
}

- (void)nativeSimpleRichAdExtendComplete:(GFPNativeSimpleAd *)nativeSimpleAd {
    // 확장 완료
}

- (void)nativeSimpleRichAdExtendStart:(GFPNativeSimpleAd *)nativeSimpleAd toSize:(CGSize)size {
    // 확장 시작, 확장될 최종 크기 전달
}

- (void)nativeSimpleRichAdShrinkComplete:(GFPNativeSimpleAd *)nativeSimpleAd {
    // 축소 완료
}

- (void)nativeSimpleRichAdShrinkStart:(GFPNativeSimpleAd *)nativeSimpleAd toSize:(CGSize)size {
    // 축소 시작, 축소될 최종 크기 전달
}

Special DA 최소 노출 높이

Special DA 더블크라운, 트리플크라운 광고에서 서비스가 보장해야 할 최소 노출 영역 높이를 반환합니다.

Swift
Objective-C

func minimumSpecialDaRegionHeight() -> CGFloat {
    return 100
}

- (CGFloat)minimumSpecialDaRegionHeight {
    return 100;
}

GFPNativeVideoEventDelegate

리치 광고 비디오 재생 상태 변화를 수신하려면 GFPNativeVideoEventDelegate를 구현하고, GFPNativeSimpleAdRenderingSetting의 videoEventDelegate에 등록합니다.

Swift
Objective-C

nativeSimpleOptions.simpleAdRenderingSetting.videoEventDelegate = self

nativeSimpleOptions.simpleAdRenderingSetting.videoEventDelegate = self;

Swift
Objective-C

func nativeAd(_ nativeAd: NSObject, richVideoWillPlayWith isMuted: Bool) {
    // 비디오 재생 직전
}

func nativeAd(_ nativeAd: NSObject, richVideoDidPlayWith isMuted: Bool) {
    // 비디오 재생 시작 후 상태 변경
}

func nativeAd(_ nativeAd: NSObject, richVideoWillStopWith isMuted: Bool) {
    // 비디오 정지 직전
}

func nativeAd(_ nativeAd: NSObject, richVideoDidStopWith isMuted: Bool) {
    // 비디오 정지 후 상태 변경
}

func nativeAd(_ nativeAd: NSObject, richVideoMuteChanged isMuted: Bool) {
    // 뮤트 상태 변경
}

- (void)nativeAd:(NSObject *)nativeAd richVideoWillPlayWith:(BOOL)isMuted {
    // 비디오 재생 직전
}

- (void)nativeAd:(NSObject *)nativeAd richVideoDidPlayWith:(BOOL)isMuted {
    // 비디오 재생 시작 후 상태 변경
}

- (void)nativeAd:(NSObject *)nativeAd richVideoWillStopWith:(BOOL)isMuted {
    // 비디오 정지 직전 (메모리 해제 시에는 호출 안 됨)
}

- (void)nativeAd:(NSObject *)nativeAd richVideoDidStopWith:(BOOL)isMuted {
    // 비디오 정지 후 상태 변경 또는 메모리 해제 시
}

- (void)nativeAd:(NSObject *)nativeAd richVideoMuteChanged:(BOOL)isMuted {
    // 뮤트 상태 변경
}

확장형 광고의 최대 확장 높이 제한

정보

9:16, 16:9, 1:1 비율 동영상을 제공하는 스페셜 DA 프리미엄형 "뉴" 동영상 확장형 이후로 부터 출시된 일부 광고 상품 부터 적용됩니다.

maxExtendingHeight는 블록으로 설정하며, 광고가 호출된 이후에도 동적으로 변경할 수 있습니다.
0 이하로 설정하면 높이를 제한하지 않습니다.

Swift
Objective-C

let nativeSimpleOptions = GFPAdNativeSimpleOptions()
nativeSimpleOptions.simpleAdRenderingSetting = GFPNativeSimpleAdRenderingSetting()
nativeSimpleOptions.simpleAdRenderingSetting.maxExtendingHeight = { 50 }
self.adLoader?.setNativeSimpleDelegate(self, nativeSimpleOptions: nativeSimpleOptions)

GFPAdNativeSimpleOptions *nativeSimpleOptions = [[GFPAdNativeSimpleOptions alloc] init];
nativeSimpleOptions.simpleAdRenderingSetting = [[GFPNativeSimpleAdRenderingSetting alloc] init];
nativeSimpleOptions.simpleAdRenderingSetting.maxExtendingHeight = ^CGFloat { return 50; };
[self.adLoader setNativeSimpleDelegate:self nativeSimpleOptions:nativeSimpleOptions];

확장형 광고 미디어의 세로/가로 비율 조회

정보

9:16, 16:9, 1:1 비율 동영상을 제공하는 스페셜 DA 프리미엄형 "뉴" 동영상 확장형 이후로 부터 출시된 일부 광고 상품 부터 적용됩니다.

Swift
Objective-C

func adLoader(_ adLoader: GFPAdLoader, didReceive nativeSimpleAd: GFPNativeSimpleAd) {
    let mediaSize = nativeSimpleAd.mediaData?.richMediaData?.extendMediaSize
    let ratioType = nativeSimpleAd.mediaData?.richMediaData?.extendMediaAspectRatioType
    // GFPRichExtendMediaRatioTypeOther
    // GFPRichExtendMediaRatioType1_1
    // GFPRichExtendMediaRatioType9_16
    // GFPRichExtendMediaRatioType16_9
}

- (void)adLoader:(GFPAdLoader *)adLoader didReceiveNativeSimpleAd:(GFPNativeSimpleAd *)nativeSimpleAd {
    CGSize mediaSize = nativeSimpleAd.mediaData.richMediaData.extendMediaSize;

    GFPRichExtendMediaRatioType ratioType = nativeSimpleAd.mediaData.richMediaData.extendMediaAspectRatioType;
    /**
    * GFPRichExtendMediaRatioTypeOther
    * GFPRichExtendMediaRatioType1_1
    * GFPRichExtendMediaRatioType9_16
    * GFPRichExtendMediaRatioType16_9
    */
}

기본형 병행 설정

정보

Rich Media의 세로 기본 값은 140입니다.

리치미디어 상품은 리치미디어 상품과 일반 이미지형의 조합으로 제공됩니다.
서비스에서 광고 세로 영역을 이미지형과 리치미디어 상품에 따라서 유동적으로 조절하지 못하는 상황일 때,
ex) 광고 첫 시작 시 이미지형 / 리치형 관계 없이 고정 사이즈값을 유지해야할 때
이미지형 광고를 광고 영역에 상관 없이, 이미지 사이즈에 우선하여 우하단 중앙에 배열하도록 설정하는 isImageSizePreferred 설정이 존재합니다.

Swift
Objective-C

let simpleSetting = GFPNativeSimpleAdRenderingSetting()
simpleSetting.preferredAdChoicesViewPosition = .topRightCorner
simpleSetting.isImageSizePreferred = true

let nativeSimpleOptions = GFPAdNativeSimpleOptions()
nativeSimpleOptions.simpleAdRenderingSetting = simpleSetting

// ...

self.adLoader?.setNativeSimpleDelegate(self, nativeSimpleOptions: nativeSimpleOptions)

GFPNativeSimpleAdRenderingSetting *simpleSetting = [[GFPNativeSimpleAdRenderingSetting alloc] init];
simpleSetting.preferredAdChoicesViewPosition = GFPAdChoicesViewPositionTopRightCorner;
simpleSetting.isImageSizePreferred = YES;

GFPAdNativeSimpleOptions *nativeSimpleOptions = [[GFPAdNativeSimpleOptions alloc] init];
nativeSimpleOptions.simpleAdRenderingSetting = simpleSetting;

// ...

[self.adLoader setNativeSimpleDelegate:self nativeSimpleOptions:nativeSimpleOptions];

유동적으로 대응이 가능하다면, GFPNativeSimpleAdDelegate의 아래 메서드로 대응할 수 있습니다.

Swift
Objective-C

func nativeSimpleAd(_ nativeSimpleAd: GFPNativeSimpleAd, didChangeMediaViewSizeWith size: CGSize) {
    // ...
}

- (void)nativeSimpleAd:(GFPNativeSimpleAd *)nativeSimpleAd didChangeMediaViewSizeWith:(CGSize)size {
    // ...
}

트리플크라운 / 더블크라운 배경 뷰 설정

트리플크라운·더블크라운 광고는 광고뷰 뒤에 서비스 지면의 배경 뷰와 오브젝트 뷰를 함께 활용합니다.
뷰 계층에 미리 추가해 둔 후, GFPNativeSimpleAdView의 additionalRenderingViewDict에 아래 키로 전달합니다.

키 상수	용도
`kTripleCrownBgView`	트리플크라운 배경 뷰 (배경 영상이 삽입됨)
`kTripleCrownTopObjectView`	트리플크라운 상단 오브젝트 뷰 (광고 로고가 삽입됨)
`kDoubleCrownBgView`	더블크라운 배경 뷰 (배경 영상이 삽입됨)

경고

additionalRenderingViewDict는 반드시 nativeSimpleAdView.nativeAd 설정 전에 해야 합니다.

트리플크라운에서 kTripleCrownBgView와 kTripleCrownTopObjectView 두 뷰를 모두 전달하지 않으면 SDK가 자동으로 대체 광고 형태로 렌더링합니다.

Swift
Objective-C

// 1. 배경 뷰들을 뷰 계층에 추가
let tripleCrownBGView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 400))
tripleCrownBGView.isUserInteractionEnabled = true
scrollView.addSubview(tripleCrownBGView)

let doubleCrownBGView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 300))
doubleCrownBGView.isUserInteractionEnabled = true
scrollView.addSubview(doubleCrownBGView)

let tripleCrownObjectView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 200))
tripleCrownObjectView.isUserInteractionEnabled = true
scrollView.addSubview(tripleCrownObjectView)

// 2. nativeAd 설정 전에 additionalRenderingViewDict 전달
nativeSimpleAdView.additionalRenderingViewDict = [
    kTripleCrownBgView as String: tripleCrownBGView,
    kTripleCrownTopObjectView as String: tripleCrownObjectView,
    kDoubleCrownBgView as String: doubleCrownBGView
]
nativeSimpleAdView.nativeAd = nativeSimpleAd

// 1. 배경 뷰들을 뷰 계층에 추가
self.tripleCrownBGView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 400)];
self.tripleCrownBGView.userInteractionEnabled = YES;
[scrollView addSubview:self.tripleCrownBGView];

self.doubleCrownBGView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300)];
self.doubleCrownBGView.userInteractionEnabled = YES;
[scrollView addSubview:self.doubleCrownBGView];

self.tripleCrownObjectView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 200)];
self.tripleCrownObjectView.userInteractionEnabled = YES;
[scrollView addSubview:self.tripleCrownObjectView];

// 2. nativeAd 설정 전에 additionalRenderingViewDict 전달
self.nativeSimpleAdView.additionalRenderingViewDict = @{
    kTripleCrownBgView: self.tripleCrownBGView,
    kTripleCrownTopObjectView: self.tripleCrownObjectView,
    kDoubleCrownBgView: self.doubleCrownBGView
};
self.nativeSimpleAdView.nativeAd = nativeSimpleAd;

광고 타입 확인

수신된 광고가 트리플크라운인지 더블크라운인지 확인하려면 nativeSimpleAd.assets.extraInfo의 kGFPMediaViewType 키를 사용합니다.

Swift
Objective-C

let mediaType = nativeSimpleAd.assets?.extraInfo?[kGFPMediaViewType] as? NSNumber
if mediaType?.intValue == GFPExternalMediaViewType.tripleCrown.rawValue {
    // 트리플크라운 광고
} else if mediaType?.intValue == GFPExternalMediaViewType.doubleCrown.rawValue {
    // 더블크라운 광고
}

NSNumber *mediaType = nativeSimpleAd.assets.extraInfo[kGFPMediaViewType];
if (mediaType.intValue == GFPExternalMediaViewTypeTripleCrown) {
    // 트리플크라운 광고
} else if (mediaType.intValue == GFPExternalMediaViewTypeDoubleCrown) {
    // 더블크라운 광고
}

트리플크라운 스페셜 로고 정보 취득

트리플크라운 광고의 스페셜 로고 색상 변경 등을 위한 정보를 JSON 문자열 형태로 제공합니다.
kGFPNaverAppLogoInfoKey 키로 취득합니다.

Swift
Objective-C

let logoJsonString = nativeSimpleAd.assets?.extraInfo?[kGFPNaverAppLogoInfoKey] as? String

NSString *logoJsonString = nativeSimpleAd.assets.extraInfo[kGFPNaverAppLogoInfoKey];

Special DA 하단 확장 전용 설정

기본적으로 Special DA는 상단 마진을 포함한 확장 방식을 사용합니다.
상단 마진 없이 하단 방향으로만 확장되도록 하려면 enableSpecialDABottomExtend를 설정합니다.

Swift
Objective-C

let simpleSetting = GFPNativeSimpleAdRenderingSetting()
simpleSetting.enableSpecialDABottomExtend = true

GFPNativeSimpleAdRenderingSetting *simpleSetting = [[GFPNativeSimpleAdRenderingSetting alloc] init];
simpleSetting.enableSpecialDABottomExtend = YES;

Special DA 레이아웃 설정

Special DA 광고의 세부 레이아웃을 조정할 때 사용하는 옵션입니다.

프로퍼티	타입	설명
`specialDAOverlayHeight`	`CGFloat`	위젯 지면과 합치하는 높이 값
`specialDAAdditionalMargin`	`CGFloat`	위젯 추가 여백 값
`specialDAGradientHeight`	`CGFloat`	광고 하단 그라디언트 높이
`v1Gradient`	`BOOL`	MediaView 하단 v1 그라디언트 사용 여부

Swift
Objective-C

let simpleSetting = GFPNativeSimpleAdRenderingSetting()
simpleSetting.specialDAOverlayHeight = 44
simpleSetting.specialDAAdditionalMargin = 8
simpleSetting.specialDAGradientHeight = 60
simpleSetting.v1Gradient = true

GFPNativeSimpleAdRenderingSetting *simpleSetting = [[GFPNativeSimpleAdRenderingSetting alloc] init];
simpleSetting.specialDAOverlayHeight = 44;
simpleSetting.specialDAAdditionalMargin = 8;
simpleSetting.specialDAGradientHeight = 60;
simpleSetting.v1Gradient = YES;

의존성 추가​

로더 설정​

GFPNativeSimpleAdDelegate 추가 구현​

Special DA 최소 노출 높이​

GFPNativeVideoEventDelegate​

확장형 광고의 최대 확장 높이 제한​

확장형 광고 미디어의 세로/가로 비율 조회​

기본형 병행 설정​

트리플크라운 / 더블크라운 배경 뷰 설정​

광고 타입 확인​

트리플크라운 스페셜 로고 정보 취득​

Special DA 하단 확장 전용 설정​

Special DA 레이아웃 설정​