Открывать файл прямо на компьютере
В руководстве по IMA сказано, что страницу нужно отдавать через веб-сервер, даже локальный. Если открыть HTML-файл напрямую, тест может не пройти.
Руководство по внедрению
Pre-roll video ads
Видеореклама, которая воспроизводится в плеере перед видео, выбранным для просмотра.
Понять за 1 минуту
Помните, как в кино перед началом фильма показывают трейлеры и рекламу? Видео pre-roll работает так же, только на вашем сайте. Человек нажимает «Воспроизвести», и перед появлением контента в том же плеере идёт реклама. Плеер, это окно, в котором показывается видео, с кнопками воспроизведения, паузы и громкости. Когда реклама заканчивается, начинается выбранное видео.
Чтобы это работало, плеер должен уметь запрашивать рекламу. Google предлагает набор кода IMA SDK, который подключается вместе с плеером. Он отправляет запрос в Ad Manager с помощью рекламного тега, то есть интернет-адреса с данными о рекламном месте, например о рекламном блоке и размере плеера. Ответ приходит в формате VAST, стандартном формате, похожем на рецепт: он говорит, какое видео показать и как считать просмотры. Если на сайте используются правила видеорекламы, ответ может прийти в формате VMAP. Это как телевизионная сетка вещания: она указывает, когда начинается каждый рекламный блок.
Google также поясняет важный момент про автоматический запуск видео, так называемый автовоспроизведение. У браузеров, таких как Chrome и Safari, есть собственные правила, и часто видео может запускаться само только без звука. Простого способа узнать, разрешит ли это браузер, нет: единственный вариант, попробовать воспроизвести. Поэтому в руководстве по IMA сказано, что на телефоне контейнер рекламы нужно запускать по действию человека, например по нажатию кнопки воспроизведения. А если плеер будет запускаться сам или без звука, он должен указать это в запросе, чтобы приходила только та реклама, которая может так воспроизводиться.
Pre-roll оправдан, когда видео является причиной визита, например урок, рецепт или видеоновость. В видеополитике Google это место называется In-stream, то есть внутри контента, который человек выбрал смотреть, и его нужно объявлять правильно. Всегда помните: человек пришел за видео, поэтому реклама не должна мешать элементам управления и блокировать контент.
Пошаговая инструкция
Пример внедрения
<!-- 1. Carrega o IMA SDK (antes do seu código) -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- 2. O vídeo e, por cima dele, a caixa do anúncio -->
<div style="position:relative;width:640px;height:360px">
<video id="conteudo" width="640" height="360" playsinline controls>
<source src="meu-video.mp4" type="video/mp4">
</video>
<div id="adContainer" style="position:absolute;top:0;left:0"></div>
</div>
<button id="playButton">Assistir</button>
<script>
var video = document.getElementById('conteudo');
var adDisplayContainer = new google.ima.AdDisplayContainer(
document.getElementById('adContainer'), video);
var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
var adsManager;
adsLoader.addEventListener(
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
function (e) {
adsManager = e.getAdsManager(video);
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
function () { video.pause(); });
adsManager.addEventListener(
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
function () { video.play(); });
adsManager.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
});
adsLoader.addEventListener(
google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
function onAdError(e) {
console.log(e.getError());
if (adsManager) { adsManager.destroy(); }
video.play(); // sem anúncio, o vídeo continua
}
// 3. Pedido do anúncio (IDs de exemplo)
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
'iu=/1234567/exemplo&sz=640x480&env=vp&gdfp_req=1&output=vast' +
'&unviewed_position_start=1&vpa=click&vpmute=0&plcmt=1' +
'&description_url=https%3A%2F%2Fwww.exemplo.com%2Fvideo&correlator=';
adsRequest.linearAdSlotWidth = 640;
adsRequest.linearAdSlotHeight = 400;
adsLoader.requestAds(adsRequest);
// 4. Só começa quando a pessoa clica em Assistir
document.getElementById('playButton').addEventListener('click', function () {
adDisplayContainer.initialize();
try {
adsManager.init(640, 360, google.ima.ViewMode.NORMAL);
adsManager.start();
} catch (err) {
video.play();
}
});
</script>Что рекомендует Google
Советы
Осторожно
В руководстве по IMA сказано, что страницу нужно отдавать через веб-сервер, даже локальный. Если открыть HTML-файл напрямую, тест может не пройти.
На телефоне контейнер рекламы нужно запускать по действию человека, например по нажатию на кнопку воспроизведения. Без этого реклама может не воспроизвестись.
Некорректный ответ VAST может вызвать ошибку. В примере Google менеджер рекламы уничтожается и запускается видео, чтобы человек не застрял на неподвижном экране.
Когда размер окна меняется, пример Google вызывает изменение размера AdsManager по размеру видео. Без этого реклама может получиться неправильного размера.
Нет. Плеер может запросить тег VAST через IMA. Google говорит, что параметр правил рекламы (ad_rule) не обязателен для показа рекламы, а нужен только для использования правил видеорекламы.
VAST, это ответ, который сообщает, какую рекламу показать. VMAP, это ответ для правил рекламы, в котором указано, когда начинаются рекламные блоки. Формат выбирается в теге параметром output, например со значениями vast и vmap.
Может, если браузер это разрешает. Chrome и Safari ограничивают автовоспроизведение, особенно со звуком. Плеер должен проверить это, указать в запросе, что запустится сам и без звука, а на телефоне начинать рекламу по действию человека.
Руководство Google требует, чтобы видео продолжало играть, когда реклама не загружается. В примере менеджер рекламы уничтожается, и видео играет без рекламы.
Библиотека
Всё на этой странице основано на официальной документации Google. Читайте прямо в источнике:
Аудит читает сайт как посетитель, ничего не нажимая, и показывает, что исправить.