DoubleClick для издателей: укажите размер браузера и объявления

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

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

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

<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? 728х90 работает нормально. Я знаю, что могу скрыть/показать в зависимости от размера браузера с помощью CSS. но я не хочу этого делать. Загрузка нескольких размеров в одном месте замедляет загрузку моих сайтов.


javascript adsense google-ad-manager google-dfp gpt
person user2636556    schedule 21.03.2016    source источник
comment
Может быть, это как-то связано с window.LeaderSlot? В примере это массив, а здесь у вас есть только одна переменная, которую вы заменяете.   -  person jolmos    schedule 31.03.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вам не нужно 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>

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

person da-hype    schedule 04.04.2016

arrow_upward
2
arrow_downward

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

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

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

person AppRoyale    schedule 31.03.2016