Дополнительные примеры использования и реализации тегов Google Publisher Tag

В этой статье приведены расширенные примеры тегов Google Publisher Tag для показа рекламы на обычных компьютерах и мобильных устройствах.

О том, как использовать этот код, читайте в справочнике по Google Publisher Tag API. Об основных способах внедрения тегов Google Publisher Tag можно узнать в этой статье.

Обратите внимание, что в приведенных примерах сеть, рекламное место и настройки таргетинга являются тестовыми. Внедряя теги, учитывайте настройкт своей сети.

Реализация тегов на страницах с бесконечным содержанием

При помощи тегов издателя Google можно динамически генерировать новое содержание объявлений.

Исключение категорий и связки объявлений возможны только для объявлений с показами в режиме единого запроса, когда предоставляется такая возможность. Вызов в режиме единого запроса при загрузке одной страницы может привести к тому, что на одной странице будут показаны конкурирующие объявления.

При помощи тегов издателя Google можно динамически создавать новое содержание объявления. Ниже приводится пример кода целиком, который следует использовать для размещения тегов на страницах с бесконечным содержанием. Особенность этого примера – наличие кнопки в нижней части страницы для динамического создания нового контента.

Пример кода
<html>
<head>
<title>Пример кода для бесконечной прокрутки</title>

<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>

<script>

var adslot0;

 googletag.cmd.push(function() {

   // Указание рекламных мест, которые уже есть на странице
   adslot0 = googletag.defineSlot('/6355419/Travel', [728, 90], 'leaderboard').
       setTargeting("test","infinitescroll").
       addService(googletag.pubads());

   // Для бесконечной прокрутки используется режим архитектуры единого запроса
   googletag.pubads().enableSingleRequest();

   // Отключение первоначальной загрузки. Для вызова объявлений будет использоваться элемент refresh().
   // Вызов этой функции подразумевает, что элемент display() только
   // регистрирует рекламное место как готовое, но не запрашивает для него объявления.
   googletag.pubads().disableInitialLoad();

   // Включение сервисов
   googletag.enableServices();
 });

 // Функция генерации уникальных названий для рекламных мест
 var nextSlotId = 1;
 function generateNextSlotName() {
   var id = nextSlotId++;
   return 'adslot' + id;
 }

 // Функция добавления контента на страницу. Ее код существенно проще,
 // чем у стандартной реализации бесконечной прокрутки.
 function moreContent() {

   // Создание названия следующего рекламного места
   var slotName = generateNextSlotName();

   // Создание элемента div для рекламного места
   var slotDiv = document.createElement('div');
   slotDiv.id = slotName; // Id должен совпадать с slotName
   document.body.appendChild(slotDiv);

   // Создание и добавление имитации контента 1
   var h1=document.createElement("H2")
   var text1=document.createTextNode("Dynamic Fake Content 1");
   h1.appendChild(text1);
   document.body.appendChild(h1);

   // Создание и добавление имитации контента 2
   var h2=document.createElement("H2")
   var text2=document.createTextNode("Dynamic Fake Content 2");
   h2.appendChild(text2);
   document.body.appendChild(h2);

   // Определение рекламного места, вызов элемента display() 
   // для регистрации тега div и элемента refresh() для получения объявления.
   googletag.cmd.push(function() {
     var slot = googletag.defineSlot('/6355419/Travel', [728, 90], slotName).
         setTargeting("test","infinitescroll").
         addService(googletag.pubads());

     // Элемент display следует вызывать перед обновлением и
     // после появления рекламного места div на странице.
     googletag.display(slotName);
     googletag.pubads().refresh([slot]);
   });
 }
</script>

<style>
 body > div {
	margin-bottom: 1em;
	border: solid 1px black;
	width: 728px
 }
 body > img {
	margin-bottom: 1em;
	display: block
 }
 body > button {
	position: fixed;
	bottom: 10px;
 }
</style>
</head>

