HTML-5 баннер для Яндекс Директ в Google Web Designer

Приветствую, друзья! На связи Евгений Тридчиков и в этом видео мы разберем загрузку HTML-5 баннера в Яндекс Директ. Смотрите видео в конце записи – там все понятно!

Я буду использовать баннер фиксированного размера с разрешением 300х250 пикселей, который мы создали в прошлом уроке с помощью Google Web Designer. Если рекламные материалы у вас еще не готовы, обязательно посмотрите это видео.

Для демонстрации попробуем загрузить баннер без изменений. HTML-5 баннеры в Директе поддерживает “Медийная кампания”. Переходим в группу, “Добавить баннер”, “Загрузить креативы”, кнопка “Загрузить”. Выбираем .zip на компьютере.

Есть ошибки!

Как видите, баннер не отвечает требованиям системы. Посмотрим, что не так. Зафиксировано три ошибки:

  • отсутствует вызов метода getClickURLNum(),
  • отсутствует мета-тег размера,
  • и присутствует внешняя ссылка на стороннюю библиотеку, что запрещено.

Чтобы устранить ошибки, перейдем по ссылке “Технические требования”, а затем “Требования к HTML-5 баннерам”. Как видите, здесь есть пример мета-тега, который указывает размер баннера, и пример вызова недостающего метода. Ну а как решить вопрос со сторонней библиотекой я вам сейчас покажу.

Требования к HTML5-баннерам в Яндекс Директ: https://yandex.ru/support/direct/products-cpm-campaign/requirements.html#requirements

Возвращаемся в Google Web Designer и открываем наш баннер. Перейдем в “Режим кода”. Как вы помните, при создании документа мы определили контекст как Google Adwords. Дело в том, что контекст задает не только нормативы для “Инспектора объявлений”, но и подключает библиотеки DoubleClick Studio по умолчанию. Это и вызывает ошибку при загрузке в Яндекс Директ.

Устраняем ошибку #1

Чтобы решить эту проблему наверняка, сделайте следующее. Создайте новый баннер с теми же настройками, но в качестве контекста укажите “Внешнее объявление”. Такой тип документа не содержит подключения внешних .js библиотек.

В окне нашего баннера выделите все слои на временной шкале, нажмите сочетание клавиш Command + C на Mac (то есть скопируйте их), перейдите в окно нового документа и нажмите сочетание клавиш Command + V (то есть вставьте их).

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

Устраняем ошибку #2

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

Устраняем ошибку #3

Вызов метода getClickURLNum() заключается в том, чтобы завернуть рабочую область в ссылку с каким-то идентификатором. А затем вызвать метод getClickURLNum() для элемента с данным айди.

Поэтому переходим в “Режим кода”, находим тело баннера и заворачиваем его в ссылку. Ниже вызываем указанный метод. Я далеко не ходил, а просто скопировал пример из справочной информации. Отлично.

Устраняем ошибки и готовим баннер

Сохраняем баннер, возвращаемся в интерфейс медийной кампании и пробуем загружать отредактированный креатив. Как видите, на этот раз все в порядке. Осталось задать конечный URL, произвести настройки аудитории и можно ожидать модерации.

С модерацией тоже могут быть непредсказуемые моменты, как и в Adwords. Рекомендую обратить внимание на качество текста и кнопок на баннере, вес в килобайтах, исключить зацикливание анимации, учитывать местную валюту при указании цен.

В остальном вам нужно дождаться модерации первого баннера. Если все в порядке, можно заниматься всей партией и загружать скопом. Как видите, ничего сложного, а вы переживали. В следующем видео мы разберем создание адаптивных баннеров HTML-5.


https://youtu.be/1E4uW9YVKXc

Если видео получилось полезным, поделитесь с коллегами и смотрите дальше. С вами был Евгений Тридчиков и я желаю вам великолепного дня!

comments powered by HyperComments
(4 оценок, среднее: 3,50 из 5)
Загрузка ...
Блог Евгения Тридчикова