본문으로 건너뛰기

상품 특화 렌더링

GFP SDK 는 네이티브 광고로 제공되는 특정 상품에 대해 더욱 다양하고 세련된 형태로 광고를 렌더링할 수 있도록 상품별로 특화된 값들을 제공합니다. 이러한 상품 특화 값들은 기본 에셋(title, body, advertiserName 등) 외에 추가로 제공되는 텍스트, 이미지, 스타일 정보 등을 포함하며, 광고의 시각적 표현을 더욱 풍부하게 만들어줍니다.

상품 특화 값들은 GFP 관리자를 통해 전달받을 수 있으며, 필수값이 아닙니다. 따라서 제공되지 않는 경우에도 광고는 정상적으로 표시되며, 적용하지 않아도 불이익은 없습니다. 다만, 본 가이드를 참고하여 상품 특화 렌더링을 구현하실 경우, GFP 관리자로부터 해당 상품에 제공되는 특화 값의 종류와 사용 방법에 대한 안내를 반드시 받으시기 바랍니다.

추가 텍스트 및 이미지 에셋​

일반적으로 통용되는 에셋(title, body, advertiserName 등) 외에도, 상품에 따라 별도로 제공되는 추가 에셋이 있을 수 있습니다.

선택적 적용

상품별 추가 에셋은 필수값이 아니므로, 제공되지 않는 경우에도 광고가 정상적으로 표시됩니다. 적용하지 않아도 불이익이 없으며, 필요한 경우에만 선택적으로 적용하시면 됩니다.

정보

네이버 광고에 한해 Native Custom Format을 제공합니다.

  • 현재 추가 요소는 Label만 제공합니다.

상품별로 제공되는 추가 텍스트 및 이미지 에셋을 등록하는 방법입니다.

  • extraText: GFPNativeAd.extraText(with: String) 메서드를 통해 텍스트 에셋을 가져온 후, 해당되는 key와 함께 GfpNativeAdView.setExtraLabelWith() 메서드로 등록합니다.
  • extraImage: GFPNativeAd.extraImage(with: String) 메서드를 통해 이미지 에셋을 가지고 옵니다.
func adLoader(_ unifiedAdLoader: GFPAdLoader, didReceiveNativeAd nativeAd: GFPNativeAd) {
    // Get extra text assets
    // The key is provided through GFP manager
    if let desc2 = nativeAd.extraText(with: "desc2"), !desc2.isEmpty {
        self.nativeAdView?.body2Label.text = desc2
        self.nativeAdView?.setExtraLabel(with: "desc2", label: self.nativeAdView?.body2Label)
    }
    
    // Get extra image assets
    // The key is provided through GFP manager
    if let extraImage = nativeAd.extraImage(with: "extraImage") {
        self.nativeAdView.imageView.image = extraImage;
    }
    ...
    
    self.nativeAdView?.nativeAd = nativeAd
    ...
}

텍스트 에셋 스타일 정보​

텍스트로 구성된 에셋(title, body, advertiser 등)에서 추가로 제공하는 스타일 정보를 조회하고 적용하는 방법입니다. 각 텍스트 에셋은 배경 색상, 테두리 색상, 볼드 여부, 텍스트 색상 등의 스타일 정보를 포함할 수 있습니다.

텍스트 에셋을 조회하는 방법은 두 가지가 있습니다:

  1. 텍스트만 필요한 경우: 기본 프로퍼티를 사용합니다.

    • GFPNativeAd.title, GFPNativeAd.body, GFPNativeAd.advertiser, ...

  2. 텍스트와 스타일 정보가 함께 필요한 경우: 메서드명에 Option을 postfix로 붙인 메서드를 사용합니다.

    • GFPNativeAd.titleOption, GFPNativeAd.bodyOption, GFPNativeAd.advertiserOption

  3. 추가 텍스트 에셋(extraText)의 경우

  • 텍스트만 필요한 경우: GFPNativeAd.extraText(with: String)
  • 스타일 정보가 함께 필요한 경우: GFPNativeAd.extraLabelOption(with: String)

LabelOption이 제공하는 각 스타일 옵션 값들(배경 색상, 테두리 색상, 텍스트 색상 등)은 해당 옵션이 가용한 경우에만 값을 반환하고, 가용하지 않은 경우 nil을 반환합니다. 따라서 각 옵션 값을 사용하기 전에 nil 체크를 수행한 후 적용하시기 바랍니다.

func adLoader(_ unifiedAdLoader: GFPAdLoader, didReceiveNativeAd nativeAd: GFPNativeAd) {
    
    // 네이티브 광고 객체 및 delegate 등록
    self.nativeAd = nativeAd
    self.nativeAd.delegate = self

    // Title 애셋의 스타일 정보 조회 및 적용
    let titleLabelOption = nativeAd.titleOption
    self.titleLabel.textColor = nativeAd.titleOption?.textColor ?? /* set your default color */

    // Extra Label 애셋의 스타일 정보 조회 및 적용
    let labelOption = nativeAd.extraLabelOption(with: "desc2")
    self.extraLabel.textColor = labelOption?.textColor ?? /* set your default color */

    // 뷰 객체에 네이티브 광고를 세팅하면, iconView, mediaView 렌더링 및 뷰 트래킹이 시작됨. adView와 ad는 1:1로 맵핑.
    self.nativeAdView.nativeAd = nativeAd
}

GFPNativeAdView 전체 배경 색상​

GFPNativeAdView 전체 영역에 선택적으로 적용 가능한 배경 색상 정보를 조회하고 적용하는 방법입니다.

GFPNativeAd.adStyleOption 프로퍼티를 통해 스타일 정보를 get 할 수 있으며, GFPAdStyleOption.backgroundColor 로 배경 색상을 가져올 수 있습니다.

선택적 적용

해당 상품에서 배경 정보를 전달하지 않을 경우, GFPNativeAd.adStyleOption은 nil을 반환하거나 GFPNativeAd.adStyleOption.backgroundColor가 nil을 반환할 수 있습니다. 따라서 nil 체크를 수행한 후 적용하시기 바랍니다.

// 광고 뷰 전체 배경 색상 조회 및 적용
nativeAdView.backgroundColor = nativeAd.adStyleOption.backgroundColor ?? /* set your default color */;