Требования к html5-баннерам

Требования к html5-баннерам

Баннер HTML5 – объявление, которое включает анимационный элемент. Данный формат размещается в социальных сетях Одноклассники и Мой Мир и на проектах Mail.Ru.

Для создания объявления необходимо ввести целевую ссылку, выбрать пакет «Баннер 240х400 (HTML5)» в социальных сетях и сервисах. Затем – загрузить ZIP-архив, соответствующий техническим требованиям, и добавить нужное количество ссылок. Важно, чтобы количество ссылок, зашитых в баннере, совпадало с количеством в форме создания объявления.

Технические требования к HTML5-баннерам

  • .zip архив должен содержать .html файл и все используемые ресурсы;
  • Разрешено использование ресурсов следующих типов .png, .jpg, .jpeg, .gif, .css, .js, .svg;
  • Максимальный размер .zip архива: 150 Kb;
  • Имена файлов должны быть латиницей;
  • Текстовые файлы должны иметь кодировку utf-8;
  • Обязательно наличие кликабельной области с макросом %link1% в качестве целевого URL;
  • Ссылки должны открываться в новом окне;
  • Обязательно наличие тега с указанием размера креатива;
  • Должен корректно работать в браузерах: IE 10+, Firefox 14+, Safari 5+, Chrome 18+;
  • Для неподдерживаемых браузеров необходимо обеспечить показ упрощенной версии баннера или gif-заглушки;
  • Запрещается обращение к внешним ресурсам.

Пример кода ссылки для баннера с одной ссылкой:

link1

Пример кода ссылки для баннера с несколькими ссылками (максимум 5):

Пример meta-тега (для баннера 240х400):

Требования к рекламным материалам

Технические требования к баннеру HTML5 в Яндекс.Дисплее

  1. Формат присылаемых данных — ZIP-архив.
  2. Размер архива не должен превышать 150 килобайт.
  3. Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

В архивах будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.

Для имени файлов и директорий допустимо использовать только такой набор символов:
-._

