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

Выберите платформу: 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.

Если вы размещаете 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-страницу и объявить рекламные места для сопутствующих объявлений.

Пример 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. Предзагруженные рекламные места

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

Вот пример реализации, описанной выше:

<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 и имеют тот же порядковый номер, что и главный креатив. Если у креатива нет атрибута sequence, то считается, что его порядковый номер равен нулю.
  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>