Начало работы с тегами издателя Google

Пример тега Google Publisher Tag

Ниже приведен пример полного кода, который можно использовать при создании тега Google Publisher Tag (GPT) для показа рекламы на компьютерах и мобильных устройствах. Также рекомендуем ознакомиться с информацией о создании тегов объявлений.

Эта статья также содержит инструкции, которые пригодятся при проблемах с редактированием заголовка веб-страницы или если нужно создать пиксель отслеживания 1 x 1 без использования JavaScript.

Обновите домен размещенной библиотеки, чтобы оптимизировать тег GPT

Библиотека тега Google Publisher Tag теперь располагается по адресу https://securepubads.g.doubleclick.net/tag/js/gpt.js в дополнение к домену googletagservices.com. Настоятельно рекомендуем обновить все ссылки на тег GPT на своих страницах, хотя это и не обязательно.

После обновления все запросы на показ рекламы будут отправляться в один домен, то есть браузеру потребуется установить только одно подключение. Оба экземпляра библиотеки идентичны.

В результате ускорится обработка тегов, а объявления будут загружаться немного быстрее.

Возможный вариант тега Google Publisher Tag

Посмотреть код без подсказок
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>
8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/путешествия/азия", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["спорт", "музыка", "кино"]);
18     googletag.defineSlot("/1234/путешествия/азия", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("пол", "мужской")
21       .setTargeting("возраст", "20–30");
22     googletag.pubads().setTargeting("тема","баскетбол");
23     googletag.pubads().enableSingleRequest();
24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {
39          googletag.display("div-gpt-ad-123456789-1");
40       });
41     </script>
42   </div>
43 </body>
44 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>

Строки 3–7. Шаблонный код, выполняющий асинхронную загрузку библиотеки JavaScript GPT для Менеджера рекламы с использованием SSL/HTTPS. Именно этот фрагмент создает очередь команд, обрабатывающих список асинхронно выполняемых функций (как правило, это запросы объявлений). Издателям не нужно изменять эту часть кода.

8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>

Строки 8–12 (необязательные). В этом фрагменте на уровне страниц задаются атрибуты для рекламных мест, выполняющих показ объявлений AdSense. Изменение этих атрибутов переопределяет любые стили, заданные в Менеджере рекламы или AdSense. Такой способ используется нечасто, поскольку эту же задачу можно выполнить непосредственно с помощью настроек в Менеджере рекламы. Подробнее о том, как задавать параметры AdSense в теге GPT, рассказывается в документации функции .set().

13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/путешествия/азия", [728, 90], "div-gpt-ad-123456789-0")

Строка 15. Элемент "/1234/путешествия/азия" указывает на код сети (1234) и целевой рекламный блок (путешествия/азия). Чтобы найти код сети в Менеджере рекламы, выберите в интерфейсе этого сервиса Администрирование затем Глобальные настройки затем Код сети.

Параметр [728, 90] задает размер рекламного блока. Чтобы указать несколько размеров, используйте следующий синтаксис: [[ширина1, высота1], [ширина2, высота2], [ширина3, высота3]]. Свяжите все указанные здесь размеры с рекламным блоком, на который настроен таргетинг. Это позволит сократить список размеров за счет использования параметров рекламного блока. Если используются рекламные блоки разного формата, то их размеры следует объявлять в том же порядке, что и в Менеджере рекламы. Подробнее…

