Html5 баннер как сделать

[Видео] Создание HTML5 баннеров для рекламы в Google Web Designer

Руководство по созданию анимированных HTML5 баннеров для Яндекс.Директа, Google Рекламы и других рекламных сервисов с помощью Google Web Designer.

Данное видео — часть лекции из моего курса по основам контекстной рекламы в системах Яндекс.Директ и Google Ads (2019).

Как часто вам приходилось ставить техническое задание веб-дизайнеру на разработку графических объявлений для контекстной рекламы в Яндекс.Директ и Google Реклама? Нечасто? Тогда, скорее всего, вы пользуетесь встроенным конструктором Яндекса, который позволяет автоматически создавать графические объявления в различных размерах (1000×120, 728×90, 480×320, 336×280 и т.д.), или не используете графические объявления в принципе.

Конструктор креативов в Яндекс.Директе

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

Адаптивные медийные объявления в Google Рекламе

Бывает такое, что изображения на сайте не находятся. Тогда их можно загрузить с компьютера или из фотобанка. Но можно поступить хитрее – создать графические объявления в Яндекс через конструктор, а далее выгрузить полученные изображения и загрузить баннеры в Google Ads. Однако есть различия в размерах графических объявлений. Те, которые подходят для Яндекса, не всегда подходят для Google, и наоборот. Лучший вариант – один раз заказать у специалиста креатив в различных размерах, отдельно для Google Рекламы, отдельно для Яндекс.Директ, и на время забыть об этом.

Все это верно, когда речь идет о статических объявлениях. Но самые «продвинутые» компании и рекламодатели используют в продвижении своих продуктов не только изображения, но и динамические форматы – видео, gif-ки, флеш, HTML5. О последнем формате контента и будем говорить подробнее.

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

Примеры HTML5 баннеров

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

• они показываются одинаково на всех типах устройств;
• они меньше весят и быстрее загружаются, чем тот же flash;
• HTML5 предоставляет больше возможностей для добавления в баннер различных интерактивных элементов — форм, кнопок, полей и т.д.;
• HTML5 – тренд у специалистов по трафику последних 2-3 лет. Те, кто разбирался в HTML, CSS и JavaScript, имел существенное преимущество по сравнению с другими.

Ключевое слово – ИМЕЛ. С появлением на рынке продукта Google Web Designer ситуация существенно поменялась. Теперь каждый из нас может легко создавать интерактивные объявления для контекстной рекламы без дополнительных знаний в HTML, CSS и JavaScript.

Что такое Google Web Designer?

Google Web Designer (GWD) – это бесплатная программа (выпущена в 2013 году), которая позволяет создавать объявления в формате HTML5. Мы будем использовать ее для создания стильных анимированных объявлений в Яндекс.Директ и Google Ads под все типы устройств.

В GWD есть как редактор кода, так и визуальный редактор. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript, и XML.

Переходим к скачиванию программы. Зайдите на сайт и нажмите на кнопку Скачать Google Web Designer.

Google Web Designer

Поддерживаются Mac OS 10.10 (и более поздних версий), Windows 7 (и более поздних версий), 64-разрядная версия Linux (Debian/Ubuntu/Fedora/openSUSE). Подробнее о системных требованиях здесь.

На следующем шаге примите пользовательское соглашение. Начнется автоматическая загрузка, после которой вам нужно будет установить программу на свой компьютер. После установки Google Web Designer поприветствует диалоговым окном, в котором можно:

• создать новый файл;
• использовать готовый шаблон объявления;
• открыть существующий файл;
• обратиться к справке Google.

Объявления HTML5 в Google Рекламе доступны не для всех рекламодателей. Вы можете отправить запрос на использование объявлений HTML5, если ваш аккаунт отвечает следующим требованиям:

• имеет хорошую репутацию в отношении соблюдения правил;
• имеет хорошую репутацию в отношении оплаты рекламных услуг;
• общая сумма потраченных средств за все время существования аккаунта составляет не менее 1000$.

Ваша заявка будет рассмотрена командой Google Рекламы в течение примерно 5-7 рабочих дней, после чего вы получите уведомление по электронной почте. А пока вы можете использовать объявления AMPHTML и адаптивные медийные объявления.

