Как добавить поддержку сопутствующих объявлений

Выберите платформу: HTML5 Android iOS

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

С помощью IMA SDK можно запрашивать не только основные видеообъявления и оверлеи, но и сопутствующие объявления HTML. Эти объявления показываются в среде HTML.

Используйте сопутствующие объявления

Чтобы использовать сопутствующие объявления, выполните следующие действия:

1. Как зарезервировать сопутствующие объявления

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

2. Как запрашивать сопутствующие объявления

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

3. Показ сопутствующих объявлений

Отрисовка сопутствующих объявлений может выполняться двумя способами:

• Автоматически с помощью тега Google Publisher Tag (GPT).

  Если вы используете теги GPT для реализации сопутствующих объявлений, они будут показываться автоматически, если на HTML-странице объявлены рекламные места для сопутствующих объявлений и эти объявления зарегистрированы в API (то есть идентификатор div в JavaScript и HTML должен совпадать). Вот некоторые преимущества тега GPT:

  • Учет рекламных мест для сопутствующих креативов.
  • Показ сопутствующих объявлений для заполнения из сети издателя, если в ответе VAST меньше сопутствующих объявлений, чем рекламных мест на странице HTML.
  • Автозаполнение сопутствующего креатива, если видеообъявление отсутствует.
  • Предварительно загруженные рекламные места для сопутствующих объявлений в видеопроигрывателях с воспроизведением по клику.
  • Автоматическая отрисовка сопутствующих креативов, в том числе HTMLResource и iFrameResource.

• Вручную с помощью Ad API.

Как использовать сопутствующие объявления с тегом Google Publisher Tag

Тег Google Publisher Tag (GPT) позволяет автоматизировать показ сопутствующих HTML-объявлений на вашем сайте. Мы рекомендуем большинству издателей использовать тег GPT. HTML5 SDK распознает рекламные места GPT, если тег GPT загружен на основной веб-странице (не в окне iframe). Подробную информацию об использовании тегов GPT с IMA SDK можно найти в документации по GPT.

Примечание. Если вы используете для показа объявлений Google Interactive Media Ads SDK, то в отчетах, отправляемых на сервер объявлений, могут содержаться данные о том, взаимодействовал ли посетитель со страницей, на которой показывались объявления. Вы должны сообщить об этом посетителям, чтобы выполнить требование о раскрытии информации о сборе и использовании данных, которое содержится в вашем договоре с Google.

Если вы размещаете HTML5 SDK в окне iframe

Если вы соответствуете обоим критериям, приведенным ниже, вам необходимо добавить дополнительный прокси-скрипт, чтобы сопутствующие креативы GPT показывались корректно.

1. Загрузите HTML5 SDK в iframe.
2. Загрузите тег GPT на основной веб-странице (вне окна iframe).

Чтобы сопутствующие креативы показывались в этом сценарии, необходимо загрузить прокси-скрипт тега GPT до загрузки SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Важная информация:

• Внутри окна iframe, в котором загружается SDK, не должно быть тегов GPT.
• Тег GPT должен загружаться на главной странице, а не в другом окне iframe.
• Прокси-скрипт должен загружаться в том же фрейме, что и тег GPT (то есть на главной странице).

Как объявить рекламные места для сопутствующих объявлений в HTML-коде

В этом разделе рассказывается, как объявлять сопутствующие объявления в HTML с помощью тегов GPT, и приводятся образцы кода для разных сценариев. Если вы используете HTML5 SDK, то вам нужно добавить код JavaScript на HTML-страницу и объявить рекламные места для сопутствующих объявлений.

Примечание. В каждом из приведенных ниже примеров необходимо указать действительные значения network и unit-path в вызове метода googletag.defineSlot (в теге <head> или <body> в зависимости от примера).

• Пример 1. Базовая реализация рекламного места
• Пример 2. Реализация динамического рекламного места
• Пример 3. Предварительно загруженные рекламные места

Пример 1. Базовая реализация рекламного места

В приведенном ниже образце кода показано, как добавить файл gpt.js на HTML-страницу и объявить рекламное место. Объявленный размер рекламного места – 728 x 90 пикселей. Тег GPT пытается заполнить рекламное место любыми сопутствующими объявлениями, которые возвращены в ответе VAST и соответствуют этому размеру. После объявления рекламных мест функция googletag.display() может показывать их везде, где она вызывается на странице. Поскольку рекламные места являются сопутствующими, объявления показываются не сразу. Они показываются рядом с главным видеообъявлением.

Пример реализации:

<html>
  <head>
    <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
    <!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
    <!-- HEAD part -->
    <!-- Initialize the tagging library -->
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

    <!-- Register your companion slots -->
    <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
    </script>
  </head>

  <body>
    <!-- BODY part -->
    <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv" style="width:728px; height:90px;">
      <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
      </script>
    </div>
  <body>
