-jio-start-block-type-3
|
¶ Native Ads-jio-style-title ¶ IntroductionNative ads come in two types – Native Banner (320x50) and Native Billboard (300x250). Customize to match your app's layout or use pre-defined rendering by the SDK. |
 |
 |
Complete GETTING STARTED section and INITIALIZE SDK section before starting this section.
|
-jio-style-title ¶ Native BannerNative Banner is sized at 320x50 for In-Feed integration. Customize Native Banner for a seamless fit or use default SDK layout. |
|
|
-jio-style-title ¶ Native BillboardNative Billboard is sized at 300x250 for Content Stream. Customize Native Billboard for Mastheads or carousels or use default SDK layout. |
|
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Default Rendering and Customization
Use SDK's pre-defined layout for Native Banners and Billboards or tailor Native Banners and Billboards to your app's design using provided customization options.
-jio-style-title
¶ Caching Native Ads
Cache native ads by initializing a JioAdView, setting up an ad delegate, creating an ad container, adding the ad view, and initiating the caching process with a single call to jioAdView?.cacheAd().
var adView: JioAdView
jioAdView = JioAdView(adSpotId: "<ADSPOT_KEY_GOES_HERE>", adType: .nativeContentStream, delegate: self, forPresentionClass: self, publisherContainer: adContainer)
jioAdView?.setCustomImageSize(width: Int, height: Int) // For Custom Native AdType
jioAdView?.cacheAd() Possible ad Formats can be
1. infeed
2. nativeContentStream
3. customNative
Incase of customNative, please pass your required size through below API:
setCustomImageSize(width: Int, height: Int)
//Example:
//jioAdView.setCustomImageSize(720, 250)
-jio-style-title
¶ Displaying Native Ad
Upon invoking the adView.loadAd() API, the SDK dynamically attempts to render the native ad within the designated container. This action can be triggered either in response to an app event or integrated within the onAdPrepared() callback, providing flexibility in Ad display management.
extension InstreamVC : JIOAdViewProtocol {
func onAdPrepared(adView: JioAdView) {
self.showToast(message: "onAdDataPrepared")
adView.loadAd()
}
} -jio-end-block-type-2
-jio-start-block-type-2
¶ Managing Native Ads
-jio-style-title
¶ Lifecycle Management
Ensure proper lifecycle management by calling invalidateAd() to destroy the Native Ad object
self.adView?.invalidateAd()
self.adView = nil -jio-end-block-type-2
-jio-start-block-type-2
¶ Customizing Native Ads
-jio-style-title
¶ Customizing Infeed Native Ads/Banner ads (300x50)
Add required elements with tags for individual functionality: Icon layout, Title, Description, CTA Button by enabling customization by implementing like below code
Sample Reference Code
import UIKit
class NativeInFeed300x50Layout: UIView {
@IBOutlet weak var contentView: UIView?
@IBOutlet weak var imageViewIcon: UIImageView?
@IBOutlet weak var labelTitle: UILabel?
@IBOutlet weak var labelDesc: UILabel?
@IBOutlet weak var buttonCTA: UIButton?
@IBOutlet weak var ctaButtonView: UIView?
override init(frame: CGRect) {
super.init(frame: frame)
self.frame = frame
setUpNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpNib()
}
func setUpNib() {
guard Bundle(for: type(of: self)).path(forResource: "NativeInFeed300x50Layout", ofType: "nib") != nil else {
SDKLog("Bundle is nil")
return
}
Bundle(for: type(of: self)).loadNibNamed("NativeInFeed300x50Layout", owner: self, options: nil)
guard let contentView = contentView else {
SDKLog("contentView is nil")
return
}
addSubview(contentView)
addSubViewWithFullConstraintSame(parentView:self, childView: contentView)
contentView.layer.borderWidth = 0.5
self.contentView?.layer.borderWidth = 0.5
imageViewIcon?.tag = NativeAdTags.iconImageView.rawValue
labelTitle?.tag = NativeAdTags.title.rawValue
labelDesc?.tag = NativeAdTags.desc.rawValue
buttonCTA?.tag = NativeAdTags.ctaButton.rawValue
ctaButtonView?.tag = NativeAdTags.ctaButtonView.rawValue
}
}
-jio-style-title
¶ Customizing ContentStream / BillBoard Ads(300x250)
Add required elements with tags for individual functionality: Icon layout, Title, Description, CTA Button by enabling customization by implementing like below code
Sample Reference Code
import UIKit
class NativeContentStreamLayout: UIView {
@IBOutlet weak var contentView: UIView?
@IBOutlet weak var imageViewIcon: UIImageView?
@IBOutlet weak var mediaView: UIView?
@IBOutlet weak var labelTitle: UILabel?
@IBOutlet weak var labelDesc: UILabel?
@IBOutlet weak var buttonCTA: UIButton?
// @IBOutlet weak var startRatingLbl: FloatRatingView?
@IBOutlet weak var bottomView: UIView!
override init(frame: CGRect) {
super.init(frame: frame)
setUpNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpNib()
}
func setUpNib() {
guard Bundle(for: type(of: self)).path(forResource: "NativeContentStreamLayout", ofType: "nib") != nil else {
SDKLog("Bundle is nil")
return
}
Bundle(for: type(of: self)).loadNibNamed("NativeContentStreamLayout", owner: self, options: nil)
guard let contentView = contentView else {
SDKLog("contentView is nil")
return
}
addSubview(contentView)
addSubViewWithFullConstraintSame(parentView:self, childView: contentView)
imageViewIcon?.tag = NativeAdTags.iconImageView.rawValue
mediaView?.tag = NativeAdTags.mediaView.rawValue
labelTitle?.tag = NativeAdTags.title.rawValue
labelDesc?.tag = NativeAdTags.desc.rawValue
buttonCTA?.tag = NativeAdTags.ctaButton.rawValue
contentView.layer.borderWidth = 0.8
contentView.layer.borderColor = UIColor.lightGray.cgColor
}
}
-jio-style-title
¶ Custom Native Ad
This ad type renders an image of any custom size. The custom ImageView is a mandatory UI element, while other native UI elements, like the icon ImageView, title label, description label, and CTA button, are optional.
The following public API is used to define the custom size:
jioAdView.setCustomImageSize(width: Int, height: Int) MediaView supports only video.
Add required elements with tags for individual functionality: Custom Image, Icon, Title, Description, CTA Button by enabling customisation by implementing like below code.
Sample Reference Code
import UIKit
class CustomNativeLayout: UIView {
@IBOutlet weak var contentView: UIView?
@IBOutlet weak var imageViewCustom: UIImageView? // Mandatory
@IBOutlet weak var imageViewIcon: UIImageView?
@IBOutlet weak var mediaView: UIView?
@IBOutlet weak var labelTitle: UILabel?
@IBOutlet weak var labelDesc: UILabel?
@IBOutlet weak var buttonCTA: UIButton?
@IBOutlet weak var labelSponsor: UILabel?
override init(frame: CGRect) {
super.init(frame: frame)
setUpNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpNib()
}
func setUpNib() {
let bundle = Bundle(for: type(of: self)).path(forResource: "CustomNativeLayout", ofType: "nib")
guard bundle != nil else {
SDKLog("Bundle is nil")
return
}
Bundle(for: type(of: self)).loadNibNamed("CustomNativeLayout", owner: self, options: nil)
guard let contentView = contentView else {
SDKLog("contentView is nil")
return
}
addSubview(contentView)
contentView.frame = self.frame
imageViewCustom?.tag = NativeAdTags.customImageView.rawValue
imageViewIcon?.tag = NativeAdTags.iconImageView.rawValue
mediaView?.tag = NativeAdTags.mediaView.rawValue
labelTitle?.tag = NativeAdTags.title.rawValue
labelDesc?.tag = NativeAdTags.desc.rawValue
labelSponsor?.tag = NativeAdTags.sponsored.rawValue
buttonCTA?.tag = NativeAdTags.ctaButton.rawValue
}//end of func
}//end of class-jio-end-block-type-2
-jio-start-block-type-3
¶ Native CarouselNative carousels allow advertisers to display multiple content cards within a single ad unit, creating an interactive and engaging experience for users to tell a comprehensive brand story.
Features: 1. Showcase series of products or related creatives in one ad unit 2. 1-10 swipe able container view with individual card CTAs and descriptions 3. Expandable/Collapsible Carousels for non-disruptive monetization 4. Customizable UI to match look and feel of app interface 5. Supported for mobile and CTV 6. Supports dynamic aspect ratios, including 1:1, 3:4, 16:9, and 9:16. |
 |
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Carousel Layout Setup
The carousel feature is implemented using a UICollectionView and UICollectionViewCell on the SDK side and rendered within the carousel container on the app side.
Set the custom native ad type and call the following API before cacheAd() to provide a custom layout.
jioAdView?.setCustomView(container: UIView?)-jio-style-title
Sample reference code for a custom view with a Media Layout or a Custom Image.
class CustomNativeView: UIView {
@IBOutlet weak var contentView: UIView?
@IBOutlet weak var imageViewIcon: UIImageView?
@IBOutlet weak var mediaView: UIView?
@IBOutlet weak var labelTitle: UILabel?
@IBOutlet weak var labelDesc: UILabel?
@IBOutlet weak var buttonCTA: UIButton?
@IBOutlet weak var customImageview: UIImageView?
@IBOutlet weak var carouselContainer: UIView!
@IBOutlet weak var stackViewMediaViewCarousel: UIStackView! // SDK show either carousel or Media
override init(frame: CGRect) {
super.init(frame: frame)
setUpNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpNib()
}
func setUpNib() {
let bundle = Bundle(for: type(of: self)).path(forResource: "CustomNativeView", ofType: "nib")
guard bundle != nil else {
SDKLog("Bundle is nil")
return
}
Bundle(for: type(of: self)).loadNibNamed("CustomNativeView", owner: self, options: nil)
guard let contentView = contentView else {
SDKLog("contentView is nil")
return
}
addSubview(contentView)
addSubViewWithFullConstraintSame(parentView: self, childView: contentView)
imageViewIcon?.tag = NativeAdTags.iconImageView.rawValue
mediaView?.tag = NativeAdTags.mediaView.rawValue
labelTitle?.tag = NativeAdTags.title.rawValue
labelDesc?.tag = NativeAdTags.desc.rawValue
buttonCTA?.tag = NativeAdTags.ctaButton.rawValue
customImageview?.tag = NativeAdTags.customImageView.rawValue
self.carouselContainer.tag = CarouselAdTags.carouselContainer.rawValue
imageViewIcon?.contentMode = .scaleAspectFill
stackViewMediaViewCarousel.tag = JioExpandCollapseAdTag.expandCollapseContainer.rawValue
}
Use
CarouselAdTags.carouselContainerto tag the carousel container, which is a plainUIView.
-jio-style-title
¶ Customizing Native Carousel Items
If you want to customize the collection view cell instead of using the default sdklayout-carousel item layout, call the following API.
jioAdView?.setCarouselItemLayout(container: view?)
-jio-style-title
¶ Caching & Displaying Native Carousel Ad
Refer to the Custom Native Ad and include the mandatory carousel container with a tag, while setCarouselItemLayout() is optional.
-jio-end-block-type-2
-jio-start-block-type-3
¶ Expandable AdsProduct Notes comes here
|
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Adtype Support:
1) Native (Custom native contentstream, custom native infeed, custom native ad)
To implement the expand and collapse feature in your desired container, tag the container with JioExpandCollapseAdTag.expandCollapseContainer and the button action with JioExpandCollapseAdTag.expandCollapseBtn.
The following callback is sent to the app, where the app side needs to show or hide the expand/collapse container.
func onAdExpandCollapseContainer(adView: JioAdView, expandCollapse: ExpandCollapse) {
AppLogs("\(TAG) onAdExpandCollapseContainer | expandCollapseState: \(expandCollapse == .collapse ? "collapse" : "Expanded")")
expandCollapseContainer.isHidden = expandCollapse == .collapse
// if App use StackView, then above line is suffice and if not appside need to take care of height constraint
}-jio-style-title
Parameter Details
-jio-tables
| # | Parameter Name | Description |
|---|---|---|
| 1 | expandCollapse | It is an Enum with expand, collapse values. |
-jio-style-title
¶ Sample reference code for Native Expand / Collapse ads
class CustomNativeView: UIView {
@IBOutlet weak var contentView: UIView?
@IBOutlet weak var imageViewIcon: UIImageView?
@IBOutlet weak var mediaView: UIView?
@IBOutlet weak var labelTitle: UILabel?
@IBOutlet weak var labelDesc: UILabel?
@IBOutlet weak var buttonCTA: UIButton?
@IBOutlet weak var customImageview: UIImageView?
@IBOutlet weak var carouselContainer: UIView!
@IBOutlet weak var stackViewMediaViewCarousel: UIStackView!
@IBOutlet weak var btnExpandCollapseContainer: UIButton!
override init(frame: CGRect) {
super.init(frame: frame)
setUpNib()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setUpNib()
}
func setUpNib() {
let bundle = Bundle(for: type(of: self)).path(forResource: "CustomNativeView", ofType: "nib")
guard bundle != nil else {
SDKLog("Bundle is nil")
return
}
Bundle(for: type(of: self)).loadNibNamed("CustomNativeView", owner: self, options: nil)
guard let contentView = contentView else {
SDKLog("contentView is nil")
return
}
addSubview(contentView)
addSubViewWithFullConstraintSame(parentView: self, childView: contentView)
imageViewIcon?.tag = NativeAdTags.iconImageView.rawValue
mediaView?.tag = NativeAdTags.mediaView.rawValue
labelTitle?.tag = NativeAdTags.title.rawValue
labelDesc?.tag = NativeAdTags.desc.rawValue
buttonCTA?.tag = NativeAdTags.ctaButton.rawValue
customImageview?.tag = NativeAdTags.customImageView.rawValue
self.carouselContainer.tag = CarouselAdTags.carouselContainer.rawValue
imageViewIcon?.contentMode = .scaleAspectFill
stackViewMediaViewCarousel.tag = JioExpandCollapseAdTag.expandCollapseContainer.rawValue
btnExpandCollapseContainer.tag = JioExpandCollapseAdTag.expandCollapseBtn.rawValue
btnExpandCollapseContainer.setTitle("", for: .normal)
}
}-jio-end-block-type-2