Как сделать адаптивные рекламные блоки DFP

Опубликовано: 2016-01-22

Адаптивные объявления google dfp — пример тега doubleclick

Этот пост последний раз обновлялся 31 августа 2021 г.

Итак, у вас есть адаптивная тема, и теперь вы хотите перейти на Google Ad Manager (GAM) с AdSense. Первое, что вы видите, это отсутствие адаптивных рекламных блоков, которые вы обычно видите в AdSense.

Инструкции службы поддержки Google могут быть немного сложными. Итак, сегодня я собираюсь показать вам, как сделать коды GAM отзывчивыми, выполнив несколько простых шагов.

Настроить код DFP для создания адаптивных объявлений Google Ad Manager — непростая задача.Если у вас нет опыта программирования, было бы разумнее, чтобы специалисты сделали это за вас правильно с первого раза.Вы не хотите рисковать потерей доходов от рекламы!

Если вам нужна помощь , свяжитесь с нами здесь.

Прежде чем мы начнем, обязательно сделайте следующее:

Настройте свой инвентарь. Настройте все соответствующие размеры для каждого рекламного блока. Читайте: Рекомендации по интеграции AdSense и GAM
Ознакомьтесь с нашим руководством по созданию нескольких тегов Менеджера рекламы здесь: https://youtu.be/s74dMDzczyc.
Теперь создайте два текстовых файла и сохраните их. Используйте хороший текстовый редактор (я предпочитаю Notepad++, потому что он бесплатный и с ним легко работать).
Сделайте один для головы и еще один для тегов тела.
Сохраните теги тела.
Откройте созданный вами файл head.txt.

Делаем тег head отзывчивым

Шаг 1: Откройте файл head.txt в Notepad++.Во-первых, давайте сделаем это шаг за шагом. Ваш код заголовка будет выглядеть примерно так:

<!– Запустить тег GPT –>

<скрипт>

window.googletag = window.googletag || {команда: []};

googletag.cmd.push(функция() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</скрипт>

<!– Конец тега GPT –>

Шаг 2: Я выделил там фрагмент кода:

googletag.cmd.push(функция() {

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

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

var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //мобильный

addSize([0, 0], [[320, 50], [1, 1]]). //Другой

строить();

Шаг 3: Я выделил еще один фрагмент кода.Это имя сопоставления, которое мы собираемся передать в рекламном блоке чуть позже. Я предпочитаю делать это так,mapadunitname , поэтому для нашего примера выше я выбираю создать карту 1 размера на единицу, что означает, что нам понадобятся 4 экземпляра и поместим их после:

googletag.cmd.push(функция() {

Шаг 4: После добавления сопоставления ваш код заголовка должен выглядеть примерно так:

<!– Запустить тег GPT –>

<скрипт>

window.googletag = window.googletag || {команда: []};

googletag.cmd.push(функция() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //рабочий стол

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //планшет

addSize([0, 0], [1, 1]). //Другой

строить();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //рабочий стол

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //мобильный

addSize([0, 0], [[320, 50], [1, 1]]). //Другой

строить();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //мобильный

addSize([0, 0], [[300, 250], [1, 1]]). //Другой

строить();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //планшет

addSize([0, 0], [1, 1]). //Другой

строить();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</скрипт>

<!– Конец тега GPT –>

Шаг 5. Теперь последний шаг: вам нужно определить или назначить сопоставление размеров для каждого из рекламных блоков.Давайте возьмем один здесь, а затем я покажу вам, что добавить и где.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

Шаг 6: Теперь вам нужно добавить этот фрагмент кода .defineSizeMapping(mappingadunitname)между синей и красной частями кода выше. то есть перед точкой

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

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Шаг 7. Добавление аналогичного сопоставления для всех остальных рекламных блоков даст вам окончательный код.

<!– Запустить тег GPT –>

<скрипт>

window.googletag = window.googletag || {команда: []};

googletag.cmd.push(функция() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //рабочий стол

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //планшет

addSize([0, 0], [1, 1]). //Другой

строить();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //рабочий стол

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //мобильный

addSize([0, 0], [[320, 50], [1, 1]]). //Другой

строить();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //мобильный

addSize([0, 0], [[300, 250], [1, 1]]). //Другой

строить();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //планшет

addSize([0, 0], [1, 1]). //Другой

строить();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</скрипт>

<!– Конец тега GPT –>

Примечание. Части кода выделены, чтобы подчеркнуть, какая карта размеров использовалась для того или иного рекламного блока.

Шаг 8: Теперь давайте посмотрим на сопоставление размеров:

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //рабочий стол

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //планшет

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //мобильный

addSize([0, 0], [[300, 250], [1, 1]]). //Другой

строить();

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

Шаг 9: Теперь мы говорим это в первой строке:

Если ширина браузера равна или превышает 992 пикселя, покажите размеры объявлений 728 × 280, 728 × 90, 336 × 280, 300 × 250 или 1 × 1.

И в последней строке мы говорим:

Если ширина браузера равна или превышает 320 пикселей, покажите размеры объявлений 320 × 50, или 320 × 100, или 320 × 200, или 300 × 250, или 1 × 1.

No.s, 992px, 768px и 320px будут работать для большинства веб-сайтов, поскольку они соответствуют обычным размерам браузеров для компьютеров, планшетов и мобильных устройств.

Однако, если у вас есть веб-сайт с планшетом и мобильной темой, вы можете спросить своего разработчика, какой размер браузера вызывает переход темы, а затем вы можете добавить этот размер вместо 768 пикселей и 320 пикселей соответственно.

Какова ваша алгоритмическая стратегия получения дохода на 2019 год?

В MonetizeMore мы помогаем издателям получать больше дохода от существующих рекламных ресурсов.Мы являемся ведущим издательским партнером Google и предлагаем набор решений для монетизации для издателей, которые помогают нашим клиентам достигать поставленных целей по доходам и решать проблемы с рекламными операциями.

Хотя вполне возможно настроить адаптивные рекламные блоки DFP самостоятельно, важно учитывать альтернативные издержки.Стоит ли тратить время, которое вы могли бы потратить на развитие своего бизнеса, рискуя потерять доходы из-за неправильной настройки?

Если вам нужна помощь в настройке адаптивных рекламных блоков DFP.Зарегистрируйте премиум-аккаунт на MonetizeMore уже сегодня!

Связанные чтения:

AdSense предлагает адаптивные рекламные блоки
Лучшие типы мобильной рекламы в 2016 году
Преимущества ускоренных мобильных страниц Doubleclick для издателей
Как подготовить издателей к тому, что расходы на мобильную рекламу превосходят десктопную
Doubleclick теперь предлагает кросс-девайсное отслеживание и нативную рекламу для мобильных рекламодателей и издателей