본문으로 건너뛰기

상품 특화 렌더링

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

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

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

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

선택적 적용

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

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

// Get extra text assets
// The key is provided through GFP manager
val extraTextKey = "product_name" // Example key from GFP manager
val extraText = nativeAd.getExtraText(extraTextKey)
if (extraText != null) {
    val extraTextView: TextView = nativeAdView.findViewById(R.id.extra_text_view)
    extraTextView.text = extraText
    nativeAdView.setExtraTextView(extraTextKey, extraTextView)
}

// Get extra image assets
// The key is provided through GFP manager
val extraImageKey = "product_image" // Example key from GFP manager
val extraImage = nativeAd.getExtraImage(extraImageKey)
if (extraImage != null) {
    val extraImageView: ImageView = nativeAdView.findViewById(R.id.extra_image_view)
    extraImage.drawable?.let { drawable ->
        extraImageView.setImageDrawable(drawable)
        nativeAdView.setExtraImageView(extraImageKey, extraImageView)
    }
}

텍스트 에셋 스타일 정보​

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

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

  1. 텍스트만 필요한 경우: 기본 메서드를 사용합니다.

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

추가 텍스트 에셋(extraText)의 경우에도 동일한 패턴을 따릅니다:

이러한 메서드들은 모두 nullable한 LabelOption을 반환합니다.

  • LabelOption이 null이 아닌 경우: 해당 에셋에 텍스트가 존재한다는 의미이며, LabelOption.getText() 값은 항상 보장됩니다.
  • LabelOption이 null인 경우: 해당 에셋에 텍스트가 존재하지 않는다는 의미입니다.

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

정보

LabelOption은 각 스타일 옵션별로 두 가지 형태의 API를 제공합니다:

GfpTheme에 따라 밝은 테마와 어두운 테마에 맞춰 다른 옵션이 제공될 수 있으며, 이 테마 분기는 Context를 매개변수로 받는 API로만 처리할 수 있습니다. 따라서 GfpTheme를 사용하는 서비스에서는 Context를 포함한 API를 사용하시기 바랍니다.

// Context를 가져옵니다 (Activity 또는 View의 context 사용)
val context = nativeAdView.context

// Title 에셋의 스타일 정보 조회 및 적용
val titleOption = nativeAd.getTitleWithOption()
if (titleOption != null) {
    val titleView: TextView = nativeAdView.findViewById(R.id.ad_title)
    titleView.text = titleOption.text
    
    // 배경 색상 적용 (가용한 경우에만) - Context 기반 API 사용
    titleOption.getBgColor(context)?.let { bgColor ->
        titleView.setBackgroundColor(bgColor)
    }
    
    // 테두리 색상 적용 (가용한 경우에만) - Context 기반 API 사용
    titleOption.getBorderColor(context)?.let { borderColor ->
        titleView.background?.mutate()?.let { drawable ->
            if (drawable is GradientDrawable) {
                drawable.setStroke(2, borderColor) // 2dp 두께의 테두리
            }
        }
    }
    
    // 텍스트 색상 적용 (가용한 경우에만) - Context 기반 API 사용
    titleOption.getTextColor(context)?.let { textColor ->
        titleView.setTextColor(textColor)
    }
    
    // 볼드 여부 적용 - Context 기반 API 사용
    titleOption.isBold(context)?.let { isBold ->
        if (isBold) {
            titleView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
    }
    
    nativeAdView.titleView = titleView
}

// Body 에셋의 스타일 정보 조회 및 적용
val bodyOption = nativeAd.getBodyWithOption()
if (bodyOption != null) {
    val bodyView: TextView = nativeAdView.findViewById(R.id.ad_body)
    bodyView.text = bodyOption.text
    
    bodyOption.getBgColor(context)?.let { bgColor ->
        bodyView.setBackgroundColor(bgColor)
    }
    
    bodyOption.getTextColor(context)?.let { textColor ->
        bodyView.setTextColor(textColor)
    }
    
    bodyOption.isBold(context)?.let { isBold ->
        if (isBold) {
            bodyView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
    }
    
    nativeAdView.bodyView = bodyView
}

// AdvertiserName 에셋의 스타일 정보 조회 및 적용
val advertiserNameOption = nativeAd.getAdvertiserNameWithOption()
if (advertiserNameOption != null) {
    val advertiserNameView: TextView = nativeAdView.findViewById(R.id.ad_advertiser_name)
    advertiserNameView.text = advertiserNameOption.text
    
    advertiserNameOption.getBgColor(context)?.let { bgColor ->
        advertiserNameView.setBackgroundColor(bgColor)
    }
    
    advertiserNameOption.getTextColor(context)?.let { textColor ->
        advertiserNameView.setTextColor(textColor)
    }
    
    advertiserNameOption.isBold(context)?.let { isBold ->
        if (isBold) {
            advertiserNameView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
    }
    
    nativeAdView.advertiserNameView = advertiserNameView
}

// ExtraText 에셋의 스타일 정보 조회 및 적용
// The key is provided through GFP manager
val extraTextKey = "product_name" // Example key from GFP manager
val extraTextOption = nativeAd.getExtraTextWithOption(extraTextKey)
if (extraTextOption != null) {
    val extraTextView: TextView = nativeAdView.findViewById(R.id.extra_text_view)
    extraTextView.text = extraTextOption.text
    
    extraTextOption.getBgColor(context)?.let { bgColor ->
        extraTextView.setBackgroundColor(bgColor)
    }
    
    extraTextOption.getTextColor(context)?.let { textColor ->
        extraTextView.setTextColor(textColor)
    }
    
    extraTextOption.isBold(context)?.let { isBold ->
        if (isBold) {
            extraTextView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
    }
    
    nativeAdView.setExtraTextView(extraTextKey, extraTextView)
}

GfpNativeAdView 전체 배경 색상​

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

GfpNativeAd.getAdStyleOption() 메서드를 통해 스타일 정보를 조회할 수 있으며, AdStyleOption.getBackgroundColor(Context) 메서드로 배경 색상을 가져올 수 있습니다.

선택적 적용

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

// Context를 가져옵니다 (Activity 또는 View의 context 사용)
val context = nativeAdView.context

// 광고 뷰 전체 배경 색상 조회 및 적용
val adStyleOption = nativeAd.getAdStyleOption()
adStyleOption?.getBackgroundColor(context)?.let { backgroundColor ->
    nativeAdView.setBackgroundColor(backgroundColor)
}