본문으로 건너뛰기

네이티브 템플릿 광고

NAM SDK 8.7.0 버전부터는 네이티브 심플 광고 형식을 통해 복잡한 설정 및 추가 작업 없이 네이티브 광고를 적용할 수 있습니다. 이 가이드에서는 네이티브 심플 광고 형식으로 네이티브 광고를 로드 및 게재하는 방식인 네이티브 템플릿 옵션에 대해서 설명합니다.

네이티브 템플릿은 네이티브 광고를 좀 더 빠르게 구현하고 손쉽게 수정할 수 있게 고안된 것으로 네이티브 템플릿을 사용하면 처음 만드는 네이티브 광고도 수 분안에 구현할 수 있고, 많은 코드 없이도 디자인과 스타일을 빠르게 맞춤설정할 수 있습니다.

이 가이드를 효과적으로 적용하려면 네이티브 광고를 구현하는 것에 익숙해야 합니다.

시작하기 앞서​

네이티브 심플 광고 가이드를 참고하여 네이티브 심플 광고를 로드 및 게재하는 방법을 알아보세요.

Cocoapods 의존성 추가​

NAMSDK Pod과 함께 'NAMSDK/AdRednerer' 모듈 설정을 추가합니다.

'NAMSDK/MediationNDARich' 을 연동하고 있다면, 별도의 기재 없이 AdRenderer 모듈이 추가됩니다.


source 'https://oss.navercorp.com/da-ssp-app-sdk/gfp-sdk-ios-podspec.git' // NAMSDK pods
source 'https://oss.navercorp.com/CocoaPods/Specs.git' // 네이버 공통 pods
source 'https://github.com/CocoaPods/Specs.git'

target 'MyApplication' do
    pod 'NAMSDK'                        # SDK 본체

    pod 'NAMSDK/AdRenderer'             # 디폴트 템플릿 모듈
end

템플릿 옵션 설정​

useNativeTemplate​

템플릿에 관련된 옵션은 GFPNativeTemplateOptions 을 통해 제공됩니다. useNativeTemplate은 템플릿 적용 여부를 설정하는 API 입니다.

let nativeSimpleOption = GFPAdNativeSimpleOptions()

let templateOptions = GFPNativeTemplateOptions(useNativeTemplate: true, nativeOptions: nil)
nativeSimpleOption.templateOptions = templateOptions

광고 렌더링 설정​

템플릿을 사용했을 때, 렌더링 설정을 바꾸고 싶다면 네이티브/네이티브 심플 모두 설정해야합니다. (설정하지 않을 경우 기본값으로 렌더링)

adInterfaceStyle 설정​

아래 샘플 코드는 adInterfaceStyle을 설정하는 방법을 가이드합니다.

let nativeSimpleOption = GFPAdNativeSimpleOptions()

let simpleRenderingSetting = GFPNativeSimpleAdRenderingSetting()
simpleRenderingSetting.adInterfaceStyle = .system //set your style

let options = GFPAdNativeOptions()
let renderingSetting = GFPNativeAdRenderingSetting()
renderingSetting.adInterfaceStyle = .system //set your style
options.renderingSetting = renderingSetting

let templateOptions = GFPNativeTemplateOptions(useNativeTemplate: true, nativeOptions: options)

nativeSimpleOption.templateOptions = templateOptions

그 외​

그 외의 설정은 GFPNativeAdRenderingSetting, GFPNativeSimpleAdRenderingSetting 을 통해 변경 할 수 있습니다. 네이티브/네이티브 심플 가이드를 참고해주세요.

디폴트 네이티브 템플릿​

위 예시와 같이 기본 값의 GFPNativeTemplateOptions 을 적용할 경우, SDK 에 내장된 기본 템플릿을 통해 아래 이미지와 같이 네이티브 광고를 렌더링하게 됩니다.

image

커스텀 네이티브 템플릿​

네이티브 템플릿을 사용하면서 네이티브 광고의 레이아웃을 처음부터 직접 디자인하고 싶다면 아래 예시를 따라주시면 됩니다.

1. 네이티브 템플릿 뷰 정의​

광고 뷰를 구성하는 각 에셋 뷰(title, body 등등)를 커스톰 하게 구성합니다.

image

위험

DFP 등 일부 AP의 비디오 뷰 컨트롤 ui 클릭을 위해, 커스톰 템플릿 구성 시 해당 뷰 하위에 MediaView가 위치해야합니다.

1. GFPNativeTemplateViewProtocol conform 하기​

커스텀 템플릿용 뷰는 아래 예시와 같이 반드시 GFPNativeTemplateViewProtocol 를 conform 해야 합니다.

extension CustomTemplateView: GFPNativeTemplateViewProtocol {
    public static func createView() -> UIView? {
        let view = Bundle.main.loadNibNamed("CustomTemplateView", owner: nil)?.first
        return view as? UIView
    }
}

2. 에셋 뷰 지정 하기​

커스텀 템플릿 뷰에 정의 된 에셋에 맞게 지정합니다. 본인이 구성한 커스텀 템플릿 뷰에 존재하는 에셋만 지정하며, 없는 경우 생략하여도 됩니다.

extension CustomTemplateView: GFPNativeTemplateViewProtocol {
    public func titleAssetView() -> UILabel? {
        /* set your titleLabel */
    }

    public func bodyAssetView() -> UILabel? {
        /* set your bodyLabel */
    }

    public func advertiseAssetView() -> UILabel? {
        /* set your advertiserLabel */
    }

    public func ctaAssetView() -> UILabel? {
        /* set your callToActionLabel */
    }

    public func adBadgeAssetView() -> UILabel? {
        /* set your adBadgeLabel */
    }

