Новая инструкция по добавлению html5 css баннеров. HTML5-Баннеры

1. Карточка баннера

Описание:

баннер со встроенной графикой, HTML-формами, несколькими ссылками.

Тип кода:

фреймовый, Poster, Ajax, Extension.

Подробнее:

HTML-баннеры реализуют графические объекты и интерактивные механизмы взаимодействия с пользователями. HTML-баннер может состоять из нескольких объектов. Это могут быть изображения (простые картинки), Flash-анимации, фрагменты HTML-кода. Например, в одном баннере может быть несколько ссылок, в зависимости от того, куда кликнет посетитель, он попадает на разные страницы сайта.

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом . В остальных случаях используйте стандартные коды Ajax или Extension.

2. Подготовка баннера

Подготовьте HTML-код баннера. Это может быть любой HTML-код, в том числе HTML 5, представляющий собой HTML верстку баннера с CSS стилями и JavaScript-кодом. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера, а не подключать отдельными файлами. Однако в случае необходимости использование отдельных файлов также допускается. Можно использовать как абсолютные ссылки на файлы, подгружаемые в баннер (различные изображения и Flash-файлы), так и относительные.

Важно: При использовании относительных путей к файлам, необходимо, чтобы все файлы баннера в обязательном порядке находились в той же папке, что и сам подготавливаемый HTML-файл. Т.е. не должно фигурировать дополнительных папок для изображений, js-файлов или медиа-файлов. Названия всех файлов баннера должны соответствовать .

Примечание: Для баннеров на коде IFrame (размерных) HTML-файл баннера обязательно должен называться index.html .

Примечание: Если баннер использует дополнительные скрипты, их название должно быть отлично от script.js . Название script.js зарезервировано за управляющим скриптом баннера.

3. Учет кликов в баннере

По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в HTML-файл баннера необходимо внести изменения согласно одной из следующих инструкций:

• Прошивка на клик для HTML-креативов
• Откройте текстовым редактором HTML-файл баннера. Подключите файл html.js :

  Если баннер расположен на стороннем сервере, укажите полный путь до файла html.js :

  Примечание: Скачивать плагин html.js или создавать его самостоятельно не требуется. Данный плагин размещается на серверах AdRiver и достаточно просто подключить его в подготавливаемом файле.

• Для учета кликов и перехода по ссылке, указанной в системе при загрузке баннера (поле Линк баннера ), используйте функцию ar_callLink . Вызов функции может быть осуществлен при любом событии для любого тэга в коде баннера, например: Перейти на сайт

  Перейти на сайт

  Возможные параметры:

  объект события (click, mousedown и т.п.). При передаче данного параметра, в кликовую ссылку добавятся координаты клика внутри IFrame с баннером

  Все параметры опциональны.

• для подсчета кликов по ссылкам в HTML-баннере с помощью кликовой ссылки AdRiver

Также можно воспользоваться инструкцией . Однако в этом случае клики считаются в отдельном баннере и отображаются в расширенной статистике баннера, но не отображаются в статистике кампании или сценария.

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

Примечание: Для HTML-баннеров на кодах вместе с управляющим скриптом. Подробнее .

4.2. Загрузка HTML-баннеров на кодах Extension / Poster / Ajax как Generic-баннеров 4.2.1. HTML-баннер на коде Poster / Extension

Распакуйте .

Откройте текстовым редактором файл script.js . Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block : var ar_width = "240"; var ar_height = "400"; var ar_gif_pixel = "";

Переменные:

ширина баннера. Укажите ваше значение

высота баннера. Укажите ваше значение

вызов стороннего счётчика. Если не требуется - оставьте значение пустым

Сохраните файл script.js

Откройте текстовым редактором файл index.html из архива. Скопируйте HTML код вашего баннера и вставьте в файл index.html в указанном месте:

Если в баннере используются буквы русского алфавита, то

Одним из вариантов распространения рекламы, которая может быть доступна каждому, являются HTML5 баннеры – полноценные страницы, анимированные и с интерактивными элементами. В отличие от других способов привлечения посетителей, именно этот действует просто безотказно. Сегодня такой вариант считается наиболее востребованным рекламным веб-форматом. И на это есть ряд объективных причин, определенных весомым списком преимуществ и прежде чем заказать Html5 баннер рекомендуем узнать о данном формате подробнее.

