В следующем руководстве подробно рассказывается о показе тестового объявления и представлены более базовые понятия, позволяющие максимально эффективно использовать библиотеку тегов издателя Google (GPT). К этим понятиям относятся:
- Размер объявления
- Таргетинг на ключ-значение
- Архитектура единого запроса
Загрузите библиотеку GPT
Начните с загрузки и инициализации библиотеки GPT. Добавьте следующее в <head> HTML-документа:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
При этом загружается библиотека GPT и инициализируются объекты googletag и CommandArray . Инициализация этих объектов позволяет немедленно начать использовать массив команд GPT . Добавьте следующий код JavaScript в тело пустой функции, определенной в этом фрагменте.
Определите рекламные места
После загрузки GPT вы можете определить рекламные места. В следующем примере определяются три рекламных места с разными форматами объявлений, размерами и параметрами таргетинга.
Рекламное место фиксированного размера
Вот простое рекламное место фиксированного размера:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Помимо пути, размера и идентификатора контейнера <div> , этот фрагмент также определяет ряд параметров таргетинга. Эти параметры ограничивают и дифференцируют объявления, которые могут показываться в этом месте. Узнайте больше о таргетинге на пары «ключ-значение» .
Фиксированное рекламное место
Вот якорное рекламное место, прикрепленное к нижней части области просмотра:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Слоты привязки — это тип внестраничного формата, который определяется с помощью метода defineOutOfPageSlot , а не обычного метода defineSlot . Узнайте больше о внестраничных креативах .
Внестраничные форматы часто имеют ограничения на типы страниц и устройств, на которых они могут обслуживаться. Из-за этих ограничений вы должны убедиться, что слот успешно определен, прежде чем взаимодействовать с ним. Подробную информацию см. в примере отображения фиксированного объявления .
Гибкое рекламное место
Вот гибкое рекламное место для нативного объявления:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Гибкие рекламные места не имеют фиксированного размера. Гибкие рекламные места настраиваются в соответствии с креативным содержанием объявления. Вы определяете гибкие рекламные места с помощью параметра fluid размера. Узнайте больше о размерах объявлений и доступных вариантах размеров .
Настройка параметров на уровне страницы
Некоторые параметры конфигурации GPT применяются глобально, а не к конкретным рекламным местам. Они называются настройками уровня страницы.
Вот пример настройки параметров на уровне страницы:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Этот фрагмент делает три вещи:
- Настраивает параметры таргетинга на уровне страницы , которые применяются к каждому рекламному месту на странице.
- Включает режим архитектуры единого запроса (SRA), который объединяет запросы нескольких рекламных мест в один запрос объявления. SRA повышает производительность и необходим для обеспечения соблюдения конкурентных исключений и контрольно-пропускных пунктов, поэтому мы рекомендуем всегда включать SRA. Узнайте больше о правильном использовании SRA .
- Включает службы, подключенные к нашим рекламным местам, которые позволяют отправлять запросы объявлений.
Медийная реклама
Наконец, добавьте следующий фрагмент в <body> страницы:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Здесь определяются два контейнера рекламных мест: banner-ad и native-ad . Эти значения id контейнера соответствуют значениям, которые вы указали при определении рекламных мест ранее в этом примере.
После того, как все рекламные места определены, выполняется вызов показа banner-ad . Поскольку SRA включен, этот единый вызов отображения запрашивает и отображает все рекламные места, определенные до этого момента. При необходимости вы можете более точно контролировать загрузку, обновление и пакетирование рекламы с включенным SRA.
Полный пример
Ниже приведен полный исходный код примерной страницы, на которой основано это руководство. Вы также можете просмотреть интерактивную демонстрацию этой страницы .