16       .addService(googletag.pubads())
17       .setTargeting("interests", ["спорт", "музыка", "кино"]);
18     googletag.defineSlot("/1234/путешествия/азия", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("пол", "мужской")
21       .setTargeting("возраст", "20–30");

Строки 17, 20 и 21. Здесь задаются настройки таргетинга на ключи и значения на уровне рекламного места при помощи функции .setTargeting(). Для одного ключа можно указать несколько значений (см. первый пример: "ключ", ["значение1", "значение2", "значение3"]). Чтобы настроить таргетинг на несколько ключей, вызовите функцию несколько раз, как показано во втором примере: пол=мужской и возраст=20–30.

Из описания функции .setTargeting() вы узнаете, как задавать параметры с помощью ключей и значений в теге GPT. Подробнее о настройке таргетинга и размеров объявлений с помощью тегов GPT

22     googletag.pubads().setTargeting("тема","баскетбол");

Строка 22. В элементе googletag.pubads().setTargeting("topic","basketball"); задаются настройки таргетинга на ключи и значения на уровне страницы. В этом случае параметры таргетинга наследуются всеми рекламными местами. Как и при настройке таргетинга на уровне рекламного места, одному ключу можно присвоить несколько значений: ("ключ", ["значение1", "значение2", "значение3"]).

23     googletag.pubads().enableSingleRequest();

Строка 23. Элемент googletag.pubads().enableSingleRequest(); активирует режим единого запроса (РЕЗ). Она должна присутствовать, если нужно вызвать сразу все рекламные места на странице (обеспечивается гарантированный показ связки, а загрузка может выполняться быстрее, если объявления обрабатываются в рамках одного вызова).

24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Строка 30 (необязательная). С помощью фрагмента кода style="width: 728px; height: 90px" задаются размеры элемента до отображения креатива. При использовании тегов с несколькими размерами либо нужно опустить этот фрагмент (тогда элемент примет размер показываемого креатива), либо оба размера должны быть достаточными, чтобы вместить самый большой креатив. В случае с тегами объявлений одного размера этот код можно использовать для расширения контейнера. Это позволит избежать смещения других элементов страницы при загрузке креатива.

30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

Строки 9, 14, 31 и 38. Вызовы функций добавляются в очередь команд, обрабатываемых асинхронно при загрузке страницы.

39          googletag.display("div-gpt-ad-123456789-1");

Строки 15, 18, 29, 32, 36, 39. "div-gpt-ad-123456789-0". Используются для сопоставления рекламных мест, определенных в разделе HEAD, с рекламными местами на странице (тегами div основного раздела, в котором показываются креативы). Э параметры могут иметь любые названия, однако оформляться они должны единообразно. Наш генератор тегов создает строки вида "div-gpt-ad-[случайное число]-0", "div-gpt-ad-[случайное число]-1" и т. д. Используйте один и тот же идентификатор тега <div> для определенной позиции на странице, так как он применяется при различных способах оптимизации.

Хотя в данном случае задействуются случайные числа, GPT не использует их для однозначной идентификации запроса объявления. Это скрытая процедура, для которой применяется библиотека GPT. Более того, на разных страницах можно использовать одно и то же название, если комбинация символов, относящаяся к элементу div, не повторяется в пределах одной страницы.

Ознакомьтесь со статьей в нашем Справочном центре, которая посвящена структуре инвентаря в Менеджере рекламы, иерархии рекламных блоков и наследованию параметров таргетинга.

40       });
41     </script>
42   </div>
43 </body>
44 </html>

Если вы не можете редактировать заголовки своих страниц

Теги Google Publisher Tag можно использовать, не изменяя заголовок страницы.

Вариант 1. С помощью встроенных тегов объявляйте рекламные блоки в тех местах, где они располагаются на странице, а не в заголовке. Для встроенных тегов всё определение рекламного места GPT и запрос, в том числе загрузка библиотеки GPT, содержатся в одном теге <script>. Ниже показаны примеры определения рекламных мест с помощью встроенных тегов.

Поскольку в теге объявления используется библиотека JavaScript GPT, перед кодом тега не забудьте вставить код, загружающий эту библиотеку.

Пример встроенного асинхронного тега Google Publisher Tag

В этом примере встроенного тега Google Publisher Tag не поддерживается режим единого запроса.

Вызов библиотеки 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>

Тег объявления. Пример 1: встроенный тег

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

Тег объявления. Пример 2: встроенный компактный тег (таргетинг на уровне рекламного места не поддерживается)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>

Вариант 2. Используйте традиционную реализацию тега GPT, но размещайте определения рекламных мест не в заголовке HTML, а на самой странице (в разделе body). Код загрузки библиотеки и определения рекламных мест должен вызываться перед запросом объявлений для этих мест. Поскольку код не распределен между разделами head и body вашей страницы и нужно управлять последовательностью его выполнения, этот подход сложнее в реализации, однако при этом можно использовать SRA.

Применение тегов Google Publisher Tag, написанных без использования JavaScript, для создания пикселя отслеживания

Чтобы создать счетчик показов с тегом Google Publisher Tag, выполните следующие действия:

  1. Создайте новый или выберите существующий рекламный блок, в котором нужно отслеживать количество показов.

  2. Создайте позицию с размером 1 x 1 и добавьте в нее графический креатив с прозрачным пикселем.

  3. Настройте ее таргетинг на рекламный блок, созданный на этапе 1.

  4. Создайте тег Google Publisher Tag для среды, не поддерживающей JavaScript, с вызовом пикселя отслеживания и укажите рекламный блок, созданный на этапе 1. Пример:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Подробнее...

  5. Тег со счетчиком показов можно использовать следующими способами:

    • Добавьте тег в пользовательский или сторонний креатив, который будет показываться на странице. Для этого откройте вкладку "Настройки" в параметрах креатива и разместите нужный код вверху окна "Фрагмент кода".

    • Добавьте тег непосредственно на веб-страницу.

Эта информация оказалась полезной?
Как можно улучшить эту статью?