DFP Adverts - Как показывать рекламу в разных местах в зависимости от размера экрана

Question

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

Я пробовал дублировать рекламу и показывать один/скрывать другого, но на нем все еще показаны оба рекламных объявления.

Есть ли способ сделать это, см. Прикрепленное изображение для примера того, что я делаю после.

Answer 1

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

Сценарий: у вас есть рекламный блок под названием adunit1. Вы хотите показывать контент на рабочем столе, но сверху на мобильном телефоне. На рабочем столе вы хотите быть 300x250, а на мобильном телефоне - 320x100 или 320x50. Мы рассматриваем рабочий стол все с шириной видового экрана 970px и мобильным чем-то меньшим (может добавить больше случаев, но давайте не будем делать это слишком сложно).

Шаг 1: Перейдите к настройкам рекламного блока в DFP и добавьте все размеры, отображаемые этим рекламным блоком (в нашем сценарии: 300x250, 320x100, 320x50). Шаг 2. Создайте переменную сопоставления размера для каждого подценария. Как сильфона:

var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build(); 

Что означает: Если ширина окна просмотра более чем 970 и высота окна больше, чем 0, служат баннер размером 300х250. Если меньше, ничего не обслуживайте.

Теперь давайте сделаем то же самое для мобильной версии с другим именем переменной:.. вар adunit1mobile = googletag.sizeMapping() addSize ([970, 0], []) addSize ([0, 0] , [[320, 100], [320,50]]). Build(); Что означает: если ширина видового экрана больше 970, а высота видового экрана больше 0, ничего не обслуживайте. Если меньше, то либо 320x100, либо 320x50.

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

Для рабочего стола:

gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads()); 

Две детали смотреть здесь: Div-баннер-рабочий стол - это идентификатор DIV, где мы хотим показать на рабочем столе баннер. defineSizeMapping (adunit1desktop) - так мы говорим DFP, чтобы показать это на основе вышеописанных правил размера (вкратце: показать баннер рабочего стола, только если ширина видового экрана не менее 970 пикселей).

Теперь для мобильного телефона:

gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads()); 

Обратите внимание на три детали: Div-баннер-Mobile, defineSizeMapping (adunit1mobile) и gptAdSlots [1] - мы увеличили с 1 на следующий слот рендеринга. Если их больше, каждый должен быть увеличен на 1.

Теперь перейдите на веб-сайт и поместить следующий код, в котором вы хотите отобразить на рабочем столе баннер:

<div id="div-banner-desktop"> 
<script> 
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); }); 
</script> 
</div> 

Теперь поместите этот код туда, где вы хотите отобразить мобильный баннер:

<div id="div-banner-desktop"> 
<script> 
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); }); 
</script> 
</div> 

Весь блок кода должен выглядеть примерно так:

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script> 
<script> 
    var googletag = googletag || {}; 
    googletag.cmd = googletag.cmd || []; 
</script> 

<script> 
var gptAdSlots = []; 
googletag.cmd.push(function() { 

    var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build(); 

    var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build(); 

    gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads()); 

    gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads()); 

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