Делаем объявления, которые показываются через DFP, полностью адаптивными

Я изменил GPT (теги издателя Google), чтобы он показывался в объявлениях размера для телефонов и планшетов, а другой размер — для компьютеров или больших экранов. Это работает хорошо, но размеры определяются при загрузке, а при использовании планшета реклама остается неизменной независимо от того, переключаете ли вы альбомный режим на портретный. Я добавил код для динамического обновления рекламы при изменении размера окна, и это работает, пока идет обновление, но размеры по-прежнему определяются (я полагаю) при загрузке, а размеры рекламы не меняются. Как я могу «обновить/перезагрузить» переменные (размер и размер2) при изменении размера окна перед обновлением объявлений?
Вот код:

    <script type='text/javascript'>
    googletag.cmd.push(function() {
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.enableServices();

   $(window).resize(function(){googletag.pubads().refresh([slot1, slot2])});
   });
  </script>

javascript jquery responsive-design google-dfp
person user2817462    schedule 26.09.2013    source источник
comment
Вы пытались использовать синхронные теги вместо асинхронных? При использовании асинхронного режима DFP загружает окна iframe в качестве заполнителей. С тегами синхронизации код вставляется прямо на страницу, что может обеспечить необходимую вам гибкость.   -  person Khan    schedule 03.10.2013

Ответы (3)


arrow_upward
10
arrow_downward

Теперь вы можете создавать адаптивные объявления с помощью DFP.

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

https://support.google.com/dfp_premium/answer/3423562?hl=en

person Ryan Sander    schedule 25.07.2014
comment
Привет, Райан. Не могли бы вы помочь мне объяснить это? Я хочу отображать рекламу только на мобильных экранах, и для этого я использую файл .addSize([0, 0], [[320,50], [300, 50]]).addSize([727, 0], []). Но проблема в том, что когда я использую консоль DFP (прикрепив ?googfc к URL-адресу, я вижу предупреждение, что рекламный блок не удалось получить.). Это то, что я должен попытаться исправить? - person Mikhail; 28.01.2015

arrow_upward
0
arrow_downward

Вы правы, размеры оцениваются только при загрузке страницы. Если вы хотите получить новую ширину экрана после поворота устройства, вам придется получить ширину в вызове resize (и, возможно, переопределить рекламные места с этими размерами).

$(window).resize(function(){
    var width = document.documentElement.clientWidth;
    var size;
     if (width >= 320 && width < 728) 
     size = [320, 50]; // smartphones
    else 
      size = [728, 90]; // desktops and tablets
    var size2;
     if (width >= 320 && width < 728) 
     size2 = [180, 150]; // smartphones
    else 
     size2 = [160, 600]; // desktops and tablets
   var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads());
   var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads())
   googletag.pubads().enableSingleRequest();
   googletag.pubads().refresh([slot1, slot2]);
});

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

person j0nes    schedule 27.09.2013
comment
Привет j0nes, реклама не показывается без googletag.cmd.push(function(). Я предполагаю, что мой скрипт должен быть помещен в функцию и вызываться при изменении размера окна. Дело в том, что я не уверен, как это сделать. - person user2817462; 02.10.2013

arrow_upward
0
arrow_downward

На самом деле у Google есть полный пример произвольного обновления ваших объявлений с использованием метода setTargetting API. Вот в чем суть:

<script>

   googletag.cmd.push(function() {

    // Define the ad slot
    var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard").
     setTargeting("test", "refresh").
     addService(googletag.pubads());

   // Start ad fetching
   googletag.enableServices();
   googletag.display("leaderboard");

   // Set timer to refresh slot every 30 seconds
   setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000);
   });
 </script>

Остальные подробности можно найти здесь.

Кроме того, вам просто нужно обнаружить изменение ориентации - метод j0nes должен работать, также есть событие изменения ориентации - поддержка браузера является неполным, но jQuery Mobile имеет оболочку orientationchange (которая возвращается к изменению размера).

Надеюсь, что-то из этого поможет!

person toby1kenobi    schedule 13.03.2014