Возможно, вы захотите связать свои рекламные места в формате HTML на странице с рекламными местами для видео или наложения. Эти отношения между связанными рекламными местами называются отношениями «главный-компаньон» .
Помимо запроса видеообъявлений и наложенных мастер-объявлений, вы можете использовать IMA SDK для отображения сопутствующих HTML-объявлений. Эти объявления отображаются в среде HTML.
Используйте сопутствующие объявления
Чтобы использовать сопутствующие объявления, выполните следующие действия:
1. Закажите сопутствующие объявления
Сначала вам необходимо забронировать сопутствующие объявления, которые вы хотите показывать вместе с основными объявлениями. Сопутствующие объявления можно размещать в Менеджере рекламы . В одном главном объявлении можно показывать до шести сопутствующих объявлений. Этот метод, когда один покупатель контролирует всю рекламу на странице, также известен как Roadblocking .
2. Запросите сопутствующие объявления
По умолчанию сопутствующие объявления включаются для каждого запроса объявления.
3. Показ сопутствующих объявлений
Существует два способа отображения сопутствующих объявлений:
- Автоматическое использование тега издателя Google (GPT)
Если вы используете GPT для реализации сопутствующих объявлений, они отображаются автоматически, если на HTML-странице объявлены места для сопутствующих объявлений и эти объявления зарегистрированы с помощью API (т. е. идентификатор div в JavaScript и HTML должен соответствовать). Некоторые преимущества использования GPT:- Осведомленность о сопутствующем слоте
- Заполнение сопутствующих объявлений из сети издателя, если ответ VAST содержит меньше сопутствующих объявлений, чем определено на HTML-странице.
- Автозаполнение сопутствующего баннера, если видеообъявление отсутствует
- Предварительно загруженные рекламные места для сопутствующих объявлений для видеоплееров, воспроизводимых по клику
- Автоматизированный рендеринг сопутствующих материалов, включая
HTMLResourceиiFrameResource
- Вручную с помощью Ad API .
Используйте сопутствующие объявления с тегом издателя Google.
Тег издателя Google (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 вам необходимо добавить на HTML-страницу немного кода JavaScript и объявить рекламные места для сопутствующих объявлений.
Примечание. В каждом из следующих примеров обязательно укажите действительную network и unit-path в вызове метода googletag.defineSlot (расположенном в теге <head> или <body>, в зависимости от конкретного примера, который вы используете).
- Пример 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>
Попробуйте это
Вы можете увидеть следующий код для рабочей реализации.
Пример 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. Предварительно загруженные рекламные места
В некоторых случаях вам может потребоваться отобразить что-то в рекламном месте перед запросом сопутствующего объявления. Сопутствующие объявления обычно запрашиваются вместе с видеообъявлением. Этот запрос может произойти после загрузки страницы. Например, сопутствующее объявление может загружаться только после того, как пользователь нажмет на видео, воспроизводимое по клику. В таком случае вам нужна возможность запросить обычное объявление, чтобы заполнить рекламное место до того, как будет запрошено сопутствующее объявление. Чтобы поддержать этот вариант использования, вы можете отображать стандартные веб-объявления в сопутствующем рекламном месте. Убедитесь, что веб-объявления ориентированы на сопутствующие рекламные места. Вы можете настроить таргетинг на сопутствующие рекламные места так же, как и на стандартные рекламные места.
Примечание. Следующий пример кода точно такой же, как в примере 1, за исключением раздела, выделенного жирным шрифтом. В этом случае вы указываете рекламную сеть и путь к блоку объявления с предварительной загрузкой вместо блока видеорекламы.
Вот пример только что описанной реализации:
<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>
Попробуйте это
Вы можете увидеть следующую ручку кода для рабочей реализации.
Используйте сопутствующие объявления с помощью Ad API
В этом разделе описывается, как отображать сопутствующие объявления с помощью Ad API.
Показ сопутствующих объявлений
Чтобы отображать сопутствующие рекламные объявления, сначала получите ссылку на объект Ad через любое из событий AdEvent , отправленных из AdsManager . Мы рекомендуем использовать событие AdEvent.STARTED , поскольку показ сопутствующих объявлений должен совпадать с показом основного объявления.
Затем используйте этот объект Ad для вызова getCompanionAds() , чтобы получить массив объектов CompanionAd . Здесь у вас есть возможность указать CompanionAdSelectionSettings , что позволяет вам устанавливать фильтры для сопутствующих объявлений по типу креатива, проценту наиболее подходящего, типу ресурса и критериям размера. Дополнительную информацию об этих настройках см. в документации по API HTML5 .
Объекты 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 размера сопутствующего баннера в Менеджере рекламы. На следующем изображении показано, где установить это значение.
Жидкие компаньоны GPT
При использовании сопутствующих объявлений 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>
Гибкие сопутствующие объявления API объявлений
При использовании Ad API для сопутствующих объявлений вы можете объявить гибкое место для сопутствующих объявлений, обновив google.ima.CompanionAdSelectionSettings.sizeCriteria до значения SELECT_FLUID .
<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>