DoubleClick для издателей: показ адаптивной рекламы

Question

Вот мой текущий код.

// Head
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>
<script>
    googletag.cmd.push(function() {
        googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>

// Body
<div style="width:100%;text-align:center;margin-bottom:10px">
    <div id='div-gpt-ad-1545041384304-0'>
        <script>
             googletag.cmd.push(function() { googletag.display('div-gpt-ad-1545045413584304-0'); });
        </script>
    </div>
</div>

Но он отображает баннер в боковом фрейме с фиксированной шириной и высотой.

Как я могу сделать это отзывчивым? Ранее я использовал пользовательский HTML-код с синхронизацией, но сейчас он устарел.

Каков наилучший способ достичь этого?

Я подписался - https://support.google.com/admanager/answer/3423562?visit_id=636827968345729217-1005578671&hl=en&rd=2

Но для этого я должен упомянуть каждую высоту и ширину экранов.

Answer 1

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

В этой части кода вы говорите, что этот слот может загружать 728x60 или 375x60 По размеру объявления оно будет выбрано либо произвольно, либо с определенным приоритетом в зависимости от того, как оно настроено в DFP.

googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads())

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

Вы можете сделать это с помощью тегов Google defineSizeMapping метод.

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();

googletag.defineSlot('/6355419/travel', [[980, 250], [728, 90], [460, 60], [320, 50]], 'ad-slot')
  .defineSizeMapping(mapping)
  .addService(googletag.pubads())
  .setTargeting('test', 'responsive'); // Targeting is only required for this example.

каждый addSize Вызов требует двух аргументов. В приведенном ниже примере первым является массив, сообщающий DFP, что он должен использовать эту таблицу размеров при ширине / высоте браузера 375 / 60 (Вы можете установить высоту 0 если вы заботитесь только о ширине), а второй аргумент говорит DFP, что он должен загрузить 320x50 или 300x50 объявление при соблюдении требований к размеру браузера.

addSize([320, 400], [[320, 50], [300, 50]])

Размеры браузера минимальны, это означает, что в следующем примере, если размер браузера 1028 или больше, он загрузит 728x90 объявление, и все, что ниже 1028 в ширину будет загружать 320x50 объявление.

.addSize([1028, 0], [[728, 90]])
.addSize([0, 0], [[320, 50]])

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

googletag.pubads().refresh(['ad-slot'])

Вот пример того, как это работает вместе с несколькими точками останова карты размеров, вам нужно сохранить это как HTML-файл и попробовать его локально, поскольку iFrame, который использует JSFiddle и Codepen, заставляет его работать неправильно. Загрузите страницу, измените размер экрана, а затем снова загрузите его, вы получите рекламу соответствующего размера в зависимости от текущего размера вашего браузера.

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<script type='text/javascript'>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];

</script>

<script type='text/javascript'>
  googletag.cmd.push(function() {
  // Defines the size mapping, there are multiple examples here.
  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();

    // Enables async rendering and single request.
    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableAsyncRendering();

    // Here the slot is defined, the smallest advert should be defined as the slot value
    // as this gets overwritten by the defineSizeMapping call.
    googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot')
      .defineSizeMapping(mapping)
      .addService(googletag.pubads())
      .setTargeting('test', 'responsive'); // Targeting is only required for this example.

    // Tells the advert to display.
    googletag.enableServices();

  });

</script>


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

Вы можете найти еще несколько примеров сопоставления размеров здесь и определение всех методов googletag здесь.

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

googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot')

Answer 2

Я прочитал документацию и получил решение проблемы, а это пример решения из документации:

var slot = googletag.defineSlot('/1234567/sports', [160, 600], 'div-1').
    addService(googletag.pubads());
var mapping = googletag.sizeMapping().
    addSize([100, 100], [88, 31]).
    addSize([320, 400], [[320, 50], [300, 50]]).
    build();
slot.defineSizeMapping(mapping);

В вашем случае я отредактировал ваш код, чтобы он работал следующим образом. Вы можете настроить его в соответствии с экранами, на которые вы хотите настроить таргетинг:

<script>
    googletag.cmd.push(function () {
     var adSlot = googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
      var mapping = googletag.sizeMapping().
        addSize([1024, 768], [970, 250]).
        addSize([980, 690], [728, 90]).
        addSize([640, 480], [120, 60]).
        addSize([0, 0], [88, 31]).
        // Fits browsers of any size smaller than 640 x 480
        build();
      adSlot.defineSizeMapping(mapping);

      googletag.pubads()
        .enableSingleRequest();
      googletag.enableServices();
    });
  </script>

Для получения дополнительной информации вы можете проверить эту ссылку: https://developers.google.com/doubleclick-gpt/reference