, цифры и латинский алфавит.

  • Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.
  • Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 50.
  • Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.
  • Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.
  • Переходы в баннере должны получать адрес перехода на сайт рекламодателя таким вызовом yandexHTML5BannerApi.getClickURLNum(1) для первого клика, yandexHTML5BannerApi.getClickURLNum(2) для второго клика и т.д.

    Переходы в баннере должны использовать значение параметра linkN из get параметров URL к HTML-документу следующим образом: link1 для первого клика, link2 для второго и т.д. Можно использовать такой код:

    Посмотреть, как выполнен данный пункт, можно в коде образца.

  • Размер файла баннера указывается в теге следующим образом:
  • Сразу после тега должно быть включение рекламной библиотеки Яндекс:
  • В рекламных материалах разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Edge Animate CC , Adobe Flash CC HTML5 Canvas , CreateJS , GreenSock , Swiffy и другие.
    Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.
  • Отдельно к архиву должна быть приложена картинка-заглушка и ALT-текст (до 100 символов). Картинка проходит отдельную модерацию, включая размер. Картинка и текст будут использоваться для показа в браузерах, не входящих в список поддерживаемых из п.7.
  • Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).
  • Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).
  • Предполагается, что банер должен вести себя одинаково, единообразно, во всех окружениях, на всех платформах, на все открытия всем пользователям, за все время кампании.
  • Рекламный баннер должен отвечать требованиям по загрузке CPU 1 .
  • Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 3-10.
  • Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).
  • При подготовке баннера не допускается использование графических элементов низкого качества, в том числе:
    — деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла,
    — изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.
  • Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла — 2 мегабайта.

    Обращение к роликам должно быть URL JS вызовом начиная с 1. Например для ролика 1
    var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);

    Воспроизведение должно быть явно инициировано пользователем. Должна быть возможность в любой момент остановить и возобновить воспроизведение. Должен быть указан размер видеофайла. Не допускается воспроизведение звука отдельно от видео. В целях безопасности и ускорения загрузки видеофайл будет размещен на серверах Яндекса.

    Рекламодатель может сделать подсчет запусков просмотра видео, для этого при нажатии кнопки проигрывания видеоролика должен отрабатывать такой javascript вызов:
    Для ролика 1: yandexHTML5BannerApi.reportVideoStart(1);
    Для ролика 2: yandexHTML5BannerApi.reportVideoStart(2);

    Дополнительно к рекламным материалам могут загружаться видеоролики в формате MP4 (если они разрешены в продукте). Максимально допустимый размер видеофайла — 2 мегабайта.

    Обращение к роликам должно быть по параметру URL videoN начиная с 1. Например, для ролика 1 url_video1 = getUrlParam(‘video1’);

    Воспроизведение должно быть явно инициировано пользователем. Должна быть возможность в любой момент остановить и возобновить воспроизведение. Должен быть указан размер видеофайла. В целях безопасности и ускорения загрузки видеофайл будет размещен на серверах Яндекса.

    Рекламодатель может сделать подсчет запусков просмотра видео, для этого при нажатии кнопки проигрывания видеоролика должен отрабатывать такой javascript вызов:
    Для ролика 1: yandexInbannerVideoEventApi.reportVideoStart(1);
    Для ролика 2: yandexInbannerVideoEventApi.reportVideoStart(2);

    Пример готового баннера HTML5 доступен для скачивания по ссылке. В коде образца можно посмотреть, как выполнены пункты 5, 8, 9, 10, 11 и 12.

    1. Для целей размещения баннеров в формате HTML5 Яндексу должны быть переданы файлы следующих форматов:
      • Flash (.SWF)
      • HTML5 (.html) — результат конвертации в программе swiffy flash-баннера изготовленного на условиях, изложенных в документе «Flash-баннеры, аудио и видео. Требования к рекламным материалам».
      • картинка-заглушка (размер зависит от требования, предъявляемого к размеру (пикселов) конкретного баннера). Формат GIF, JPEG или PNG
      • альтернативный текст для баннера

      Все файлы, относящиеся к одной единице рекламы, должны иметь одно и то же имя.

    2. Flash-баннер, который используется рекламодателем для конвертации в формат HTML5, должен соответствовать требованиям, изложенным в документе «Flash-баннеры, аудио и видео. Требования к рекламным материалам», включая требования, изложенные в п. 3 указанного документа.
    3. При позиционировании элементов flash-баннера (изображений, текстов и другого контента) не допускается использование дробных координат. Координаты элементов flash-баннера должны быть прописаны целыми числами.
      Это необходимо для того, чтобы текст и изображения при конвертации в HTML5 сохраняли четкость. Для автоматического округления дробных значений координат до целых чисел можно использовать скрипт для среды flash, файл pixel_round.jsfl доступен для скачивания по ссылке.
    4. Максимальный размер flash-баннера до конвертации в формат HTML5 не должен превышать 60 килобайт. Размер файла HTML5, полученного в результате конвертации через swiffy, может превышать 60 килобайт.
    5. Flash-баннер не должен содержать видео и аудио.
    6. Файл в формате HTML5 должен быть сконвертирован без каких-либо дополнительных правок и изменений.
    7. Рекламодатель должен самостоятельно проверить файл HTML5 на ошибки в проигрывании и показе, и подтвердить, что результат конвертации соответствует исходному flash-баннеру.
    8. Файл в формате HTML5 должен отвечать требованиям по загрузке CPU 1 .
    9. Рекламные материалы (формат баннер) должны отвечать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», включая, но не ограничиваясь требованиям пп. 3-10 указанного документа.

    Технические требования к баннеру HTML5 в Яндекс.Директе

    1. Формат присылаемых данных — ZIP-архив.
    2. Размер ZIP-архива не должен превышать 150 килобайт.
    3. Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

    В архивах будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store, Thumbs.db. Они создаются при архивировании на платформах Apple Mac OS X и для работы рекламных материалов не нужны.

    Для имени файлов и директорий допустимо использовать только такой набор символов:
    -._

    , цифры и латинский алфавит.

  • Все ссылки в рекламных материалах должны быть относительными путями в ZIP-архиве. При отработке рекламных материалов не должно быть внешних сетевых обращений. При необходимости все вспомогательные JS-библиотеки должны предоставляться вместе с рекламными материалами.
  • Нужно минимизировать число файлов в архиве. Изображения объединить в лист спрайтов. При необходимости можно объединить все JS/CSS/Image-документы и включить их в HTML-файл. Максимальное число файлов — 20.
  • Рекламные материалы должны корректно работать в браузерах Internet Explorer 9 и выше, Firefox 14 и выше, Safari 5 и выше, Chrome 14 и выше, Opera 14 и выше, Яндекс.Браузер 14 и выше, Microsoft Edge. При необходимости в файле должна учитываться функциональность браузера, необходимая для его работы.
  • Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя левой кнопки мыши на баннер.
  • По клику на баннер будет открываться страница, указанная в поле Ссылка на сайт на странице создания или редактирования группы объявлений. Переход на эту страницу должен генерироваться в баннере вызовом метода yandexHTML5BannerApi.getClickNum(1) .
  • Размер файла баннера указывается в теге следующим образом:

    Доступны следующие размеры: 160×600, 240×400, 240×600, 300×250, 300×300, 300×500, 300×600, 320×50, 320×100, 320×480, 336×280, 480×320, 728×90, 970×250, 1000×120.

  • В рекламных материалах разрешены внешние ссылки на библиотеки jQuery и библиотеки, указанные на странице https://tech.yandex.ru/jslibs/.
    Для того чтобы внешние ссылки были допустимы в баннере, они должны вести только на сайт производителя библиотеки.
  • Запрещается использовать раздражающее вредоносное поведение скриптов: например, вызовы для самопроизвольного открытия pop-up, смены адреса страницы и т.п. Запрещено использование расширений для браузера (flash/java и др.).
  • Рекламный баннер не должен быть приведен к виду, затрудняющему анализ (обфусцирован).
  • Предполагается, что баннер должен вести себя одинаково, единообразно, во всех окружениях, на всех платформах, на все открытия всем пользователям, за все время кампании.
  • Рекламный баннер должен отвечать требованиям по загрузке CPU 1 .
  • Рекламные материалы должны соответствовать требованиям, изложенным в документе «Баннерная реклама. Требования к рекламным материалам», в пп. 4-10.
  • Анимация баннера не должна мешать пользователю и затруднять восприятие основного содержания страницы сайта (в дизайне запрещено использовать резко перемещающиеся и мелькающие графические элементы, мигающий фон и т. д.).
  • При подготовке баннера не допускается использование графических элементов низкого качества, в том числе: — деформированных изображений и изображений с помехами (артефактами) вследствие сжатия файла, — изображений с низким разрешением (на изображении видны пиксели), изображения с низкой четкостью графики.
  • Использование аудиороликов не поддерживается.
  • Использование видеороликов не поддерживается.
  • Максимальное количество знаков в ссылке, содержащейся в баннере (URL), не должно превышать 1024 знаков.
  • Ссылки (URL) на сайт (адрес страницы, которая открывается по клику на баннер) принимаются только в кодировке UTF-8.
  • 1. Для тестирования уровня загрузки процессора рекламными материалами используется специально выделенный компьютер (Intel ® Core™2 Duo CPU [email protected] 2,53GHz, 2 ГБ оперативной памяти и 64-800 МБ видео памяти) c установленной 64-разрядной Windows 7 Профессиональная. Компьютер настроен стандартным образом для работы в офисе.
    Для тестирования загрузки процессора загружается специальная страница, содержащая только тестируемый баннер. Другие программы при этом не запущены.
    Для оценки загрузки используется стандартный TaskManager.
    При таком тестировании баннер не должен потреблять более 50% процессорных ресурсов согласно данным в закладке Performance в Task Manager (UpdateSpeed установлен в значение High).
    Считается, что баннер требует слишком много ресурсов, если загрузка более 50% ресурсов процессора происходит в течение заметного времени (доли/единицы секунд) или максимальная загрузка процессора в пике составляет более 70%.
    Оптимизация использования оперативной памяти не производится, дополнительные утилиты или резидентные программы при старте не загружаются. После входа в систему объем памяти, занятой различными системными процессами, составляет порядка 62-63 МБ по данным Task Manager.

    Требования к html5-баннерам

    Мы НЕ размещаем баннеры:

    • с элементами интерфейса

    • напоминающие рекламу порносайтов.

  • Внешние коды к размещению не принимаются.
  • Возможен независимый аудит показов и переходов с использованием следующих систем: AdHands, AdFox, AdRiver, DoubleClick, Gemius, Sizmek, TNS, Weborama, Adloox. Учет событий внутри баннеров (таких как проигрывание видео или наведение курсора на баннер) возможен с использованием только Adriver, Sizmek, Weborama.
  • Управления анимацией не должно существенно нагружать процессор пользовательского компьютера. В качестве эталонного процессора используется Celeron 1.5 ГГц, баннер не должен использовать более 40% процессора в среднем и 60% в пике.
  • Требования к HTML5-баннерам

    1. .zip архив должен содержать .html файл и все используемые ресурсы
    2. Разрешено использование ресурсов следующих типов .png, .jpg, .jpeg, .gif, .css, .js, .svg
    3. Максимальный размер .zip архива: 150 Kb
    4. Имена файлов должны быть латиницей
    5. Текстовые файлы должны иметь кодировку utf-8
    6. Обязательно наличие кликабельной области с макросом %link1% в качестве целевого URL
    7. Ссылки должны открываться в новом окне
    8. Обязательно наличие тега с указанием размера креатива
    9. Должен корректно работать в браузерах: IE 10+, Firefox 28+, Safari 6+, Chrome 18+, Edge, Opera 15+
    10. Для неподдерживаемых браузеров необходимо обеспечить показ упрощенной версии баннера или gif-заглушки
    11. Запрещается обращение к внешним ресурсам
    12. Запрещено использование link1, link2… link10 в качестве названий файлов используемых в баннере

    Пример кода ссылки для баннера с одной ссылкой:

    Пример кода ссылки для баннера с несколькими ссылками (максимум 5):

    Пример meta-тега (для баннера 300х300):

    Требования к видео-баннерам с автостартом

    Видео в видео-баннерах проигрывается собственным плеером , со встроенными элементами управления (кнопки Play/Pause, включения/выключения звука). В плеере есть собственная библиотека статистики, позволяющая собирать статистику по видео, в соответствии со стандартом VAST:

    • Включение/выключение звука
    • Нажатия на кнопку Пауза/Воспроизведение
    • Просмотры видео: 25,50,75,100% досмотров

    На каждое событие может быть поставлен пиксел-аудит сторонней системы.

    • по умолчанию видео в баннерах запускается автостартом
    • видео-баннер может быть без звука (кнопка включения/выключения звука не показывается)
    • видео в баннере может быть зациклено (для зацикленного видео считается общее число просмотров видео до конца)
    • видео может занимать любую площадь баннера, смещено по вертикали или горизонтали (при размещении такого типа баннера следует указывать точные размеры видео и величины смещения в пикселах)

    Требования к видео-файлу:

    1. Хронометраж — не более 30 секунд;
    2. Максимальный объем — 2мб.
    3. Разрешение видеоролика — 640×360 или видео может занимать любую площадь баннера (например, 240х400 или 300х300).
    4. Требования к потоку:
      • Видео битрейт: 400-450 кбит/сек. Частота кадров: не более 25 кадров/сек.
      • Аудио битрейт: 80-100 кбит/сек. Уровень громкости не более 30дБ
      • Общий битрейт: 480-550 кбит/сек
    5. Формат видеороликов:
      • MP4 (MPEG-4): кодеки видео H.264, кодек аудио — AAC.
    6. Видео не должно вводить пользователя в заблуждение, то есть в нем не может содержаться кнопок, дублирующих сервисы и прочих элементов.
    7. Баннеры должны сопровождаться картинкой (GIF, JPG, PNG), соответствующей размеру рекламного места, для случая, когда у пользователя не установлен Flash.

    Требования к html5-баннерам

    Данный формат размещается в социальных сетях и на проектах Mail.Ru

    • Вводим целевую cсылку
    • Выбираем пакет «Баннер 240х400 (HTML5)» в социальных сетях и сервисах»
    • Загружаем ZIP-архив соответствующий техническим требованиям
    • Добавляем нужное количество ссылок.

    Важно чтобы количество ссылок зашитых в баннере совпадали с количеством ссылок в форме создания объявления.

    Поле Ссылка 1 соответствует link1 в баннере.

    Поле Ссылка 2 соответствует link2 в баннере.

    Поле Ссылка 3 соответствует link3 в баннере.

    Поле Ссылка 4 соответствует link4 в баннере.

    Поле Ссылка 5 соответствует link5 в баннере.

    Технические требования к HTML5-баннерам

    1. .zip архив должен содержать .html файл и все используемые ресурсы
    2. Разрешено использование ресурсов следующих типов .png, .jpg, .jpeg, .gif, .css, .js, .svg
    3. Максимальный размер .zip архива: 150 Kb
    4. Имена файлов должны быть латиницей
    5. Текстовые файлы должны иметь кодировку utf-8
    6. Обязательно наличие кликабельной области с макросом %link1% в качестве целевого URL
    7. Ссылки должны открываться в новом окне
    8. Обязательно наличие тега с указанием размера креатива
    9. Должен корректно работать в браузерах: IE 10+, Firefox 14+, Safari 5+, Chrome 18+
    10. Запрещается обращение к внешним ресурсам

    Пример кода ссылки для баннера с одной ссылкой:

    Пример кода ссылки для баннера с несколькими ссылками (максимум 5):

    Пример meta-тега (для баннера 240х400):

    В данный момент возможность создания формата доступна только юридическим лицам и медийным агентствам.

    Требования к HTML5-баннерам

    Технические требования

    HTML5-баннер — это ZIP-архив размером не более 150 КБ, содержащий один файл HTML и файлы JavaScript, JSON, CSS, JPEG, GIF, PNG, SVG. В названиях файлов и каталогов можно использовать только буквы латинского алфавита, цифры и символы -._

    В архиве может быть не более 20 файлов. Включите исходный код из файлов JavaScript, CSS, SVG в HTML-файл, а все растровые изображения объедините в один файл (атлас спрайтов).

    В архиве будет игнорироваться содержимое папки __MACOSX и файлы .DS_Store, Thumbs.db. Это вспомогательные файлы операционных систем, которые не нужны для работы баннера.

    Допускаются баннеры следующих размеров: 160×600, 240×400, 240×600, 300×250, 300×300, 300×500, 300×600, 320×50, 320×100, 320×480, 336×280, 480×320, 728×90, 970×250, 1000×120. Размер баннера укажите в элементе :

    По клику на баннер будет открываться страница, указанная в поле Ссылка на сайт на странице создания или редактирования группы объявлений. Переход на эту страницу должен генерироваться в баннере вызовом метода yandexHTML5BannerApi.getClickNum(1) .

    Все ссылки в баннере должны быть относительными и вести на другие файлы из архива.

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

    Требования модерации

    HTML5-баннер должен соответствовать правилам Директа:

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

    Рекламируемый сайт должен открываться в новом окне и только после клика левой кнопкой мыши по HTML5-баннеру.

    HTML5-баннер должен работать корректно и одинаково для всех пользователей на всех платформах в течение всей рекламной кампании в следующих браузерах: Яндекс.Браузер 14 и выше, Google Chrome 14 и выше, Mozilla Firefox 14 и выше, Opera 14 и выше, Internet Explorer 9 и выше, Microsoft Edge.

    В HTML5-баннере нельзя использовать видео- и аудиоролики, скрипты с раздражающим или вредоносным поведением (например, с появлением всплывающих окон, подменой адреса страницы и т. д.), расширения и плагины браузера (Adobe Flash и т. д.). Исходный код баннера не должен быть приведен к виду, затрудняющему анализ (обфусцирован).

    HTML5-баннер должен соответствовать требованиям к загрузке процессора.

    Подробнее о требованиях модерации к креативам медийной кампании.

    Требования к html5-баннерам

    Мы НЕ размещаем баннеры:

    • с элементами интерфейса

    • напоминающие рекламу порносайтов.

  • Внешние коды к размещению не принимаются.
  • Возможен независимый аудит показов и переходов с использованием следующих систем: AdHands, AdFox, AdRiver, DoubleClick, Gemius, MediaMind, TNS, Weborama. Учет событий внутри баннеров (таких как проигрывание видео или наведение курсора на баннер) возможен с использованием только Adriver, MediaMind, Weborama.
  • Требования к Flash-баннерам

    Баннеры должны сопровождаться картинкой (GIF, JPG, PNG) такого же размера для случая когда у пользователя не установлен Flash.

    Flash-баннер должен быть изготовлен c использованием Flash версии с 8 по 10 включительно (ActionScript 2.0 / ActionScript 3.0).

    Для учета переходов с flash-баннера в качестве ссылки необходимо использовать в баннере объект button со следующими параметрами:

    Открытие ссылки должно происходить в новом окне.

  • Материалы в формате flash не должны содержать кода, выполняющего функции, отличные от управления анимацией.
  • В частности запрещается взаимодействие баннера со страницей, с внешними сайтами, камерой, микрофоном, буфером обмена, работа с локальным хранилищем.
  • Запрещается применение техник затрудняющих анализ содержимого баннера.
  • Управления анимацией не должно существенно нагружать процессор пользовательского компьютера.
    В качестве эталонного процессора используется Celeron 1.5 ГГц, баннер не должен использовать более 35% процессора в среднем и 60% в пике.
    Рекомендации по изготовлению флэш-баннеров для выполнения этих требований.
    Эталонный баннер для сравнения загрузки процессора прямо на вашем компьютере. Загрузка процессора вашим баннером не должна превышать загрузку процессора эталонным баннером. Проверить баннер на соответствие техническим требованиям
  • Требования к HTML5-баннерам

    1. .zip архив должен содержать .html файл и все используемые ресурсы
    2. Разрешено использование ресурсов следующих типов .png, .jpg, .jpeg, .gif, .css, .js, .svg
    3. Максимальный размер .zip архива: 150 Kb
    4. Имена файлов должны быть латиницей
    5. Текстовые файлы должны иметь кодировку utf-8
    6. Обязательно наличие кликабельной области с макросом %link1% в качестве целевого URL
    7. Ссылки должны открываться в новом окне
    8. Обязательно наличие тега с указанием размера креатива
    9. Должен корректно работать в браузерах: IE 10+, Firefox 14+, Safari 5+, Chrome 18+
    10. Для неподдерживаемых браузеров необходимо обеспечить показ упрощенной версии баннера или gif-заглушки
    11. Запрещается обращение к внешним ресурсам

    Пример кода ссылки для баннера с одной ссылкой:

    Пример кода ссылки для баннера с несколькими ссылками (максимум 5):

    Пример meta-тега (для баннера 240х400):

    Требования к видео-баннерам:

    1. Внутрь Flash-баннера может быть встроен видеоплеер, к такому баннеру предъявляются общие требования к баннерам и Flash-баннерам.
    2. Требования к видео-файлу:
      • Хронометраж — не более 30 секунд;
      • Максимальный объем — 2мб.
      • Разрешение видеоролика — 640×360 или видео может занимать любую площадь баннера (например, 240х400 или 300х300)
    3. Требования к потоку:
      • Видео битрейт: 400-450 кбит/сек. Частота кадров: не более 25 кадров/сек.
      • Аудио битрейт: 80-100 кбит/сек. Уровень громкости не более 30дБ
      • Общий битрейт: 480-550 кбит/сек
    4. Формат видеороликов:
      • MP4 (MPEG-4): кодеки видео H.264, кодек аудио — AAC.
    5. Видео не должно вводить пользователя в заблуждение, то есть в нем не может содержаться кнопок, дублирующих сервисы и прочих элементов.
    6. Баннеры должны сопровождаться картинкой (GIF, JPG, PNG), соответствующей размеру рекламного места, для случая, когда у пользователя не установлен Flash.
    7. Пользователь должен иметь возможность в любой момент остановить/возобновить показ видео.
    8. В случае использования звука при просмотре видео, пользователю должна быть предоставлена возможность выключить звук. (на баннере должна быть кнопка «выключить звук» или ее аналог на протяжении всего действия ролика)
    9. Из соображений безопасности и надежности подгружаемое видео будет размещено на серверах Mail.Ru
    10. Ссылка на видеофайл будет передана в flash-баннер в параметре video1, примеры кода:

    Требования к видео-баннерам с автостартом

    Видео в видео-баннерах проигрывается собственным плеером , со встроенными элементами управления (кнопки Play/Pause, включения/выключения звука). В плеере есть собственная библиотека статистики, позволяющая собирать статистику по видео, в соответствии со стандартом VAST:

    • Включение/выключение звука
    • Нажатия на кнопку Пауза/Воспроизведение
    • Просмотры видео: 25,50,75,100% досмотров

    На каждое событие может быть поставлен пиксел-аудит сторонней системы.

    • по умолчанию видео в баннерах запускается автостартом
    • видео-баннер может быть без звука (кнопка включения/выключения звука не показывается)
    • видео в баннере может быть зациклено (для зацикленного видео считается общее число просмотров видео до конца)
    • видео может занимать любую площадь баннера, смещено по вертикали или горизонтали (при размещении такого типа баннера следует указывать точные размеры видео и величины смещения в пикселах)

    Требования к видео-файлу:

    1. Хронометраж — не более 30 секунд;
    2. Максимальный объем — 2мб.
    3. Разрешение видеоролика — 640×360 или видео может занимать любую площадь баннера (например, 240х400 или 300х300).
    4. Требования к потоку:
      • Видео битрейт: 400-450 кбит/сек. Частота кадров: не более 25 кадров/сек.
      • Аудио битрейт: 80-100 кбит/сек. Уровень громкости не более 30дБ
      • Общий битрейт: 480-550 кбит/сек
    5. Формат видеороликов:
      • MP4 (MPEG-4): кодеки видео H.264, кодек аудио — AAC.
    6. Видео не должно вводить пользователя в заблуждение, то есть в нем не может содержаться кнопок, дублирующих сервисы и прочих элементов.
    7. Баннеры должны сопровождаться картинкой (GIF, JPG, PNG), соответствующей размеру рекламного места, для случая, когда у пользователя не установлен Flash.

    HTML5- баннеры: для чего нужны и как можно их сделать

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

    Популярные виды объявлений на сайте:

    Графический — простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.

    Флеш-баннер — имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.

    HTML5-баннер —комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

    Главные отличия HTML от других типов баннеров

    По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:

    • Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера.
    • HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения.
    • Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
    • Для оценки эффективности баннеров на HTML5 можно просмотреть статистику в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.

    Существенным недостатком флеш-технологий стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.

    Способы создания HTML-баннеров

    Разработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.

    1. Создание фрейма с помощью CSS3 и JavaScript

    Фрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления.

    Также возможна реализация баннера через область «canvas», в которой разрабатываются анимации, рисунки, графики и даже игры при помощи JavaScript. Для ускорения разработки разрешается воспользоваться сторонними библиотеками, например CreateJS.

    • Функционал не ограничен никакими программами, можно реализовать что угодно.
    • Такой процесс довольно сложный и требует особых навыков верстки.
    • Большие трудозатраты по времени относительно других способов.

    See the Pen NaQEbx by Alexandr (@vinechka) on CodePen.

    2. Adobe Edge Animate

    Тем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, JavaScript и CSS3. Программа поддерживает импорт таких форматов, как .svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.

    Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:

    Основные преимущества Adobe Edge Animate:

    1. Множество доступных видеоуроков в Сети по использованию программы.
    2. Простой функционал, большинство процессов автоматизированы
    3. Программа не требует знаний HTML5, JavaScript и CSS3.

    По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An — для последующего редактирования файла в программе.

  • Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.
  • Есть и несколько недостатков:

    1. Интерфейс только на английском языке.
    2. С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.

    3. Adobe Animate CC

    Animate CC — это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.

    Интерфейс очень схож с Flash Professional, но возможности у программ различаются.

    Преимущества Animate CC:

    1. Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
    2. В отличие от Edge Animate программа Animate CC имеет большой выбор векторных кистей и возможность работы с растровой графикой.
    3. Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
    4. Имеется русскоязычная версия.
    5. Расширенные возможности экспорта файла в форматы: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.
    1. Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
    2. Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

    4. Google Web Designer

    Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords. Если мы посмотрим на окно создания нового файла, заметим, что в программу уже встроены размеры шаблонов рекламы.

    Преимущества Google Web Designer:

    1. Простой интерфейс.
    2. Наличие шаблонов для рекламы в google.
    3. Полностью бесплатная программа.
    4. Наличие русскоязычной версии.
    5. Заложен адаптивный дизайн баннеров, html-баннер будет отлично выглядеть в любом разрешении экрана.

    1. Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
    2. Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.

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

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

    Остались вопросы? Задавайте в комментариях. Поможем и советом и делом.
    Разработаем для вас баннеры или рекламную кампанию целиком »

    Смотрите так же:  Регистрируемый приказ днц
    108shagov.ru. Все права защищены. 2019