Технические ошибки при создании баннера

Баннеры HTML5

Совет.

Перед созданием баннера в формате HTML5 ознакомьтесь со списком требований на странице Баннеры HTML5.

Некорректно работает баннер с расхлопом на мобильной Главной. Что делать?

Попробуйте следовать следующим рекомендациям:

  1. Для изготовления баннера не рекомендуется использовать Adobe. Баннеры с расхлопом, созданные через Adobe, обычно некорректно работают в iOS.
  2. Если в Adobe вы используете элементы в 320 px шириной и более, убедитесь, что HTML/JS/CSS-файлы, созданные такими элементами, работают корректно. При необходимости, скорректируйте JS/CSS-файлы.
  3. Для элементов, которые должны растягиваться по ширине, установите ширину 100%. Не используйте элементы с фиксированной максимальной шириной 1080 px — это часто является причиной ошибок при отображении в iOS.
  4. Для элементов, которые при уменьшении размера баннера, должны обрезаться по краям (например, элементы фона), используйте стиль overflow:hidden;.
Как самостоятельно проверить баннер с расхлопом для мобильной Главной?
  1. Установить браузер (например, Я.Браузер).
  2. Подготовьте комплекты (папки) с HTML-файлами до раскрывающегося блока и после раскрывающегося блока, например «HTML_small» — до раскрывающегося блока и «HTML_big» — после.
  3. Откройте в браузере баннер из папки «HTML_small».
  4. Запустите консоль в браузере (в Я.Браузера консоль запускается по клавише «F12»), выберите режим эмуляции мобильных устройств и нужное устройство из списка. Убедитесь, что баннер выглядит корректно:

  5. Откройте в браузере баннер из папки «HTML_big» и снова перейдите в режим консоли. Убедитесь, что баннер выглядит корректно.
  6. В адресной строке браузера в режиме консоли (баннер с раскрывающимся блоком должен быть открыт) добавьте ссылку для перехода, например ?link1=https://yandex.ru/. Кликните по баннеру и проверьте, что произошел переход на страницу https://yandex.ru/.

По клику открывается сразу два окна. Как исправить?
Чтобы по клику на баннер не открывалось два окна, не пишите href="#" и onclick вместе, потому что onclick делает переход с учетом указанных технических требований, а href открывает пустое окно. Пример корректного написания: <a id="click1_area" target="_blank" onclick="closeApi(event);">.
Клик происходит по правой кнопке, а не по левой. Как исправить?
  1. Стандартный баннер 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;            
    		}
  2. Баннер с раскрывающимся блоком на Главной странице Яндекса.

    Вместо метода window.open(yandexHTML5BannerApi.getClickURLNum(1) вызовите метод homeExpandableDesktopBannerAPI.click_and_close(click_num);. Используйте вызов клика, который требуется в определенной инструкции для баннера.

  3. Баннер с раскрывающимся блоком на мобильной версии Главной страницы Яндекса.

    Вместо метода window.open(yandexHTML5BannerApi.getClickURLNum(1) вызовите метод homeExpandableMobileBannerAPI.click_and_close(1). Используйте вызов клика, который требуется в определенной инструкции для баннера.

Долго подгружается баннер. Как исправить?
Задержка может быть связана с тем, что анимация начинается только после загрузки всех требуемых ресурсов. Минимизируйте число файлов в архиве:
  • объедините изображения в лист спрайтов, или вставьте эти изображения в формате base64 для JS;

  • если у вас много js-файлов, создайте из них один js-файл.

Flash-баннеры

Перед созданием баннера в формате flash ознакомьтесь со списком требований на странице Flash-баннеры, видео и аудио.

При создании баннера в формате flash необходимо учесть следующее:
  • Переход по ссылке должен происходить только после клика на flash-баннер (событие onRelease). При клике на flash-баннер рекламируемый сайт должен открываться в новом окне браузера.
  • Все ссылки для перехода добавляются в исходный файл (.FLA).

    Неправильная ссылка

    Правильная ссылка

    on(release) {
    getURL(_http://www.vash-url.ru, "_blank");
    }
    on(release) {
    getURL(_root.link1, "_blank");
    }
    Внимание.

    Ссылку root.link1 не надо заменять ссылкой на страницу рекламодателя.

  • Информация о фоне и рамке баннера указывается в подложке swf-файла.