The VIS.X® SDK is an advertising technology for Android and iOS that enables publishers to extend their in-app inventories with YOC’s high-priced and innovative high-impact ad formats. The SDK is versatile and supports cross-platform frameworks such as React Native and Flutter in addition to native frameworks.

While the integration is conceivably simple, the VIS.X® SDK integration differs from common SDKs in the market in regards to formats, sizes and additional effects it can deliver besides IAB standards. Therefore we encourage developers to familiarize themselves with the unique features and technical requirements before starting the integration.

1. Technical Requirements
2. Ad Formats VIS.X® SDK is offering
3. Understanding the YOC Universal Ad Unit
4. Working with Cross-Platform Frameworks
5. Using our Code Examples
6. Houston, we have a problem!

Technical Requirements

• Minimum Android Studio 3.0 and Android 5.0 (API Level 21) for Android
• Minimum Xcode 14.3, iOS 13.0 and CocoaPods for iOS
• Working IAB TCF v2.0 certified CMP, with YOC AG (ID: 154) added as a Vendor
• App-Ads.txt entries provided by YOC are added
• At least one Remote Config ID and VIS.X® Ad Unit ID were provided to you by YOC

If you are planning to use VIS.X® in React Native, please consider the following requirements

• Minimum npm version: 8.18.0
• Minimum react-native version: 0.72.5
• Minimum VIS.X® SDK version 4.1.4 (iOS) and 4.1.3 (android)

Furthermore, you need to have BundleId, an App Store URL and the URL of your app-ads.txt shared with YOC.

Ad Formats VIS.X® SDK is offering

Like most ads SDK, VIS.X® SDK will deliver IAB standards display advertising, such as medium rectangle (300x250), mobile leaderboards (320x50) and interstitial ads. Additionally, for inline display ad placements, the following formats might be available, based on position and integration model.

• YOC Inline Video Ad (Outstream Video)
• YOC Understitial Ad® (Fullscreen ad underneath the content)
• YOC Mystery Scroller® (Sticky ad on the bottom of the screen)
• YOC Branded Takeover (Combination of YOC Understitial Ad® and YOC Mystery Scroller®)

Understanding the YOC Universal Ad Unit

The YOC Universal Ad Unit enables all previously mentioned inline formats within the same single ad placement of your app. Therefore, it may change its size and control additional effects dynamically after the creative is rendered. For the YOC Universal Ad Unit to work, the following conditions must be ensured by the app:

• The YOC Universal Ad Unit is embedded within scrollable content, such as ScrollView, RecyclerView, TableView, CollectionView et al as its parent
• The AdContainer (the View you render the AdView into) must span 100% of the width of the content from the start, e.g. by using match_parent or similar constraints
• The AdContainer should be flexible in height using auto layouts such as match_content, or listen to size change events from the SDK and manually adjust the size
• Provide a reference of the scrollable parent to the AdView, or provide its position and size
• Optional: Allow the AdView to register to scroll changes

It’s important to understand that the final size and format are unknown until the AdView has been added to the ViewHierachy and the HTML creative can start rendering. After the rendering of the creative is completed, it will calculate its proportionally scaled height, based on the maximum width of the AdContainer and communicate the final size and additional effects towards VIS.X® SDK. Depending on the integration, the SDK will either automatically adjust the AdContainer size, or communicate required size changes through Callbacks / Delegates / Events toward the Activity / ViewController. Additional size changes can also occur later, e.g. when a creative is collapsing/hiding and the adContainer can be closed to avoid blank spaces.

Working with Cross-Platform Frameworks

The VIS.X® SDK heavily utilizes Android / iOS platform features and is designed to run best in native environments. Nonetheless, the VIS.X® SDK has also proven to work efficiently in React Native and Flutter and with each release, we will aim for compatibility. We have released a dedicated React Native Module.

If you want to work with the VIS.X® SDK on your own, you may implement additional event channels between the React Native / Flutter part of the app and the native AdView of the VIS.X® SDK, to manually provide position and scroll data towards SDK and to communicate callbacks/delegates such as size changes from the SDK to the app properly.

Using our Code Examples

Before you start the integration, we want to encourage you to check out our public example app repository on git. It contains a set of runnable apps demonstrating the proper integration of the YOC Universal Ad Unit on different platforms. You can also use these apps to familiarize yourself with the different ad formats and the overall life cycle process.

Houston, we have a problem!

While the VIS.X® SDK is built to be implemented in as many apps as possible most easily, we know that no two apps are the same. If you experience any struggle during the integration process, please openly address it to your person of contact with YOC and we will arrange a short (video) call with our service or development teams, to find a working solution together. You have a smooth integration process is of utmost importance to us.