Быстрый старт

Минимальная интеграция за пять шагов. Полные примеры и детали — на страницах Android, Android TV, iOS и браузера.

Подготовьте ссылку на VAST

Возьмите VAST-тег у рекламной системы. Для проверки подойдёт демо-тег из песочницы. Если параметр передаётся в адресе страницы, закодируйте его через encodeURIComponent.

Откройте 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))

Браузер

<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>

Дождитесь AdLoaded

SDK загружает VAST и сообщает, что реклама готова. В приложении вместе с событием приходит адрес видеофайла.

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)

Браузер

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,
});

Сообщайте SDK о воспроизведении только приложения

Когда плеер начал играть, вызовите playAd(). Пока ролик идёт — timeupdateAd() со временем в секундах. В конце ролика — timeupdateAd(duration, duration).

Android

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

js("playAd()")                                    // плеер начал играть
js("timeupdateAd($positionSec, $durationSec)")    // каждые 250 мс
js("timeupdateAd($durationSec, $durationSec)")    // ролик закончился

iOS

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

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

В браузере шаг не нужен: SDK проигрывает видео сам.

Закройте рекламу

После AdDestroyed со значением ad_is_last = true или после AdError верните пользователя к контенту: закройте WebView или вызовите controller.destroy() в браузере.

Проверьте себя

• ☐ Фон WebView прозрачный, ролик виден под кнопками SDK.
• ☐ AdLoaded приходит, плеер получает адрес видеофайла.
• ☐ После playAd() приходит AdStarted.
• ☐ Квартили приходят по мере воспроизведения — значит, timeupdateAd() вызывается.
• ☐ После окончания ролика приходят AdComplete и AdDestroyed.
• ☐ AdError закрывает рекламу и возвращает к контенту.

Песочница

Весь сценарий можно пройти в песочнице: она показывает события в том же виде, в каком их получит ваше приложение, и формирует адрес страницы SDK.