HTML5 баннер: что такое и как создать

У нас случились HTML5-баннеры. Клиентам резко их захотелось. Мы обычно делаем в gif, так быстрее. Но если уж сильно хочется, то можно. С ними мы разобрались, заодно и вам поможем понять, что за зверь такой — этот html5 баннер и как его приручить.

Что такое HTML5 баннер?

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

В чем главный плюс баннеров в html5?

1. Креативная и привлекательная анимация, создающаяся за небольшое количество времени. Согласитесь, html5 баннеры в сравнении со статичными jpg-овскими изображениями и даже gif-ками выглядят свежо.
2. Возможность встраивания в баннер кликабельных кнопок: кнопка вызова и sms, карты, ссылки на социальные сети, календари и т.д. Интегрировать можно что угодно, даже приложения.
3. Не придется разбираться в коде. Свои html5 баннеры мы делаем в Google Web Designer, программа сама генерирует код. Удобно, если для вас код — это просто набор странных цветных символов и букв. Но у собранного программой кода есть пара нюансов, про которые мы поговорим чуть позже.
4. Легкий вес html5 баннера даже несмотря на анимацию в нем. А легкий вес баннера, как мы знаем, не влияет на скорость загрузки страницы.
5. А еще html5 баннеры — это тренд (:

Где создавать html5 баннер?

Баннеры можно собирать на разных сервисах с шаблонами, типа Canva или Bannersnack. Есть специальные конструкторы, такие как Adobe Animate, но за подобные сервисы надо платить.

А можно сделать как ТРУ-дизайнер в Google Web Designer. И вот почему:

1. Несложный интерфейс самого Google Web Designer: почитал инструкцию, потыкал и, считай, уже разобрался.
2. Легко и быстро создать простенькую, но красивую анимацию. А если уж сильно постараться, то и не простенькую создать тоже получится.
3. Google Web Designer бесплатный (:

Нюансы при создании html5 баннеров

Собрать сам баннер html5 не так уж и сложно, если есть обывательские навыки в Photoshop (:
А вот правильно «собрать»‎ код уже сложнее:

1. Изучите технические требования от площадки на которой хотите разместить баннер. Иначе будете биться в истерике, когда баннер не захочет загружаться в рекламную кампанию.
2. Не пренебрегайте поиском информации в интернетиках, если не понимаете как, куда и зачем вставлять скрипты. Как говорится, Гугл (или Яндекс) в помощь.
3. Обратите внимание на начальные настройки: если вы планируете размещать html5 баннер в Яндекс.Директе, а создаете его в Google Web Designer, то в пункте «платформа» выберите «внешнее объявление». Иначе Яндекс будет ругаться на внешние ссылки от Google. У них между собой какие-то терки, но лезть мы в это, конечно же, не будем (:
4. Следите за объемом документа. Если архив получится «жирненьким» — он не пройдет и это не из-за того, что «кто-то слишком много ест!». Запоминаем: и в Яндекс.Директ, и в Google Ads размер файла не должен превышать 150 КБ.

Лайфхаки от дизайнера

Зацикленная анимация

Если вы создали крутую анимацию, где все картинки летают, а ваша душа радуется — помните, что необходимо её зациклить, чтобы другие смогли любоваться вашей работой бесконечно.

Сделать это можно в несколько простых шагов:

Добавляем событие в завершающей части вашей анимации, кликая на рабочую зону правой кнопкой мыши:

Теперь переходим к началу временной шкалы, добавляем ярлык подобным образом и присваиваем ему имя, например, «start»:

Затем нам снова предстоит путешествие в конец шкалы времени, чтобы добавить событие к только что созданному ярлыку:

В выпадающем окне выбираем «Временная шкала» — «gotoAndPlay» — получатель: page1 — ярлык «start» и нажимаем «ОК»

Поздравляем, теперь вашими трудами можно любоваться бесконечно!

Работа с кодом для правильной выгрузки в Яндекс.Директ

Пожалуй, самый щепетильный момент в создании html баннеров — работа с кодом. Для облегчения вашей жизни мы подготовили простую инструкцию:

В интерфейсе Google Web Designer заходим в режим кода;

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

Далее нам нужно «завернуть» рабочую область в ссылку с определенным идентификатором и вызвать метод «getClickURLNum» как показано в следующих действиях:

Находим тело баннера в коде и «заворачиваем» его в ссылку, добавляя строчку сразу после

Ниже вызываем указанный на фото метод, его можно скопировать из справочной информации Яндекс.Директа в разделе «Медийная кампания» —«Требования к HTML5-баннерам»

Проделав данные методы с кодом, html5 баннер без проблем загрузится на рекламную площадку. Желаем успехов!

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

Автор: Ксения Лазарева — специалист по интернет-рекламе

Автор: Мария Климовских — дизайнер

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.
4. По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An — для последующего редактирования файла в программе.
5. Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Есть и несколько недостатков:

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

Больше статей на схожую тематику:

• Как подготовить рекламную кампанию в Яндекс Директ к праздникам
• Яндекс Директ vs Яндекс Бизнес: где размещать рекламу?
• Товарные видео в Директе: что представляет из себя рекламный инструмент

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 недостаточно для полноценного обучения функционалу.

Примеры роста кликов, конверсий, заказов и прибыли:

• Продажа недвижимости в Грузии – как получать лиды с помощью Яндекс.Директ и квиз-лендинга
• Как сделать ROI 1712% в B2B-мебели и выйти на оборот 2 000 000 за месяц с помощью Яндекс Директ и аналитики?
• 59 заявок на воздушные полеты с контекстной рекламы за месяц

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

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

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

3

0

0

0

2

Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×

HTML-баннер (HTML5)

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

Примечание: В случае необходимости показывать баннер при доскролле до баннерного места, можно воспользоваться кодом Poster или специальным кодом Ajax. В остальных случаях используйте стандартные коды 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. Технические требования для учета клика

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

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

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

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

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

Для учета кликов и перехода по ссылке, отличной от указанной в интерфейсе, в функцию ar_callLink может быть передан параметр other , содержащий альтернативный адрес перехода:

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

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

в каком окне открывать ссылку. Возможные значения: _blank (новое окно), _top (в этом же окне), _self (в iframe с баннером)

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

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

Во всех указанных случаях клики по всем ссылкам с баннера будут учитываться в статистике самого HTML-баннера, загруженного в AdRiver.

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

3.2 Валидация на соответствие требованиям Adriver

Для проверки html-файла вы можете воспользоваться специальной утилитой Adriver: перейти на сайт.

4. Загрузка баннера

1. Подготовьте баннер согласно п. 2 и п. 3 инструкции
2. Добавьте баннер:
   • для баннеров на коде IFrame — баннер соответствующей ширины и высоты;
   • для баннеров на коде Extension — special—>extension—>flash-extension
   • для баннеров на коде Poster — special—>poster—>flash-poster
   • для баннеров на коде Ajax — special—>AjaxJS—>Flash-AjaxJS
3. Укажите ссылку на сайт рекламодателя в поле Линк Баннера . При необходимости, укажите другие параметры
4. Щелкните Добавить баннер . Вы попадете на страницу редактирования параметров баннера
5. Включите баннер (галочка Вкл. ), укажите распределение в течение дня, задайте необходимые ограничения по количеству показов/кликов. При необходимости, настройте другие параметры. Для сохранения введенных настроек щелкните Сохранить
6. Кликните по ссылке Загрузить баннер
7. В поле HTML с помощью кнопки Обзор выберите HTML-файл вашего баннера
8. В полях Ширина и Высота укажите ширину и высоту вашего баннера. При необходимости, заполните другие поля
9. В поле Дополнительная компонента с помощью кнопки Обзор добавьте все дополнительные файлы баннера (изображения, js-файлы или медиа-файлы)
10. Щелкните Загрузить

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

Примечание: Для HTML-баннеров на кодах Extension / Poster / Ajax существует альтернативный способ загрузки – загрузка баннера как generic вместе с управляющим скриптом. Подробнее .

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

4.2.1. HTML-баннер на коде Poster / Extension

1. Распакуйте пример.
2. Откройте текстовым редактором файл script.js . Внесите изменения в верхнюю часть скрипта, отмеченную как Editable block :

var ar_width = '240'; var ar_height = '400'; var ar_gif_pixel = '';