Ниже приведен пример полного кода, который можно использовать при создании тега Google Publisher Tag (GPT) для показа рекламы на компьютерах и мобильных устройствах. Чтобы создать тег автоматически, воспользуйтесь генератором тегов Google.
Сложные варианты применения тега GPT представлены в документации по API и в примерах практического использования, например отложенной загрузки.
Посмотреть сложные примеры тега GPT
Пример кода тега Google Publisher Tag
Код GPT состоит из двух частей:
- Настройки GPT представлены в разделе
<head>веб-страницы. - Вызовы для каждого конкретного рекламного места размещаются в соответствующих частях раздела
<body>.
Этот пример предоставлен исключительно в информационных целях. Для добавления кода на сайт рекомендуем обратиться к разработчику.
Настройки кода GPT
Пример кода ниже содержит вызов библиотеки JavaScript тега GPT, определение рекламных мест, таргетинг на пары "ключ-значение" и другие параметры.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Строки 3–6. Выполняется асинхронная загрузка библиотеки GPT для Менеджера рекламы с использованием SSL/HTTPS. Именно этот фрагмент создает очередь команд, обрабатывающих список асинхронно выполняемых функций (как правило, это запросы объявлений). Издателям не нужно изменять эту часть кода. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/путешествия/азия", [728, 90], "div-gpt-ad-123456789-0") |
|
Строка 9. Элемент Параметр |
|
10 |
.addService(googletag.pubads()); |
11 |
.setTargeting("interests", ["спорт", "музыка", "кино"]); |
12 |
googletag.defineSlot("/1234/путешествия/азия", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()); |
14 |
.setTargeting("пол", "мужской") |
| 15 | .setTargeting("возраст", "20-30"); |
|
Строки 11, 14 и 15. Здесь задаются настройки таргетинга на пары "ключ-значение" на уровне рекламного места при помощи функции Подробнее о настройке таргетинга и размеров объявлений с помощью тегов GPT… |
|
| 16 | googletag.pubads().setTargeting("тема","баскетбол"); |
|
Строка 16. В элементе В этом случае параметры таргетинга наследуются всеми рекламными местами. Как и при настройке таргетинга на уровне рекламного места, одному ключу можно присвоить несколько значений: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Строка 17. Элемент |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Строка 23 (необязательно): При использовании тегов с несколькими размерами либо нужно опустить этот фрагмент (тогда элемент примет размер показываемого креатива), либо оба размера должны быть достаточными, чтобы вместить самый большой креатив. В случае с тегами объявлений одного размера этот код можно использовать для расширения контейнера. Это позволит избежать смещения других элементов страницы при отображении креатива. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Строки 8, 25 и 32. Вызовы функций добавляются в очередь команд, обрабатываемых асинхронно при загрузке страницы. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Строки 9, 12, 23, 26, 30 и 33. Хотя в данном случае задействуются случайные числа, GPT не использует их для однозначной идентификации запроса объявления. Это скрытая процедура, для которой применяется библиотека GPT. Более того, на разных страницах можно использовать одно и то же название, если комбинация символов, относящаяся к элементу div, не повторяется в пределах одной страницы. Ознакомьтесь со статьей в нашем Справочном центре, которая посвящена структуре инвентаря в Менеджере рекламы, иерархии рекламных блоков и наследованию параметров таргетинга. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Посмотреть сложные примеры тега GPT
Если вы не можете редактировать заголовки своих веб-страниц
Теги GPT можно использовать, не изменяя раздел страницы <header>.
Вариант 1: встроенный тег GPT
С помощью встроенных тегов объявляйте рекламные блоки в тех местах, где они располагаются на странице, а не в заголовке. Для встроенных тегов всё определение рекламного места GPT и запрос, в том числе загрузка библиотеки GPT, содержатся в одном теге <script>.
Поскольку в теге объявления используется библиотека JavaScript тега GPT, перед кодом тега не забудьте вставить код, загружающий эту библиотеку.
В этом примере встроенного тега GPT не поддерживается режим единого запроса.
Вызов библиотеки JavaScript тега Google Publisher Tag
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Пример встроенного тега объявления
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/спорт/футбол', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("пол", "мужской");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Вариант 2: весь код размещен в основной части веб-страницы
Используйте традиционную реализацию тега GPT, но размещайте определения рекламных мест не в заголовке HTML, а на самой странице (в разделе body).
Код загрузки библиотеки и определения рекламных мест должен вызываться перед запросом объявлений для этих мест. Поскольку код не распределен между разделами head и body вашей страницы и нужно управлять последовательностью его выполнения, этот подход сложнее в реализации, однако при этом можно использовать режим единого запроса.
Как создать запрос без тегов, не используя JavaScript
Запрос без тегов можно использовать вместо тега объявления, чтобы получить исходный код креатива, показ которого выполняется в Менеджере рекламы. Такие запросы обычно создаются, если необходимо выполнять специальную обработку и показ, например при размещении рекламы на телеприставках и прочих платформах, не поддерживающих теги или SDK Google.