</html>

Попробовать

Пример реализации можно посмотреть на сайте CodePen.

Пример 2. Реализация динамического рекламного места

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

Примечание. Когда видеопроигрыватель готов к показу рекламы, он запрашивает рекламные места. Убедитесь, что рекламные места определены до того, как проигрыватель начнет показывать объявления.

<html>
  <head>
    <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
    <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <!-- HEAD part -->
    <!-- Initialize the tagging library -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>

  <body>
    <!-- BODY part -->
    <!-- Declare a div where you want the companion to appear. Use
        googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv" style="width:728px; height:90px;">
      <script>
        // Using the command queue to enable asynchronous loading.
        // The unit does not actually display now - it displays when
        // the video player is displaying the ads.
        googletag.cmd.push(function() {
          // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
          googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
              .addService(googletag.companionAds())
              .addService(googletag.pubads());
          googletag.display('companionDiv');
        });
      </script>
    </div>
  <body>
</html>

Попробовать

Ниже приведен пример кода для рабочей реализации.

Пример 3. Предварительно загруженные рекламные места

В некоторых случаях вам может потребоваться показать что-либо в рекламном месте до запроса сопутствующего объявления. Сопутствующие объявления обычно запрашиваются вместе с видеообъявлениями. Этот запрос может быть отправлен после загрузки страницы. Например, сопутствующее объявление может загружаться только после того, как пользователь нажмет на видеообъявление с воспроизведением по клику. В этом случае вам нужно иметь возможность запросить обычное объявление, чтобы заполнить рекламное место до того, как будет запрошено сопутствующее объявление. Для этого вы можете показывать в сопутствующем рекламном месте стандартные веб-объявления. Убедитесь, что веб-объявления настроены на таргетинг на сопутствующие рекламные места. Таргетинг на места размещения сопутствующих креативов настраивается так же, как и на стандартные рекламные места на сайтах.

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

Вот пример реализации:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Попробовать

Пример реализации можно посмотреть в CodePen.

Как использовать сопутствующие объявления с Ad API

В этом разделе рассказывается, как показывать сопутствующие объявления с помощью Ad API.

Показ сопутствующих объявлений

Чтобы показывать сопутствующие объявления, сначала получите ссылку на объект Ad через любое из событий AdEvent, отправленных из AdsManager. Рекомендуем использовать событие AdEvent.STARTED, поскольку сопутствующие объявления должны показываться одновременно с основными.

Затем используйте этот объект Ad, чтобы вызвать getCompanionAds() и получить массив объектов CompanionAd. Здесь вы можете указать параметр CompanionAdSelectionSettings, который позволяет задать фильтры для сопутствующих объявлений по типу креатива, проценту соответствия, типу ресурса и размеру. Дополнительную информацию об этих настройках можно найти в документации по IMA CompanionAdSelectionSettings API.

Объекты CompanionAd, возвращаемые методом getCompanionAds, теперь можно использовать для показа сопутствующих объявлений на странице. При этом необходимо соблюдать следующие правила:

1. Создайте на странице рекламное место <div> нужного размера для сопутствующего объявления.
2. В обработчике событий для события STARTED получите объект Ad, вызвав getAd().
3. Используйте getCompanionAds(), чтобы получить список сопутствующих объявлений, которые соответствуют размеру рекламного места для сопутствующего объявления и CompanionAdSelectionSettings и имеют тот же порядковый номер, что и главный креатив. Креативы, у которых отсутствует атрибут последовательности, обрабатываются так, как если бы у них был порядковый номер 0.
4. Получите контент из экземпляра CompanionAd и задайте его в качестве внутреннего HTML-кода для элемента <div> рекламного места.

Образец кода

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Показ адаптивных сопутствующих объявлений

Теперь IMA поддерживает сопутствующие объявления с гибкими размерами. Размер таких объявлений может меняться в зависимости от размера рекламного места. Они занимают 100 % ширины родительского элемента div, а их высота изменяется в соответствии с размером контента сопутствующего креатива. Они задаются с помощью размера сопутствующего креатива Fluid в Менеджере рекламы. На изображении ниже показано, где задать это значение.

Гибкие сопутствующие объявления GPT

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

<!-- Register your companion slots -->
<script>
  googletag.cmd.push(function() {
    // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
    googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
        .addService(googletag.companionAds())
        .addService(googletag.pubads());
    googletag.companionAds().setRefreshUnfilledSlots(true);
    googletag.pubads().enableVideoAds();
    googletag.enableServices();
  });
</script>

Адаптивные сопутствующие объявления Ad API

При использовании Ad API для сопутствующих объявлений вы можете объявить гибкое рекламное место, изменив значение google.ima.CompanionAdSelectionSettings.SizeCriteria на SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>