Из этой статьи вы узнаете, как показывать межстраничные объявления в играх, созданных по технологии HTML5 (играх H5), используя библиотеку Google Publisher Tag (GPT). Также вы сможете ознакомиться с примерами кода. Межстраничные объявления этого типа, управляемые тегом GPT, раскрываются на весь экран, когда пользователь совершает активирующее их действие в игре на сайте.
Для показа в играх межстраничных объявлений и взаимодействия с ними используются следующие события GPT:
| Событие | Условия активации |
|---|---|
|
|
Рекламное место в игре готово выполнить показ. Чтобы начать показ объявления, вызовите функцию |
|
|
Рекламное место для межстраничных объявлений, ранее выполнявшее показ в игре, было закрыто. Алгоритм игры может продолжить работу. |
Межстраничные объявления могут занимать весь экран устройства или только окно игры (в зависимости от того, как она выглядит). Подробнее о типах рекламы в играх H5…
В образце кода ниже предполагается, что игра Н5 располагается в том же окне верхнего уровня на экране, что и страница (используется полноэкранный режим). В таком случае межстраничное объявление также займет весь экран.
Но тот же код будет работать и для окна на уровне ниже (тип объявления в окне iframe/WebView). Чтобы объявление ограничивалось игровым полем, игру нужно поместить в окно iframe.
Пример
<!DOCTYPE html>
<html>
<head>
<!-- В этом примере тег Google Publisher Tag, если он есть, отвечает только за показ объявлений вне игры Н5. -->
<title>Страница с примером игры Н5</title>
<!-- Ваш код блока head. -->
</head>
<body>
<span id="example-text">Пример игры Н5</span>
<iframe src="https://www.example-game.com" title="Пример игры" allow="autoplay">
<!-- Пример кода. Тег Google Publisher Tag, загруженный в этот фрейм, используется только в рамках игры Н5.-->
</iframe>
</body>
</html>
Замечания по использованию
- Для большего удобства пользователей тег GPT запрашивает межстраничные объявления для игр только на страницах, которые поддерживают такой формат рекламы. По этой причине функция
defineOutOfPageSlot()может вернуть пустое значение. Запрашивайте межстраничные объявления для игр только на тех страницах и платформах, на которых вы хотите их показывать. Реклама этого формата может отображаться на компьютерах, планшетах и мобильных устройствах. - Межстраничное объявление появляется, когда вы вызываете функцию
makeGameManualInterstitialVisibleиз событияGameManualInterstitialSlotReady. - У межстраничных объявлений для игр есть ограничения по частоте показа, из-за чего событие
gameManualInterstitialSlotReadyможет активироваться не чаще чем через каждые 120 секунд.
Требования и рекомендации
- Издателям запрещено размещать межстраничные объявления для игр H5 на неигровом инвентаре. Начиная работу с этим форматом, издатели гарантируют соблюдение вышеизложенного условия, а также правил Google для издателей и правил для партнеров, использующих Google Менеджер рекламы.
- Google оставляет за собой право одобрять или отклонять издателей в любое время и может исключать нарушающих правила издателей из белого списка.
- Межстраничные объявления в играх создают собственные рекламные места. В отличие от других типов рекламы для таких объявлений не обязательно определять тег <div>. Для них система автоматически создает контейнер и вставляет его на страницу, на которой будут показываться эти объявления.
- Если на странице с несколькими рекламными местами используется режим единого запроса, не вызывайте функцию
display()до тех пор, пока для этих мест не будут созданы элементы div. Как сказано в рекомендациях по созданию рекламных объявлений, первый вызов функцииdisplay()отправляет запрос каждому существующему рекламному месту. И хотя места для создаваемых вручную межстраничных объявлений в играх не требуют наличия элемента <div>, статическим рекламным местам он нужен. Вызов функцииdisplay()до того, как эти элементы появятся на странице, может снизить качество сигнала. Поэтому мы рекомендуем вызывать функцию только после определения статических рекламных мест. - Для размещения межстраничных объявлений, создаваемых вручную, требуются те же настройки рекламного блока и позиции, что и для стандартных межстраничных объявлений на сайте.
Начало работы
- Добавьте теги:
- Создайте рекламное место для тега GPT, вызвав функцию
googletag.defineOutOfPageSlot(), и присвойте пространству именgoogletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIALзначение OutOfPage Format.
Необходимую информацию вы найдете в статье из руководства по тегу GPT, которая посвящена показу межстраничных объявлений в играх H5. - Создав рекламное место, добавьте прослушиватель событий, ожидающий событие
gameManualInterstitialSlotReady. В обратном вызове прослушивателя событий вызовите методmakeGameManualInterstitialVisible()для объекта события, чтобы было показано объявление. - Когда вы объявите все прочие статические рекламные места, вызов
googletag.displayбудет активировать запрос на заполнение межстраничного рекламного места.
- Создайте рекламное место для тега GPT, вызвав функцию
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Пример межстраничного объявления в игре</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Определяет рекламное место для межстраничного объявления.
defineGameManualInterstitialSlot();
// Определяет статические рекламные места.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Включает РЕЗ и службы.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Возвращает пустое значение, если страница или устройство не поддерживает межстраничные объявления.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Ожидание готовности межстраничного объявления…');
// Добавляет прослушиватель событий для обработки кликов после загрузки межстраничного объявления.
// Если это событие не активируется, очистите локальное хранилище и обновите
// страницу.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Межстраничное объявление готово.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Межстраничное объявление активно.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Места для межстраничных объявлений можно использовать только один раз, поэтому уничтожьте использованный слот и создайте новый.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Эта страница не поддерживает межстраничные объявления для игр, создаваемые вручную.</span>
<p>
<button id="trigger">АКТИВИРОВАТЬ ОБЪЯВЛЕНИЕ</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Помните, что первый раз функцию вызвать можно только после того, как для статического рекламного места
// будут определены элементы div.
googletag.display(staticSlot);
});
</script>
</body>
</html>
Размещение объявлений
- Создайте новый рекламный блок или используйте имеющийся. В качестве размера выберите 320x480, 300x250 или 336x280.
- Создайте позиции. Выберите нужные вам настройки позиций:
| Настройки позиций | ||||
|---|---|---|---|---|
| Пример использования | Тип объявления | Тип позиции | Ожидаемые креативы | Таргетинг > Инвентарь |
| Показ медийных объявлений с резервированием | Медийное |
|
320x480, 300x250 или 336x280 |
Рекламный блок, который вы создали или выбрали на предыдущем шаге |
| Показ объявлений без резервирования | Медийное |
|
||
| Показ видеообъявлений с резервированием (например, с использованием тега VAST или MP4) | Видео- или аудиореклама |
|
300x250v или 320x480v | |
| Показ объявлений для заполнения или объявлений с открытого аукциона | Медийное | Ad Exchange | Все размеры в запросе | |
