Quick start

A minimal integration in five steps. For full examples and details, see the Android, Android TV, iOS, and browser pages.

Prepare the VAST link

Get a VAST tag from your ad system. For testing, use the demo tag from the Playground. If you pass it in the page address, encode it with encodeURIComponent.

Open the SDK

Android

val vast = Uri.encode("https://ads.example.com/vast.xml")
val page = "https://cdn.adsdk.ru/android/v3/?url=$vast&lang=ru" +
    "&controls=" + Uri.encode("""["ad-skip-btn","ad-click-btn"]""")

webView.settings.javaScriptEnabled = true
webView.settings.mediaPlaybackRequiresUserGesture = false
webView.setBackgroundColor(Color.TRANSPARENT)
webView.addJavascriptInterface(AdEvents(), "Android")
webView.loadUrl(page)

iOS

let vast = "https://ads.example.com/vast.xml"
    .addingPercentEncoding(withAllowedCharacters: .alphanumerics)!
let page = URL(string: "https://cdn.adsdk.ru/ios/v3/?url=\(vast)&lang=ru")!

let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
config.mediaTypesRequiringUserActionForPlayback = []
config.userContentController.add(AdEventsHandler(), name: "AdEventsHandler")

let webView = WKWebView(frame: .zero, configuration: config)
webView.isOpaque = false
webView.backgroundColor = .clear
webView.load(URLRequest(url: page))

Browser

<link rel="stylesheet" href="https://cdn.adsdk.ru/web/v3/style.css" />
<script src="https://cdn.adsdk.ru/web/v3/ad-sdk.js"></script>

<div id="ad-player-slot" style="width: 640px; height: 360px"></div>

Wait for AdLoaded

The SDK loads the VAST and reports that the ad is ready. In apps, the event carries the video file's address.

Android

@JavascriptInterface
fun AdLoaded(mediaFileUrl: String) {
    mainHandler.post { adPlayer.play(mediaFileUrl) }
}

iOS

case "AdLoaded":
    let url = URL(string: body["ad_media_file_src_url"] as! String)!
    adPlayer.play(url)

Browser

const controller = await window.adSDK.init({
  refWrapper: document.getElementById('ad-player-slot'),
  lang: 'ru',
  settings: { controls: ['ad-skip-btn'] },
});

controller.loader.on('AdLoaded', () => controller.loader.playAd());
controller.loader.loadAd('https://ads.example.com/vast.xml', {
  adMediaFileWidth: -1,
  adMediaMaxDurationSec: -1,
  autoplay: false,
  controls: ['ad-skip-btn'],
  os: 'web',
  volume: 0.3,
});

Report playback to the SDK apps only

Once the player starts playing, call playAd(). While the ad plays, call timeupdateAd() with the time in seconds. At the end of the ad, call timeupdateAd(duration, duration).

Android

fun js(call: String) = webView.post {
    webView.evaluateJavascript("window.myAdController.$call", null)
}

js("playAd()")                                    // the player started playing
js("timeupdateAd($positionSec, $durationSec)")    // every 250 ms
js("timeupdateAd($durationSec, $durationSec)")    // the ad ended

iOS

func js(_ call: String) {
    webView.evaluateJavaScript("window.myAdController.\(call)")
}

js("playAd()")
js("timeupdateAd(\(position), \(duration))")
js("timeupdateAd(\(duration), \(duration))")

In the browser this step isn't needed: the SDK plays the video itself.

Close the ad

After AdDestroyed with ad_is_last = true, or after AdError, return the user to the content: close the WebView, or call controller.destroy() in the browser.

Checklist

• ☐ The WebView background is transparent, the ad is visible under the SDK buttons.
• ☐ AdLoaded arrives, the player gets the video file address.
• ☐ After playAd(), AdStarted arrives.
• ☐ Quartiles arrive as playback progresses — meaning timeupdateAd() is being called.
• ☐ After the ad ends, AdComplete and AdDestroyed arrive.
• ☐ AdError closes the ad and returns to the content.

Playground

You can walk through the whole flow in the Playground: it shows events exactly as your app will receive them, and builds the SDK page address for you.