-jio-start-block-type-3
¶ Companion Ads-jio-style-title ¶ IntroductionJioAds SDK provides facility to implement Companion ad experience which are addditional display or rich media ads that appear alongside or around an instream video/audio ad while it is playing. |
 |
Complete GETTING STARTED section and INITIALIZE SDK section before starting this section.
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Instream Video Companion Ad
Use existing JioAdView Object (Instream Video) to set companions. Multiple companions can be shown.
var comps: [JioAdCompanion] = []
let companionFirst = JioAdCompanion(companionContainer: companionAdContainerOne,
adslotId: adSlotId1,
size: DynamicDisplaySize.size300x50)
comps.append(companionFirst)
let companionTwo = JioAdCompanion(companionContainer: companionAdContainerTwo,
adslotId: adSlotId2,
size: DynamicDisplaySize.size300x50)
comps.append(companionTwo)
jioAdView?.setCompanions(companions: comps, delegate: self)
// Companion Adview Protocol
extension InstreamAdTypeViewController: JioCompanionAdviewProtocol {
func onCompanionAdFailedToLoad(companionAdView: JioAdsFramework.JioAdCompanion?, error: JioAdsFramework.JioAdError) {
AppLogs("\(TAG) onCompanionAdFailedToLoad")
DispatchQueue.main.async {
companionAdView?.container?.isHidden = true
}
}
func onCompanionAdClosed(companionAdView: JioAdsFramework.JioAdCompanion?) {
AppLogs("\(TAG) onCompanionAdClosed")
DispatchQueue.main.async {
companionAdView?.container?.isHidden = true
}
}
func onCompanionAdRender(companionAdView: JioAdsFramework.JioAdCompanion?) {
AppLogs("\(TAG) onCompanionAdRender")
DispatchQueue.main.async {
companionAdView?.container?.isHidden = false
}
}
func onCompanionAdChange(companionAdView: JioAdsFramework.JioAdCompanion?) {
AppLogs("\(TAG) onCompanionAdChange")
}
}
-jio-style-title
¶ Instream Audio Companion Ad Setup
val audioCompanionAdContainer = findViewById<FrameLayout>(R.id.companionAdContainer)
// Providing a container to companion ads to show.
jioAdViewInstreamAudio.setAudioCompanionContainer(audioCompanionAdContainer,
<COMPANION_AD_SIZE>,
DEFAULT_PORTRAIT_IMAGE,
DEFAULT_LANDSCAPE_IMAGE)-jio-end-block-type-2
-jio-start-block-type-3
¶ Native Companion Ads
¶ Introduction
JioAds SDK now supports carousel-based companion ads for instream video ads. This new format extends the existing companion ad capabilities to native main image and carousels by allowing advertisers to showcase multiple cards in a scrollable carousel format alongside video content.
Native Companion Ad Format Priority
1. Native + Carousel cards (highest)
2. Native + Main Image
Features
- Carousel companion ads display below instream video
- Support for 1-10 scrollable cards
- Supports dynamic aspect ratios, including 1:1, 3:4, 16:9, and 9:16
- Expandable/collapsible functionality (publisher-defined layouts only)
- Portrait mode optimization
Optional Elements
- Title (follows native ad character limits)
- Description (follows native ad character limits)
- CTA URL (card-specific, falls back to native ad CTA)
-jio-end-block-type-3
-jio-start-block-type-2
-jio-style-title
¶ Integration Steps
The carousel depends on a companion, so you must create a JioAdCompanion() and pass it into the following API:
Step1: Use the existing JioAdView object (Instream Video) to set the companion:
jioAdView?.setCompanions(companions: comps, delegate: self)Step 2: Create and add the carousel container view to an empty container. Then, add the required elements with tags for individual functionalities, such as carousel container, mainImage, Icon, Title, Description, and CTA Button, by enabling customization as shown in the example code below.
func setCarouselNative() {
viewTopCarouselNative.addBottomShadow()
self.btnDropDownCarouselNative.imageView?.contentMode = .scaleAspectFill
self.imgIconCarouselNative.contentMode = .scaleAspectFill
self.lblTitleCarouselNative.tag = NativeAdTags.title.rawValue
self.lblDescCarouselNative.tag = NativeAdTags.desc.rawValue
self.imgIconCarouselNative.tag = NativeAdTags.iconImageView.rawValue
self.btnCtaCarouselNative.tag = NativeAdTags.ctaButton.rawValue
self.imgMainImageCarouselNative.tag = NativeAdTags.mainImageView.rawValue
if self.publisherAdViewInfo?.isCarousalEnabled ?? false {
self.viewCarouselContainer.tag = CarouselAdTags.carouselContainer.rawValue
self.viewCarouselContainer.addBottomShadow()
self.imgMainImageCarouselNative.isUserInteractionEnabled = true
self.imgMainImageCarouselNative.contentMode = .scaleAspectFit
self.btnCtaCarouselNative?.layer.cornerRadius = 4
self.btnCtaCarouselNative?.layer.masksToBounds = true
self.btnCtaCarouselNative?.titleEdgeInsets = UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2)
self.jioAdView?.setInstreamCarouselCompanionLayout(container: self.viewCarouselNative, delegate: self)
self.viewCarouselContainer.addBottomShadow()
} else {
self.viewCarouselContainer.isHidden = true
}
if self.publisherAdViewInfo?.isVerticalExpandCollapseEnabled ?? false {
self.btnDropDownCarouselNative.tag = JioExpandCollapseAdTag.expandCollapseBtn.rawValue
self.viewBottomCarouselNative.tag = JioExpandCollapseAdTag.expandCollapseContainer.rawValue
} else {
btnDropDownCarouselNative.isHidden = true
}
}
-jio-style-title
¶ JioCarousalCompanionProtocol Callbacks
func carousalCompanionStatus(event: JioCarousalCompanionEvent) {
}
-jio-style-title
¶ JioCarousalCompanionEvent
Perform the following actions based on the event received through the carousalCompanionStatus callback.
-jio-tables
| # | Events | Action |
|---|---|---|
| 1 | .adRender: | Show the native companion container. |
| 2 | .adClosed | Hide the native companion container. |
| 3 | .adFailedToLoad | Hide the native companion container. |
-jio-style-title
¶ Customizing Carousel Cell 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
¶ Expand/Collapse for Native Companion
To achieve expand/collapse feature in Native Companion Refer Expandable Ads section.
-jio-style-title
Expand/Collapse Callback
func onAdExpandCollpaseContainer(adView: JioAdView, expandCollapse: ExpandCollapse) {
AppLogs("\(TAG) onAdExpandCollpaseContainer | expandCollapaseState: \(expandCollpase == .collapse ? "collapse" : "Expanded")")
viewBottomCarouselNative.isHidden = expandCollpase == .collapse // in this code, native companion have two child view one is top and bottom, here bottom only we are expand and collapse
}-jio-style-title
Parameter Details
-jio-tables
| # | Parameter Name | Description |
|---|---|---|
| 1 | expandCollapse | It is an Enum with expand, collapse values. |
-jio-end-block-type-2