<body>
 <h1>Тестовая страница GPT – бесконечная прокрутка</h1>

 <!-- Первая имитация контента -->
 <text>
 <h2> Исходная имитация контента< /h2>
 </text>

 <!-- Первое объявление -->
 <div id="leaderboard"> 
     <script>
        // Вызов элемента display() для регистрации рекламного места как готового
        // и элемента refresh() для получения объявления.
        googletag.cmd.push(function() {
          googletag.display('leaderboard');
          googletag.pubads().refresh([adslot0]);
        });
     </script> 
 </div>

 <!-- Дополнительная исходная имитация контента -->
 <text>
  <h2> Исходная имитация контента 1 </h2>
  <h2> Исходная имитация контента 2 </h2>
 </text>

 <!-- Кнопка динамической дозагрузки контента. -->
 <button onclick="moreContent()">Загрузить ещё</button>

</body>
</html>

Обновление выбранных рекламных мест

Рекламные места можно массово обновлять, используя асинхронный режим Google Publisher Tag. Ниже приводится пример кода для реализации этой функции. Особенность этого примера – наличие двух рекламных мест и соответствующих кнопок для заполнения этих мест новыми объявлениями.

Пример кода
<html>
<head>
<title>Обучение работе с тегом GPT – обновление рекламного места</title>

<script> 

 // Асинхронная загрузка тега GPT
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   gads.type = 'text/javascript';
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//www.googletagservices.com/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>

<script>

 // Рекламные места GPT
 var gptAdSlots = [];

 googletag.cmd.push(function() {

  // Определение первого рекламного места
  gptAdSlots[0] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard0').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Определение второго рекламного места
  gptAdSlots[1] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard1').
      setTargeting('test', 'refresh').
      addService(googletag.pubads());

  // Настройка режима единого запроса
  googletag.pubads().enableSingleRequest();

  // Получение объявлений
  googletag.enableServices();
 });

 // Код кнопки для обновления рекламного места 1
 var refreshFirstSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0]]);
   });
 };

 // Код кнопки для обновления рекламного места 2
 var refreshSecondSlot = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[1]]);
   });
 };

 // Код кнопки для обновления обоих рекламных мест
 var refreshBothSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
   });
 };

 // Код кнопки для очистки всех рекламных мест
 var clearAllSlots = function() {
   googletag.cmd.push(function() {
     googletag.pubads().clear();
   });
 };
</script>
</head>

<body>
 <div>
  <h1>Обучение работе с тегом GPT – обновление рекламных мест</h1>
  <div id='leaderboard0' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard0');
          });
     </script> 
  </div>

  <div id='leaderboard1' style="width:728px;height:90px;"> 
     <script>
          googletag.cmd.push(function() {
            googletag.display('leaderboard1');
          });
     </script> 
  </div>
 </div>

 <div> 
  <!-- Обновление рекламного места 1о -->
  <button onclick="refreshFirstSlot();">Refresh Top Ad</button>

  <!-- Обновление рекламного места 2 -->
  <button onclick="refreshSecondSlot();">Refresh Bottom Ad</button>

  <!-- Обновление обоих рекламных мест -->
  <button onclick="refreshBothSlots();">Refresh Both Ads</button>

  <!-- Очистка рекламных мест -->
  <button onclick="clearAllSlots();">Clear Ads</button>
 </div>

</body>
</html>

Подробнее о перезагрузке объявлений без обновления страницы...

Реализация тегов для веб-страниц с адаптивным дизайном

При помощи тегов издателя Google (GPT) можно добавить теги на страницу с адаптивным дизайном. Чтобы проверить корректность адаптивного дизайна, измените размер окна и обновите страницу.

Адаптивные объявления GPT не реагируют на изменение размера окна браузера. Для этого нужно добавить в них собственный код.

