Возможно, вам захочется связать встроенные HTML-рекламные блоки с видеорекламой или наложенными рекламными блоками. Такая взаимосвязь между связанными рекламными блоками называется отношением «главный-дополнительный» .
Помимо запроса видео и наложенных рекламных блоков, вы можете использовать SDK IMA для отображения сопутствующих HTML-рекламных объявлений. Эти объявления отображаются в HTML-среде.
Используйте сопутствующую рекламу
Для использования сопутствующей рекламы выполните следующие действия:
1. Забронируйте рекламу с участием компаньона.
Сначала необходимо забронировать дополнительные объявления, которые вы хотите показывать вместе с основными объявлениями. Размещение дополнительных объявлений возможно в Ad Manager . На одно основное объявление можно показывать до шести дополнительных объявлений. Этот метод, когда один покупатель контролирует все объявления на странице, также известен как блокировка .
2. Запросите сопутствующую рекламу.
По умолчанию сопутствующая реклама включается для каждого запроса на показ рекламы.
3. Отображение сопутствующей рекламы
Существует два способа отображения сопутствующей рекламы:
Автоматическое использование тега Google Publisher Tag (GPT) .
Если вы используете GPT для размещения сопутствующей рекламы, она будет отображаться автоматически, если на HTML-странице есть соответствующие рекламные места, и эта реклама зарегистрирована в API (то есть, идентификаторы div в JavaScript и HTML должны совпадать). Некоторые преимущества использования GPT:
- Осведомленность о слотах для компаньонов.
- Если в ответе VAST содержится меньше сопутствующих объявлений, чем задано мест на HTML-странице, может потребоваться заполнение данных из сети издателя.
- Функция автозаполнения, если видеореклама отсутствует.
- Предварительно загруженные рекламные блоки для видеоплееров с функцией воспроизведения по клику.
- Автоматизированная отрисовка сопутствующих элементов, включая
HTMLResourceиiFrameResource.
Использование Ad API вручную .
Используйте сопутствующие объявления с помощью тега Google Publisher Tag.
Тег Google Publisher Tag (GPT) автоматизирует отображение сопутствующих HTML-объявлений на вашем сайте. Мы рекомендуем большинству издателей использовать GPT. HTML5 SDK распознает слоты GPT, если GPT загружен на главной веб-странице (а не в IFrame). Более подробную информацию об использовании GPT с IMA SDK можно найти в документации GPT .
Если вы размещаете HTML5 SDK внутри IFrame
Если вы соответствуете обоим следующим критериям, вам необходимо добавить дополнительный прокси-скрипт, чтобы ваши GPT-компаньоны отображались корректно:
- Загрузите HTML5 SDK в IFrame.
- Загрузите GPT на главную веб-страницу (вне IFrame).
Чтобы ваши компаньоны отображались в этом сценарии, необходимо загрузить скрипт прокси GPT до загрузки SDK:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
Важные моменты, которые следует учитывать:
- Внутри IFrame, загружающего SDK, не должно быть загружено GPT.
- GPT должен загружаться в верхней части страницы, а не в другом Iframe.
- Прокси-скрипт должен загружаться в том же фрейме, что и GPT (то есть на главной странице).
Объявление рекламных мест-компаньонов в HTML
В этом разделе объясняется, как объявлять сопутствующие рекламные объявления в HTML с использованием GPT, и приводятся примеры кода для различных сценариев. Для HTML5 SDK вам необходимо добавить немного JavaScript на вашу HTML-страницу и объявить места для сопутствующих рекламных объявлений.
- Пример 1: Базовая реализация рекламного блока
- Пример 2: Реализация динамического рекламного блока
- Пример 3: Предварительно загруженные рекламные блоки
Пример 1: Базовая реализация рекламного блока
Следующий пример кода показывает, как включить файл gpt.js в вашу HTML-страницу и объявить рекламный слот. Объявленный рекламный слот имеет размер 728x90 пикселей. GPT пытается заполнить слот любыми сопутствующими объявлениями, возвращенными в ответе VAST, которые соответствуют этому размеру. После объявления рекламных слотов функция googletag.display() может отображать их везде, где она вызывается на странице. Поскольку слоты являются сопутствующими, объявления не отображаются сразу. Вместо этого они появляются рядом с основным видеообъявлением.
Вот пример реализации:
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() { googletag.display('companionDiv'); });
</script>
</div>
<body>
</html>
Попробуйте!
Рабочий пример можно посмотреть на следующем Codepen.
Пример 2: Реализация динамического рекламного блока
Иногда количество рекламных мест на странице может быть неизвестно до момента отрисовки её содержимого. Приведённый ниже пример кода показывает, как определить рекламные места во время отрисовки страницы. Этот пример идентичен примеру 1 , за исключением того, что он регистрирует рекламные места там, где они фактически отображаются.
<html>
<head>
<!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
<!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<!-- HEAD part -->
<!-- Initialize the tagging library -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- BODY part -->
<!-- Declare a div where you want the companion to appear. Use
googletag.display() to make sure the ad is displayed. -->
<div id="companionDiv" style="width:728px; height:90px;">
<script>
// Using the command queue to enable asynchronous loading.
// The unit does not actually display now - it displays when
// the video player is displaying the ads.
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.display('companionDiv');
});
</script>
</div>
<body>
</html>
Попробуйте!
Ниже представлен рабочий пример кода.
Пример 3: Предварительно загруженные рекламные блоки
В некоторых случаях может потребоваться отобразить что-либо в рекламном блоке до того, как будет запрошена сопутствующая реклама. Сопутствующая реклама обычно запрашивается вместе с видеорекламой. Этот запрос может произойти после загрузки страницы. Например, сопутствующая реклама может загрузиться только после того, как пользователь кликнет на видео, доступное для воспроизведения. В таком случае вам необходима возможность запросить обычную рекламу для заполнения рекламного блока до того, как будет запрошена сопутствующая реклама. Для поддержки этого сценария вы можете отображать стандартную веб-рекламу в сопутствующем блоке. Убедитесь, что веб-реклама нацелена на сопутствующие блоки. Вы можете нацеливать сопутствующие блоки так же, как и стандартные рекламные блоки веб-рекламы.
Вот пример только что описанной реализации:
<html>
<head>
...
<!-- Register your companion slots -->
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
// Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
</head>
...
</html>
Попробуйте!
Ниже вы можете посмотреть работающую реализацию на CodePen.
Используйте сопутствующие объявления с помощью Ad API.
В этом разделе описывается, как отображать сопутствующие объявления с помощью Ad API.
Показать сопутствующие объявления
Для отображения сопутствующих объявлений сначала получите ссылку на объект Ad через любое из событий AdEvent , отправляемых из AdsManager . Мы рекомендуем использовать событие AdEvent.STARTED , поскольку отображение сопутствующих объявлений должно совпадать с отображением основного объявления.
Далее, используя этот объект Ad , вызовите метод getCompanionAds() , чтобы получить массив объектов CompanionAd . Здесь у вас есть возможность указать CompanionAdSelectionSettings , который позволяет устанавливать фильтры для сопутствующих объявлений по типу креатива, проценту соответствия, типу ресурса и размеру. Для получения дополнительной информации об этих настройках см. документацию по API IMA CompanionAdSelectionSettings .
Теперь объекты CompanionAd , возвращаемые функцией getCompanionAds можно использовать для отображения сопутствующих объявлений на странице, следуя этим рекомендациям:
- Создайте на странице рекламный блок
<div>необходимого размера. - В обработчике события
STARTEDполучите объектAd, вызвав методgetAd(). - Используйте
getCompanionAds(), чтобы получить список сопутствующих объявлений, которые соответствуют как размеру рекламного места, так иCompanionAdSelectionSettings, и имеют тот же порядковый номер, что и основной креатив. Креативы с отсутствующим атрибутом последовательности рассматриваются как имеющие порядковый номер 0. - Получите контент из экземпляра
CompanionAdи установите его в качестве внутреннего HTML-кода для элемента<div>этого рекламного блока.
Пример кода
<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>
<script>
// Listen to the STARTED event.
adsManager.addEventListener(
google.ima.AdEvent.Type.STARTED,
onAdEvent);
function onAdEvent(adEvent) {
switch (adEvent.type) {
case google.ima.AdEvent.Type.STARTED:
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
var companionAd = companionAds[0];
// Get HTML content from the companion ad.
var content = companionAd.getContent();
// Write the content to the companion ad slot.
var div = document.getElementById('companion-ad-300-250');
div.innerHTML = content;
break;
}
}
</script>
Отображение сопутствующих рекламных объявлений
Теперь IMA поддерживает адаптивные рекламные объявления-компаньоны. Эти объявления-компаньоны могут изменять свой размер в соответствии с размером рекламного блока. Они занимают 100% ширины родительского div, а затем изменяют свою высоту, чтобы соответствовать содержимому рекламного блока. Размеры задаются с помощью параметра «Размер Fluid объявления-компаньона» в Ad Manager. См. изображение ниже, где можно задать это значение.
Жидкостные компаньоны ГПТ
При использовании компаньонов GPT вы можете объявить слот для компаньона, изменяя второй параметр метода defineSlot() .
<!-- Register your companion slots -->
<script>
googletag.cmd.push(function() {
// Supply YOUR_NETWORK and YOUR_UNIT_PATH.
googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
.addService(googletag.companionAds())
.addService(googletag.pubads());
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});
</script>
Ad API жидкие компаньоны
При использовании Ad API для сопутствующих объявлений вы можете объявить гибкий слот для сопутствующих объявлений, обновив значение SELECT_FLUID в параметре google.ima.CompanionAdSelectionSettings.SizeCriteria .
<script>
...
// Get the ad from the event.
var ad = adEvent.getAd();
var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
// Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
// Note: Companion width and height are irrelevant when fluid size is used.
var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
var companionAd = companionAds[0];
...
}
}
</script>