Достоинства Процесс создания

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

Интернет заполонён рекламой. На многих сайтах это вырвиглазная реклама щёток для похудения, на других это Яндекс.Директ или Google AdSense. И лишь на некоторых можно увидеть красивые баннеры, которые не раздражают пользователей одним своим видом. Из моего обзора вы узнаете, как самостоятельно создать красивый HTML5-баннер без каких-либо начальных навыков.

bannersnack – онлайн-сервис для создания HTML5 и Flash-баннеров разнообразного формата, не требующий знания кода и навыков работы с редакторами изображений.

Сервис предлагает создать баннеры двух типов: обычный или случайный баннер при загрузке страницы. Также при помощи banersnack можно запустить свою рекламную кампанию в Google или Facebook. Но обо всём по порядку.

Banner maker

Именно в этом разделе вы можете создать свой первый баннер. Сервис предлагает баннеры в формате HTML5 или Flash. Поскольку Flash все стараются "убить", я опишу редактор HTML5.

При запуске мастера сразу же предлагаются несколько готовых шаблонов:

Конечно же, возможность создать баннер с нуля никуда не исчезает. Вверху мастера указывается размер будущего баннера:

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

При создании своего баннера открывается вот такой редактор:

Слева список всех слайдов баннера, на каждом из которых будет своя картинка и текст. Вверху инструменты для создания баннера, а справа свойства слоя.

В качестве баннера можно добавить свою картинку, текст, кнопку, фигуру или видео. Я добавил картинку и кнопку:

При выборе любого элемента будет предложено несколько шаблонов, но, как всегда, последнее слово за вами:

У каждого слоя есть три вкладки свойств. Положение на странице, цвет, форма и тому подобное:

Действие по клику на слое:

Можно указать переход к следующему слайду или переход по ссылке.

Свойства анимации при смене слайда:

Когда вы закончили редактировать свой баннер, просто нажмите Save и выберите имя будущего баннера:

Затем откроется список всех ваших баннеров с кодами для вставки на сайт:

Важно отметить, что при изменении баннера на сайте bannersnack, он также обновится и на вашем сайте. Копировать код вставки заново не нужно.

Banner rotator

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

Мастер предлагает выбрать из уже созданных баннеров или создать новый:

При добавлении своей картинки можно задать лишь URL перехода:

После чего остается опять же получить код вставки на сайт:

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

Привет, значит задача стоит такая: «Создать адаптивный HTML баннер, который будет подстраиваться под различные размеры экрана, у него будет счётчик оставшегося времени и кнопка закрыть и всё это должно ещё и клики считать, чтобы собирать статистику о переходах по ТТ Adriver».

Сначала разберёмся, какие собственно самые востребованные форматы есть при создании таких баннеров:

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

FullScreen баннеры — баннеры, которые вы могли видеть в метро или на сайте wifi , данные баннеры раскрываются на весь экран, имеют счётчик и кнопку закрытия. Для создания таких баннеров мы просто подготавливаем статичную картинку или простую gif анимацию(не более 600КБ) и далее верстаем всё на HTML.

FullScreen Баннер

FullWidth баннеры — уже интереснее, но на самом деле это просто обычный HTML5 баннер, только растягивающийся на 100% ширины экрана, но имеющий при этом фиксированную высоту. В таких баннерах часто используется анимация и они уже создаются в таких программах, как google web designer , Adobe Edge Animate , Adobe Animate CC . Лично я активно юзаю Edge Animate, он удобнее, быстрее и есть возможность быстрой выгрузки в HTML5. При создании таких баннеров, изначально делается раскадровка с вариантами того, как этот баннер будет выглядеть при разных размерах экрана, выглядит всё это дело примерно так:

Раскадровка баннера на 100% ширины

