Skip to main content

Product-Specific Rendering

GFP SDK provides product-specific values that allow you to render ads in more diverse and sophisticated forms for specific products provided as native ads. These product-specific values include additional text, images, style information, etc., beyond the basic assets (title, body, advertiserName, etc.), making the visual representation of ads richer.

Product-specific values can be received through the GFP manager and are not required. Therefore, ads will display normally even if they are not provided, and there is no disadvantage if you do not apply them. However, if you implement product-specific rendering by referring to this guide, please be sure to receive guidance from the GFP manager on the types of specific values provided for that product and how to use them.

Additional Text and Image Assets​

In addition to commonly used assets (title, body, advertiserName, etc.), there may be additional assets provided separately depending on the product.

Optional Application

Product-specific additional assets are not required, so ads will display normally even if they are not provided. There is no disadvantage if you do not apply them, and you can optionally apply them only when needed.

How to register additional text and image assets provided by product.

// 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)
    }
}

Text Asset Style Information​

How to retrieve and apply style information provided by text assets (title, body, advertiserName, etc.). Each text asset can include style information such as background color, border color, bold, and text color.

There are two ways to retrieve text assets:

  1. When only text is needed: Use the basic methods.

  2. When both text and style information are needed: Use methods with WithOption as a postfix.

The same pattern applies to additional text assets (extraText):

All these methods return a nullable LabelOption.

Each style option value (background color, border color, text color, etc.) provided by LabelOption returns a value only when that option is available, and returns null when it is not available. Therefore, please perform a null check before using each option value and then apply it.

info

LabelOption provides two types of APIs for each style option:

Depending on GfpTheme, different options may be provided for light and dark themes, and this theme branching can only be handled with APIs that take Context as a parameter. Therefore, services using GfpTheme should use APIs that include Context.

// Get Context (use Activity or View's context)
val context = nativeAdView.context

// Retrieve and apply style information for Title asset
val titleOption = nativeAd.getTitleWithOption()
if (titleOption != null) {
    val titleView: TextView = nativeAdView.findViewById(R.id.ad_title)
    titleView.text = titleOption.text
    
    // Apply background color (only when available) - Use Context-based API
    titleOption.getBgColor(context)?.let { bgColor ->
        titleView.setBackgroundColor(bgColor)
    }
    
    // Apply border color (only when available) - Use Context-based API
    titleOption.getBorderColor(context)?.let { borderColor ->
        titleView.background?.mutate()?.let { drawable ->
            if (drawable is GradientDrawable) {
                drawable.setStroke(2, borderColor) // 2dp border width
            }
        }
    }
    
    // Apply text color (only when available) - Use Context-based API
    titleOption.getTextColor(context)?.let { textColor ->
        titleView.setTextColor(textColor)
    }
    
    // Apply bold - Use Context-based API
    titleOption.isBold(context)?.let { isBold ->
        if (isBold) {
            titleView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
        }
    }
    
    nativeAdView.titleView = titleView
}

// Retrieve and apply style information for Body asset
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
}

// Retrieve and apply style information for AdvertiserName asset
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
}

// Retrieve and apply style information for ExtraText asset
// 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 Background Color​

How to retrieve and apply background color information that can be optionally applied to the entire GfpNativeAdView area.

You can retrieve style information through the GfpNativeAd.getAdStyleOption() method, and get the background color using the AdStyleOption.getBackgroundColor(Context) method.

Optional Application

If background information is not provided for that product, GfpNativeAd.getAdStyleOption() may return null or GfpNativeAd.getAdStyleOption().getBackgroundColor(Context) may return null. Therefore, please perform a null check before applying it.

// Get Context (use Activity or View's context)
val context = nativeAdView.context

// Retrieve and apply background color for the entire ad view
val adStyleOption = nativeAd.getAdStyleOption()
adStyleOption?.getBackgroundColor(context)?.let { backgroundColor ->
    nativeAdView.setBackgroundColor(backgroundColor)
}