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

Баннеры 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-баннеры, видео и аудио.