DoubleClick для издателей: укажите размеры браузера и рекламы

Я пытаюсь загрузить баннеры в соответствии с размером браузера. Таким образом, в месте, где у меня есть баннер 728x90, 300x250 покажет его на мобильном телефоне.

Проблема в том, что 728x90 загружается на рабочий стол. но на мобильном 300x250 не показывает.

Я попытался следовать примеру здесь

<script type='text/javascript'>
 googletag.cmd.push(function() {
    // This mapping will only display ads when user is on desktop sized viewport
    var mapLeader = googletag.sizeMapping().
        addSize([0, 0], []).
        addSize([768, 200], [728, 90]).
        build();

    // This mapping will only display ads when user is on mobile or tablet sized viewport
    var mapLeader2 = googletag.sizeMapping().
      addSize([0, 0], []).
      addSize([768, 200], []). // Desktop
      addSize([300, 200], [300, 250]). // Tablet
      build();

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0').
        defineSizeMapping(mapLeader).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads());

    window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0').
        defineSizeMapping(mapLeader2).
        setCollapseEmptyDiv(true).
        addService(googletag.pubads()); 

    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableSyncRendering();
    // Start ad fetching
    googletag.enableServices();

});
</script>

и в моем HTML

<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
    <script type='text/javascript'>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
    </script>
</div>
<!-- /XXXXXX/medium-rectangle-1 -->
<div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'>
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); });
    </script>
</div>

я должен поставить <div> для каждого размера в одном месте? Как получить баннер 300x250 для загрузки? 728x90 работает отлично. Я знаю, что могу скрыть / показать в соответствии с размером браузера, используя CSS. но я не хочу этого делать Загрузка нескольких размеров в одном месте замедляет загрузку моих сайтов.

Источник

2 ответа

Решение

Вам не нужно style='height:90px; width:728px;' поскольку вы хотите, чтобы DFP загружал правильный баннер в соответствии с размером экрана.

<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
    <script type='text/javascript'>
        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
    </script>
</div>

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

Источник

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

 <html>
      <head>
        <title>Async Responsive</title>
        <script async src="http://www.googletagservices.com/tag/js/gpt.js">
        </script>
        <script>
          googletag = window.googletag || {cmd:[]};
          googletag.cmd.push(function() {

            var sizeMapping = googletag.sizeMapping().
                addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768
                addSize([980, 690],  [728, 90]).  // Screens of any size smaller than 1024x 768 but bigger than 980 x 690
                addSize([640, 480],  [120, 60]).  // Screens of any size smaller than 980 x 690 but bigger than 640 x 480
                addSize([0, 0],      [88, 31]).   // Screens of any size smaller than 640 X 480 but bigger than 0 x 0

                build();

            googletag.defineSlot(
                '/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id').
                defineSizeMapping(sizeMapping).
                addService(googletag.pubads());

            googletag.enableServices();
          });
        </script>
      </head>
      <body>
        <h1>user2636556 Testpage</h1>
        <div id="div-id">
          <script>
            googletag.cmd.push(function() { googletag.display('div-id') });
          </script>
        </div>
      </body>
 </html>

Сначала вам нужно вызвать.sizeMapping(), чтобы сопоставить размеры объявлений с размерами браузера, а затем вам нужно вызвать.defineSizeMapping(), чтобы реализовать сопоставление.

Первое измерение, которое вы указываете для addSize, - это размер экрана, а каждое последующее измерение - это размер объявления. Например, в первой функции addSize(), определенной выше, [1024, 768] - это размер браузера, а [970, 250] - размер рекламы.

Если в отображении есть ошибка или если размер экрана не может быть определен по какой-либо причине, будет использоваться размер, указанный в.defineSlot().

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

Функция для этого вот эта:

googletag.pubads().refresh();

Если есть дополнительные вопросы, дайте мне знать, пожалуйста.

Источник
Другие вопросы по тегам