Пример кода
<html>
<head>
<title>Обучение работе с тегом GPT – тестовая страница с адаптивным дизайном</title>
<script async src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>
<script>

 // Рекламные места GPT
 var gptAdSlots = [];
 googletag.cmd.push(function() {

   // Определение объекта для сопоставления размеров. Первый параметр для addSize –
   // размер области просмотра, а второй – список допустимых форматов объявлений.
   var mapping = googletag.sizeMapping().

   // Объявление малого размера
   addSize([100, 100], [88, 31]). 

   // Позволяет отображать оба основных формата мобильных банне
   addSize([320, 400], [[320, 50], [300, 50]]). 
		
   // Такая же ширина, как в конфигурации выше, большее значение высоты
   addSize([320, 700], [300, 250]).

   // Планшет, альбомная ориентация 
   addSize([750, 200], [728, 90]). 

   // Обычный компьютер
   addSize([1050, 200], [1024, 120]).build();

   // Определение рекламного места GPT
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot').
       defineSizeMapping(mapping).
       addService(googletag.pubads());
   googletag.pubads().setTargeting("test","responsive");

   // Получение объявлений
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>Обучение работе с тегом GPT – тестовая страница с адаптивным дизайном</h1>

<div id="ad-slot"> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

<p><span>Адаптивные объявления GPT не меняют размер в зависимости от размера окна браузера.
  You can add your own custom code to refresh the ad slots on resize.
  Чтобы проверить адаптивные объявления, измените размер окна и обновите страницу.</span></p>

</body>
</html>

Подробнее о создании адаптивных объявлений

Реализация тегов для нативных объявлений гибкого размера

Тег GPT позволяет отображать нативные объявления гибкого размера. В этом случае рекламное место имеет ширину родительского контейнера, а высота соответствует файлу объявления. Ниже приводится пример кода.

Пример кода
<html>
<head>
<title>Обучение работе с тегом GPT – нативные объявления гибкого размера</title>
<script>
 //  Асинхронная загрузка тега GPT
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement('script');
   gads.async = true;
   var useSSL = 'https:' == document.location.protocol;
   gads.src = (useSSL ? 'https:' : 'http:') +
       '//www.googletagservices.com/tag/js/gpt.js';
   var node = document.getElementsByTagName('script')[0];
   node.parentNode.insertBefore(gads, node);
 })();
</script>
<script>

 // Рекламные места с тегом GPT
 var gptAdSlots = [];
 googletag.cmd.push(function() {


   // Определение рекламного места с помощью тега GPT
   gptAdSlots[0] = googletag.defineSlot('/6355419/travel', ‘fluid’, 'ad-slot').
       addService(googletag.pubads());

   // Получение объявлений
   googletag.enableServices();
 });
</script>
</head>

<body>
<h1>Обучение работе с тегом GPT – тестовая страница с нативными объявлениями</h1>

<div id="ad-slot" style=”width:600px;”> 
   <script>
     googletag.cmd.push(function() {
       googletag.display('ad-slot');
     });
   </script> 
</div>

</body>
</html>

Если вы хотите использовать объявления гибкого размера, добавьте в имеющийся тег Google Publisher Tag атрибут fluid. Пример:

.addSize([640, 480], 'fluid')

Подробнее о нативных объявлениях...

Реализация тегов для отложенной загрузки

Для отложенной загрузки (чтобы показывать рекламу, только когда это нужно вам) используются теги Google Publisher Tag. Например, объявление может появиться в нижней части страницы, только если пользователь прокрутит ее вниз. Отложенная загрузка обеспечивает более быструю обработку веб-страниц, что снижает задержки и нагрузку на процессор.

Ниже приводится пример кода.

