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, and style information 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 be displayed 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

Additional assets per product are not required, so ads will be displayed 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.

info

Native Custom Format is provided only for Naver ads.

  • Currently, only Label is provided as an additional element.

This is how to register additional text and image assets provided per product.

  • extraText: Get text assets through the GFPNativeAd.extraText(with: String) method, then register them with the corresponding key using the GfpNativeAdView.setExtraLabelWith() method.
  • extraImage: Get image assets through the GFPNativeAd.extraImage(with: String) method.
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
    ...
}

Text Asset Style Information​

This is how to query and apply style information additionally provided in text-based assets (title, body, advertiser, etc.). Each text asset can include style information such as background color, border color, bold status, and text color.

There are two ways to query text assets:

  1. When only text is needed: Use basic properties.

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

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

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

  3. For additional text assets (extraText)

  • When only text is needed: GFPNativeAd.extraText(with: String)
  • When style information is also needed: GFPNativeAd.extraLabelOption(with: String)

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

func adLoader(_ unifiedAdLoader: GFPAdLoader, didReceiveNativeAd nativeAd: GFPNativeAd) {
    
    // Register native ad object and delegate
    self.nativeAd = nativeAd
    self.nativeAd.delegate = self

    // Query and apply Title asset style information
    let titleLabelOption = nativeAd.titleOption
    self.titleLabel.textColor = nativeAd.titleOption?.textColor ?? /* set your default color */

    // Query and apply Extra Label asset style information
    let labelOption = nativeAd.extraLabelOption(with: "desc2")
    self.extraLabel.textColor = labelOption?.textColor ?? /* set your default color */

    // When you set the native ad to the view object, iconView and mediaView rendering and view tracking begin. adView and ad are mapped 1:1.
    self.nativeAdView.nativeAd = nativeAd
}

GFPNativeAdView Overall Background Color​

This is how to query and apply background color information that can be optionally applied to the entire area of GFPNativeAdView.

You can get style information through the GFPNativeAd.adStyleOption property, and get the background color through GFPAdStyleOption.backgroundColor.

Optional Application

If background information is not provided for that product, GFPNativeAd.adStyleOption may return nil or GFPNativeAd.adStyleOption.backgroundColor may return nil. Therefore, please perform a nil check before applying it.

// Query and apply overall background color of ad view
nativeAdView.backgroundColor = nativeAd.adStyleOption.backgroundColor ?? /* set your default color */;