Баннер с фиксированным размером или статичный — ну это совсем просто. Тут создаётся просто креатив или раскадровка и всё, что остаётся сделать — это прописать код для счёта кликов. Для создания таких баннеров я часто использую Adobe Photoshop или Edge Animate — если это анмиация. Никогда не используйте тут GIF! Вы никогда не сможете выгрузить gif анимацию в размере до 600КБ, а если анимация весит больше, то её не пропустят. Обычный HTML баннер не дотянет по весу и до 200КБ, а значит, что тут можно творить по полной.

Раскадровка баннера с фиксированными размерами

Гайд по созданию FullScreen баннера по всем правилам

Создание такого баннера подразумевает, что его размер будет изменяться при измении размера экрана, а значит он будет занимать всю его площадь, примерно так:

Это значит, что изображение должно одианово хорошо смотреться на всех устройствах, от сюда вывод, что оно должно быть достаточно хорошего качества и размер приближен к квадрату (фиксированных размеров нет, тут всё довольно лояльно). В даный момент мы оринтируемся на мобильнуе устройства(mobile) и планшеты(tablet), потому берём прямоугольник, для просмотра в портретном режиме(portrait). Заходим в Photoshop и создаём документ необходимого размера, в данном случае это 536х714 :

Gif исходник для создания FullScreen баннера

Я создал гифку из двух кадров, вес у неё 242КБ, вес у нас всегда должен быть до 600КБ, помним это. Теперь нам необходимо превратить это в собственно баннер на HTML. Открываем инструкцию по созданию FullScreen баннеров , берём из неё технические требования и закрываем, она написана очень коряво. Забудьте про Flash, он пал смертью храбрых, у нас только HTML5, потому нам нужны технические требования для создания баннеров на коде Ajax.

Ограничений по вёрстке нет, тут мы вольны творить всё, что нам вздумается, главное, чтобы присутствовали основные атрибуты, а именно: Читался клик с баннера, был счётчик и крестик для закрытия. Для коддинга я использую бесплатную программ Sublime Text .

Открываем HTML файл из моего шаблона и видим:

Стандартный код баннера FullScreen

Кнопка закрыть

Как же читается сам клик с баннера? И почему мы не прописывали ниаких ссылок на страницы, на которые должен вести баннер? Так вот… Система Adriver позволяет прописывать ссылки для перехода на сайт, после загрузки баннеров в систему, получается у нас в исходнике мы лишь прописываем переменную, которая заменяется при загрузке в систему сама, уже не наша работа. В данном случае у нас клик прописывается для всего контейнера, в котором находится наш баннер, в общем всё, что мы помещаяем в у нас является баннером и с этого считываются клики. Для других баннеров, другие технические тредования и там клик считывается по-другому, сечас мы рассматриваем конкретный пример.

Контейнер с баннером

В других уроках я расскажу, как создать баннер на 100% ширины экрана с анимацией и как по всем правилам создать и подготовить макет для вёрстки сайта.

Файлы из урока:

Готовые баннеры FullScreen: клик

Баннер (англ. banner - флаг, транспарант) - графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом, так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило, может содержать гиперссылку на сайт рекламодателя или страницу с дополнительной информацией. Задачи у баннера следующие. Во-первых, продавать товар. А значит — привлечь внимание посетителя, заинтересовать потенциального клиента рекламируемой товаром или услугой, подтолкнуть к переходу на сайт и побудить к действию (Call To Action). Именно CTA и является конечной целью рекламы. И, во-вторых, задачей баннера является имиджевая или брендовая реклама, цель которой повысить узнаваемость бренда и составить положительный имидж о бренде.

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

• Графический - простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.
• Флеш-баннер - имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.
• 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 .

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

• Функционал не ограничен никакими программами, можно реализовать что угодно.

Недостатки :

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

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

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

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

• Множество доступных видеоуроков в Сети по использованию программы.
• Простой функционал, большинство процессов автоматизированы.
• Программа не требует знаний HTML5, JavaScript и CSS3.
• По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images - папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An - для последующего редактирования файла в программе.
• Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Недостатки :

• Интерфейс только на английском языке.
• С 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, но возможности у программ различаются.

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

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

Недостатки :

• Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
• Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

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

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

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

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

Недостатки :

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

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