Пример кода
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Отложенная загрузка с помощью тега GPT</title>

    <script>googletag = window.googletag || {cmd: []};</script>
    <script async src="//www.googletagservices.com/tag/js/gpt.js"></script>

    <script>
      var topSlot, bottomSlot; +       googletag.cmd.push(function() {
        topSlot = googletag.defineSlot('/6075/gpttraining', [300, 250], 'topAd').addService(googletag.pubads());
        bottomSlot = googletag.defineSlot('/6075/gpttraining', [728, 90], 'bottomAd').addService(googletag.pubads());
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
  </head>
  <body>
    <h1>Отложенная загрузка с помощью тега GPT</h1>

    <div id="topAd" style="width: 300px; height: 250px">
      <script>
        // Загрузить верхнее объявление сразу. Отложенная загрузка не требуется.
        googletag.cmd.push(function() {
          googletag.display('topAd');
          googletag.pubads().refresh();
        });
      </script>
    </div>

    <!-- Большой элемент div для перемещения объявления в нижнюю часть страницы. -->
    <div id="veryLongDiv" style="width: 200px; height: 1000px">преднамеренно не заполнено</div>

    <div id="bottomAd" style="width: 728px; height: 90px">
      <script>
        googletag.cmd.push(function() {
          // Зарегистрируется рекламное место. Объявление будет показано только после 
          // вызова refresh.
          googletag.display('bottomAd');
        });
      </script>
    </div>

    <script>
      // Обновление нижнего рекламного места, перед тем как его увидит пользователь.
      var refreshed = false;

      // Сколько необходимо прокрутить пользователю, чтобы увидеть рекламное место.
      var adAlmostVisibleScrollValue = 300;

      // Внимание! Это образец кода. Прослушивание элемента onscroll без
      // обтекания может быть неэффективно.
      var listener = function() {
        if (window.scrollY >= adAlmostVisibleScrollValue && !refreshed) {
          googletag.cmd.push(function() {
            googletag.pubads().refresh([bottomSlot]);
          });
          // Обновить объявление один раз.
          refreshed = true;

          // Удаление прослушивания.
          window.removeEventListener('scroll', listener);
        }
      }
      window.addEventListener('scroll', listener);
    </script>
    <br/>
      </body>
</html>

Управление контейнером SafeFrame с помощью тега GPT

Тег GPT обеспечивает удобное и эффективное управление контейнерами SafeFrame, созданными с его помощью. Для этого можно использовать метод setSafeFrameConfig, основанный на объекте JSON.

Этот метод можно использовать только в том случае, если реклама демонстрируется в SafeFrame. Показ объявления в таком iframe определяется типом креатива и настройками SafeFrame в DFP.

Чтобы избежать показа вредоносных креативов, желательно всегда использовать SafeFrame и одновременно атрибут HTML5 sandbox – с целью предотвратить навигацию верхнего уровня. Кроме того, чтобы объявления на определенном рекламном месте всегда показывались в SafeFrame, можно использовать параметр setForceSafeFrame в GPT API.

Метод setSafeFrameConfig возвращает логическое значение, из которого можно узнать, обработаны ли настройки конфигурации.

Сведения об объекте конфигурации

Объект конфигурации основан на простом объекте JSON, который представляет собой список ключей и значений. Допустимые значения приведены ниже.

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

Название ключа Описание Допустимые значения
allowOverlayExpansion Используется режим оверлея в SafeFrame API, при котором креатив, раскрываясь, показывается поверх контента страницы. true
false
allowPushExpansion Используется режим сдвига в SafeFrame API, при котором креатив, раскрываясь, сдвигает контент страницы вниз. true
false
sandbox Описывает контейнер SafeFrame, атрибут sandbox которого не допускает навигацию верхнего уровня. При использовании этого атрибута необходимо, чтобы целевая страница открывалась в новой вкладке, а не в текущей. Это делает показ объявления возможным даже в браузерах без поддержки изолированной среды.
 
Ключ можно использовать только в браузерах, которые поддерживают новый атрибут HTML5 sandbox в окнах iframe.

При использовании этого ключа блокируются объявления с такими плагинами, как Flash. Кроме того, объявления и целевые страницы могут некорректно отображаться в некоторых браузерах (как правило, на компьютерах).
true
Пример кода
Пример Описание
googletag.pubads().setSafeFrameConfig({sandbox: true}); Во всех объявлениях на странице, которые демонстрируются в SafeFrame, используется атрибут sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({sandbox:true});
В SafeFrame с атрибутом sandbox показывается только объявление из рекламного места slot1. Остальные рекламные места работают в обычном режиме.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false});
Объявления, которые показываются в рекламном месте slot1 в SafeFrame, не могут раскрываться как оверлеи.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowOverlayExpansion: false, sandbox:true});
Объявления, которые показываются в рекламном месте slot1 в SafeFrame, не могут раскрываться как оверлеи. Устанавливается атрибут sandbox.
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad');
slot1.setSafeFrameConfig({allowPushExpansion: false, sandbox:true});
Креативы, которые показываются в рекламном месте slot1 в SafeFrame, не могут раскрываться за счет сдвига контента.

Подробнее о показе объявлений с помощью SafeFrame...

Была ли эта статья полезна?
Как можно улучшить эту статью?