Технические ошибки при создании баннера
Баннеры HTML5
Перед созданием баннера в формате HTML5 ознакомьтесь со списком требований на странице Баннеры HTML5.
- Некорректно работает баннер с расхлопом на мобильной Главной. Что делать?
-
Попробуйте следовать следующим рекомендациям:
- Для изготовления баннера не рекомендуется использовать Adobe. Баннеры с расхлопом, созданные через Adobe, обычно некорректно работают в iOS.
- Если в Adobe вы используете элементы в 320 px шириной и более, убедитесь, что HTML/JS/CSS-файлы, созданные такими элементами, работают корректно. При необходимости, скорректируйте JS/CSS-файлы.
- Для элементов, которые должны растягиваться по ширине, установите ширину 100%. Не используйте элементы с фиксированной максимальной шириной 1080 px — это часто является причиной ошибок при отображении в iOS.
- Для элементов, которые при уменьшении размера баннера, должны обрезаться по краям (например, элементы фона), используйте стиль
overflow:hidden;
.
- Как самостоятельно проверить баннер с расхлопом для мобильной Главной?
-
- Установить браузер (например, Я.Браузер).
- Подготовьте комплекты (папки) с HTML-файлами до раскрывающегося блока и после раскрывающегося блока, например «HTML_small» — до раскрывающегося блока и «HTML_big» — после.
- Откройте в браузере баннер из папки «HTML_small».
- Запустите консоль в браузере (в Я.Браузера консоль запускается по клавише «F12»), выберите режим эмуляции мобильных устройств и нужное устройство из списка. Убедитесь, что баннер выглядит корректно:
- Откройте в браузере баннер из папки «HTML_big» и снова перейдите в режим консоли. Убедитесь, что баннер выглядит корректно.
- В адресной строке браузера в режиме консоли (баннер с раскрывающимся блоком должен быть открыт) добавьте ссылку для перехода, например
?link1=https://yandex.ru/
. Кликните по баннеру и проверьте, что произошел переход на страницуhttps://yandex.ru/
.
- По клику открывается сразу два окна. Как исправить?
- Чтобы по клику на баннер не открывалось два окна, не пишите
href="#"
иonclick
вместе, потому чтоonclick
делает переход с учетом указанных технических требований, аhref
открывает пустое окно. Пример корректного написания:<a id="click1_area" target="_blank" onclick="closeApi(event);">
. - Клик происходит по правой кнопке, а не по левой. Как исправить?
- Стандартный баннер HTML5.Для чистого JS событие в
onclick
срабатывает в ответ на нажатие любой кнопки мыши. Добавьте в код проверку клика по левой (первой) кнопке:// Проверяем, что клик только по левой кнопке. if(e.which==1 ){ window.open(yandexHTML5BannerApi.getClickURLNum(1)); }
В среде Adobe Animate CC добавьте такую проверку:this.btn.addEventListener("click", fl_ClickOnButton); function fl_ClickOnButton(e) { if (e.nativeEvent.button == 0){ // Проверяем, что клик только по левой кнопке. window.open(yandexHTML5BannerApi.getClickURLNum(1)); } return false; }
- Баннер с раскрывающимся блоком на Главной странице Яндекса.
Вместо метода
window.open(yandexHTML5BannerApi.getClickURLNum(1)
вызовите методhomeExpandableDesktopBannerAPI.click_and_close(click_num);
. Используйте вызов клика, который требуется в определенной инструкции для баннера. - Баннер с раскрывающимся блоком на мобильной версии Главной страницы Яндекса.
Вместо метода
window.open(yandexHTML5BannerApi.getClickURLNum(1)
вызовите методhomeExpandableMobileBannerAPI.click_and_close(1)
. Используйте вызов клика, который требуется в определенной инструкции для баннера.
- Долго подгружается баннер. Как исправить?
- Задержка может быть связана с тем, что анимация начинается только после загрузки всех требуемых ресурсов. Минимизируйте число файлов в архиве:
- объедините изображения в лист спрайтов, или вставьте эти изображения в формате
base64
для JS; - если у вас много js-файлов, создайте из них один js-файл.
Flash-баннеры
Перед созданием баннера в формате flash ознакомьтесь со списком требований на странице Flash-баннеры, видео и аудио.
- Переход по ссылке должен происходить только после клика на flash-баннер (событие
onRelease
). При клике на flash-баннер рекламируемый сайт должен открываться в новом окне браузера. - Все ссылки для перехода добавляются в исходный файл (.FLA).
Неправильная ссылка
Правильная ссылка
on(release) { getURL(_http://www.vash-url.ru, "_blank"); }
on(release) { getURL(_root.link1, "_blank"); }
Неправильная ссылка
Правильная ссылка
on(release) { getURL(_http://www.vash-url.ru, "_blank"); }
on(release) { getURL(_root.link1, "_blank"); }
Внимание.Ссылку
root.link1
не надо заменять ссылкой на страницу рекламодателя. - Информация о фоне и рамке баннера указывается в подложке swf-файла.