    public func noticeAssetView() -> UILabel? {
        /* set your noticeLabel */
    }

    public func iconContainerView() -> UIImageView? {
        /* set your mediaView */
    }

    public func mediaContainerView() -> GFPMediaView? {
        /* set your mediaView */
    }

    public func adChoicesContainerView() -> UIView? {
        /* set your adChoicesContainerView */
    }
}

3. bind 를 통해 데이터 맵핑하기​

커스텀 템플릿 뷰의 bind 메서드를 오버라이드하여 광고 에셋을 각 View에 바인딩합니다.

extension CustomTemplateView: GFPNativeTemplateViewProtocol {
    public func bind(with asset: (any GFPNativeAssetProtocol)?) {
        guard let asset = asset else { self.asset = nil; return }
        
        self.asset = asset

        self.titleLabel.text = asset.title
        self.advertiserLabel.text = asset.advertiser
        self.bodyLabel.text = asset.body
        self.callToActionLabel.text = asset.callToAction
        ...
    }
}
정보
  • mediaView, iconView, adChoicesView는 별도 맵핑 없이 에셋 지정만 하면 sdk 내부적으로 관리합니다.

4. 예상 높이 전달하기​

커스텀 템플릿 뷰의 높이를 전달합니다. 해당 높이는 GFPNativeSimpleAdDelegate의 nativeSimpleAd:didChangeMediaViewSizeWith: 으로 전달됩니다.

extension CustomTemplateView: GFPNativeTemplateViewProtocol {
    public func estimateHeight() -> CGFloat {
        return /* set your view's height */
    }
}

5. (Optional) interfaceStyle 변경에 따른 대응​

extension CustomTemplateView: GFPNativeTemplateViewProtocol {
    public func changeStyle(with isDarkMode: Bool) {
        self.backgroundColor = isDarkMode ? /* set your darkMode's bgColor */ : /* set your lightMode's bgColor */
    }
}

6. (Optional) GFPUserInterestDelegate conform 하기​

커스톰 뷰에서 GFPUserInterestDelegate 을 conform 합니다. ad:didChangeUserInterest: 는 사용자의 광고 관심도 변화 시점에 호출됩니다.

호출 시점:

  • 관심 시작: 광고 영역의 50% 이상이 1초 동안 노출될 때, userInterest 값이 true 로 전달됨.
  • 관심 종료: 광고 영역이 더 이상 노출되지 않을 때, userInterest 값이 false 로 전달됨.

활용 예시: 사용자가 관심을 보이는 시점에 Call to Action 버튼의 색상을 변경하여 광고 주목도를 높이는 등의 동적 UI 처리가 가능합니다.

extension CustomTemplateView : GFPUserInterestDelegate {
    public func ad(_ ad: NSObject!, didChangeUserInterest userInterest: Bool) {
        if userInterest {
            UIView.animate(withDuration: 0.4) {
                if let highlightBgColor = self.asset?.callToActionOption?.highlightBgColor {
                    self.ctaLabel.backgroundColor = highlightBgColor
                } else {
                    self.ctaLabel.backgroundColor = GFPLabelOption.defaultHighlightBgColor
                }
            }
        } else {
            self.ctaLabel.backgroundColor = UIColor.gray
        }
    }
}

3. 네이티브 템플릿 등록​

커스텀 네이티브 템플릿 뷰를 사용하려면 GFPNativeTemplateOptions 에 등록해야 합니다.

다음과 같이 등록합니다:

  • addTemplateWith:templateView: 메서드 사용
  • kGFPTemplateVisualKey.defaultVisualKey 를 비주얼 키로 설정
  • 앞서 생성한 커스텀 네이티브 템플릿 뷰 객체 전달
let templateOptions = GFPNativeTemplateOptions(useNativeTemplate: true, nativeOptions: /* set your nativeOptions */)

let customTemplateView = CustomTemplateView.createView()

if let customTemplateView = customTemplateView as? UIView & GFPNativeTemplateViewProtocol {
    templateOptions.addTemplate(with: kGFPTemplateVisualKey.defaultVisualKey, templateView: customTemplateView)
}

4. 광고 요청 및 렌더링​

위 과정까지 마쳤다면, 이후의 광고 요청 및 렌더링 그리고 광고 리소스 해제 같은 처리는 기존 네이티브 심플 광고와 사용이 동일합니다.

단, 네이티브 템플릿을 사용할 경우는 네이티브 광고가 네이티브 심플 광고 형식을 통해 처리되므로 GFPAdLoader 를 빌드하는 과정에서 네이티브 광고 로드시 필요한 아래와 같은 처리가 포함되지 말아야 합니다.

네이티브 광고의 옵션 설정이 필요하다면 templateOption 에 전달해야합니다.

let adLoader = GFPAdLoader(unitID: "testUnitId", rootViewController: viewController, adParam: adParam)

// 네이티브 템플릿 사용시 포함되지 말아야 합니다.
let nativeOptions = GFPAdNativeOptions()
adLoader.setNativeDelegate(self, nativeOptions: nativeOptions) 

let templateOptions = GFPNativeTemplateOptions(useNativeTemplate: true, nativeOptions: nativeOptions)

let customTemplateView = CustomTemplateView.createView()

if let customTemplateView = customTemplateView as? UIView & GFPNativeTemplateViewProtocol {
    templateOptions.addTemplate(with: kGFPTemplateVisualKey.defaultVisualKey, templateView: customTemplateView)
}

let nativeSimpleOptions = GFPAdNativeSimpleOptions()
 nativeSimpleOptions.templateOptions = templateOptions

adLoader.setNativeSimpleDelegate(self, nativeSimpleOptions: nativeSimpleOptions)

adLoader.loadAd()