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

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

Возможно, вам захочется связать рекламные места на странице с видео- или оверлейными рекламными местами. Такая связь между связанными рекламными местами называется отношением «главный-сопутствующий» .

Помимо запроса видео и мастер-объявлений, вы можете использовать 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-страницу и объявить рекламный блок. Объявленный размер рекламного блока составляет 728x90 пикселей. 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>

Попробуйте это

Ниже вы можете увидеть рабочую реализацию.

Пример 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>

Попробуйте это

Ниже вы можете увидеть код работающей реализации.

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

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

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

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

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

Объекты 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>

Рекламные API-компаньоны

При использовании 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>