Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных » мы и поведаем, как сделать баннер.

Что такое баннеры

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

Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны » с тематикой ресурса:

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

• Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате JPEG или PNG . Характеризуются малым весом, не влияющим на скорость загрузки страницы.
• Анимированные баннеры – анимация создана с помощью GIF . Состоит из нескольких картинок, сменяющих друг друга с заданной частотой. Вес баннера зависит от количества используемых в нем изображений.
• Flash – в таком баннере анимация сделана на основе Flash . Она может реагировать на действия пользователя.

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

Существует много различных размеров баннеров для сайта. Но самыми популярными из них являются:

• 88 на 31 пиксель;
• 120 на 60 пикселей;
• 120 на 90 пикселей;
• 120 на 240 пикселей;
• 125 на 125 пикселей;
• 120 на 600 пикселей;
• 160 на 600 пикселей;
• 180 на 150 пикселей;
• 234 на 60 пикселей;
• 240 на 400 пикселей;
• 250 на 250 пикселей;
• 300 на 600 пикселей;
• 300 на 250 пикселей;
• 336 на 280 пикселей;
• 150 на 150 пикселей;
• 468 на 60 пикселей;
• 728 на 90 пикселей.

Признаки эффективного рекламного баннера

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

• Привлекать внимание пользователя – но это не значит, что баннер должен быть чересчур ярким и мигающим. Такая реклама вызовет у посетителя раздражение, а не внимание. Содержимое баннера должно ненавязчиво «намекнуть» пользователю о своем присутствии. Поэтому при подборе изображения и текста для него всегда должен учитываться психологический фактор;
• Вызвать интерес – баннеры для сайта должны вызывать у пользователя интерес к объекту рекламы. Товар или услуга должны быть поданы не только со вкусом, но и оригинально. Приветствуется использование легкого остроумия и юмора:

• Побуждение к переходу по ссылке баннера – достигается за счет эффекта некоторой таинственности и недосказанности,
  вложенного в содержимое баннера.
• Побуждение к заказу услуги или покупке – прежде всего, зависит от содержимого баннерной рекламы. Оно должно показывать самые лучшие стороны объекта рекламы или ту выгоду, которую может получить пользователь от его приобретения.
• Если баннер предназначен для повышения узнаваемости бренда и увеличения его имиджа, то рекламное содержимое должно навеивать потребителю чувство доверия. Но не вызывать при этом негативных ассоциаций.

Закономерности, которые стоит учитывать перед тем, как размещать баннер на сайте:

• Чем больше баннер, тем выше вероятность перехода по нему пользователя. Самым эффективным размером считается 240 на 400 пикселей;
• Наибольшим эффектом обладает баннерная реклама, размещенная сверху (в шапке ). Также она может быть размещена сбоку или внизу страницы, но эффективность здесь несколько ниже;
• Анимированные баннеры способны быстрее привлечь внимание пользователя – интуитивно глаз человека реагирует на движение.

Создание и размещение рекламного баннера

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

Код большинства баннеров соответствует шаблону:

• a href=»/ссылка на сайт рекламодателя» – адрес ресурса, на который приведет пользователя щелчок по баннеру;
• title=»заголовок» – текст, отображающийся в сплывающей подсказке при наведении на область баннера;
• target=»_blank» – задает правила отображения сайта рекламодателя после перехода по ссылке баннера («_blank»- откроется в новом окне);
• rel=»nofollow» – запрещает поисковикам обработку этой ссылки;
• img src=»https://www.сайт/wp-content/uploads/путь к изображению» – задает путь к изображению, отображаемому в баннере;
• alt=»альтернативный текст» – текст, который будет отображен в баннере, если его рисунок не загружен.

Но не обязательно разрабатывать баннер самостоятельно. Для этого можно воспользоваться специальными онлайн-генераторами. Чтобы сгенерировать код баннера на таком сервисе, нужно заполнить несколько полей и нажать на кнопку:

Или можно заказать создание баннера в профессиональной студии. Тогда это обойдется дороже… Вот примерные расценки:

• Разработка обычного GIF баннера – от 25$;
• Создание баннера на основе Flash – 70-150$;
• Ресайз – примерно 50% от первоначальной его цены.

Но если немного помудрить, то можно сотворить простенький баннер самостоятельно. Вот какое чудо получается после десяти минут манипуляций с кодом html и изображением в Coreldraw :

Код баннера:

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

Вот что получилось:

Код примера:

Создание анимированных и видео баннеров

Рассмотрим на примере как сделать анимированный баннер с помощью программы Ulead GIF Animator .

В меню «Файл » выбираем пункт «Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:

Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр.

Баннер (англ. 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-баннеры пройдут модерацию на большинстве рекламных площадок, так как их технические требования соответствуют общим стандартам.

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

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

Создаём код баннера.

И так приступим. Первым делом, необходимо загрузить изображение в определённую папку, например «images», или создать любую другую, где будут храниться наши изображения для рекламы. Затем грузим туда картинки популярных форматов (jpg, gif, png). Теперь напишем путь для нашей картинки:

На этом коде говорится следующее. Тег заявляет браузеру, что данный элемент картинка, или изображения. Далее атрибут «srс» указывает путь к этому изображению. Затем идёт сам путь, это адрес сайта, папка «uploads» и непосредственно сам файл, который я назвал «banner_sitestroy» расширением «gif». После всего этого закрываем действие атрибута вот таким образом « />». Теперь необходимо указать следующее: ширину баннера (width), высоту баннера (height), альтернативный текст (alt=), текст при наведении, на изображение (title=) и поставить нулевое значение для бордюра (border="0"), что бы он случайно не появился в некоторых браузерах.

Gif" width="468" height="60" alt="banner_sitestroy.gif" title="Какой-то текс при наведении!!!" border="0" />

Получился вот такой, код и можем теперь открыть его в браузере и посмотреть, всё ли работает?

Рисунок №1.

Да всё работает, всё отлично, вот только он пока обычная картинка. Теперь необходимо добавить ссылку на сайт партнёра.

Здесь мы видим, тег , который говорит браузеру, что это ссылка, далее атрибут «href» означающий начало пути ссылки, сама ссылка и завершает всю церемонию, тег «target» с атрибутом «_blank», который откроет адрес партнера, в новой вкладке, не закрывая наш сайт. Весь этот код необходимо вставить перед кодом, картинки, а после её вставить закрывающий тег ссылки . В общем, что бы получилось вот так:

В общем, это готовый код для баннера 468х60, который можно скопировать, вставить реальные данные и он готов. Для баннеров других размеров, просто поменяйте значение «width» (ширина) и height (высота).

Так уж случилось, что мне нравится работать с CSS кодом, поэтому было интересно сделать кнопку ниже, которую можно использовать в качестве баннера, то есть сайт:

Шпаргалкаблоггера

Как сделать анимацию в Фотошопе.

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

• "Анимация",
• "Слои" (горячая клавиша F7),
• "Инструменты".

Для изображения в форматах BMP и PNG слои никак не сделать, поэтому нужно (для JPEG и GIF этот пункт пропускаем):

Рис.1 Перенести изображение в Фотошопе.

Из-за того, что стирать элементы проще, чем дорисовывать, то мы продублируем, выделив (Рис.2), интересующий нас слой.

Затем, выделив (см. синий фон) один из слоя и указав только на нём глаз, орудуем пипеткой (I) , для автоматического определения и установки выбранного цвета, и карандашом (B) для удаления ненужных фрагментов путём их закрашивания в палитру фона. При этой процедуре я люблю увеличивать масштаб фотографий: если посмотреть на Рис.1, то он равен 100%, а я указываю в 300%, чтобы не затронуть лишние элементы. Также полезной функцией является прозрачность слоя (Рис.2).

Затем для каждого кадра проставляем око (глаз) только на те слои, которые должны отображаться на нём.

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

Banner HTML5 - баннер, который отображает произвольное HTML-содержимое или изображение. HTML-код может представлять из себя обычную HTML страницу со стилями и скриптами. Он помещается в iframe и имеет ограниченный доступ к содержимому площадки.

С помощью шаблона "Banner HTML5 " баннер можно добавить двумя способами:
1. подготовив только изображение. Наличие ссылки для перехода в параметрах баннера регулирует кликабельность изображения.
2. подготовив HTML креатив в редакторе по инструкции: или .
Если в баннере добавлен и HTML-код и изображение, то будет показан HTML-код.

Параметры, настраиваемые при добавлении в ADFOX:
- Ширина, высота баннера.
- Собственные css-стили для контейнера с баннером.

Разработка HTML-креатива

1. Ознакомьтесь с требованиями к HTML-коду

• Максимально допустимый размер HTML-файла - 65 000 байт.
• JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
  - сохраните js и css код в отдельные файлы с расширением.js или.css;
  - файлы по весу не должны превышать 300Кб;
  - загрузите файлы во вкладку "Файлы" рекламной кампании и полученные ссылки на файлы подключите в HTML код.

  Пример подключения js и css файлов:

  В HTML-коде не допускается использование относительных путей к файлам.

• В проекте может находиться только один файл с расширением.html.
• Максимально допустимое количество файлов в проекте - 50;
• Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Максимальный размер каждого файла (действует также для файлов внутри архива):
  - 300Кб;
  - 1Мб для видео файлов.
• Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
• В названиях переменных и объектов нельзя использовать русские буквы.
  Исключение составляет только текст на баннере.
• Формат готового проекта - zip архив.

Требования к изображениям

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

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

Допустимые форматы изображений: png, gif, jpg, svg.
Максимальный вес одного файла: 300Кб.

2. Выберите редактор, в котором будете разрабатывать HTML креатив и кликните на соответствующую ссылку. Подготовьте архив с HTML-креативом по инструкции:

Редактор Adobe Animate CC - Баннер с одной кнопкой

Редактор Adobe Animate CC - Баннер с несколькими кнопками

1. Скачайте шаблон для баннера с несколькими кнопками

2. Создайте в Adobe Animate проект HTML5 Canvas (или откройте уже существующий)

3. При добавлении кнопок (buttons) или вложенных в сцену клипов (movie clips) важно задавать им instance name , чтобы потом можно было добавить клик к нужным кнопкам. Рекомендуем использовать названия button1 - button9 .

См. также:

Инструкция по добавлению кнопки и назначению instance name

Кнопка на главной сцене

1. Создайте на сцене какой-нибудь объект, например, с помощью Rectangle Tool.
Затем выделите его и в контекстном меню выберите "Convert to Symbol..."

2. В появившемся диалоговом окне выберите Type: Button, Name можно оставить без изменений, нажмите Ok.

3. Назначьте этой кнопке Instance Name, чтобы работал клик.

4. Пропишите в Actions для этой кнопки код:

Window.buttons.push(//Пропишите через запятую пути кнопок, добавив вначале this this.button1 //Конец места для кнопок);

Вложенная кнопка

1. Допустим, что кнопка находится внутри другого символа, например внутри Movie Clip.
В данном примере этому Movie Clip задано Instance Name "name"

2. По двойному клику перейдите внутрь name, там будет вложенная кнопка.

3. При указании в Actions пути до такой кнопки, нужно будет добавить Instance Name объекта после this, в который она вложена:

Window.buttons.push(//Пропишите через запятую пути кнопок, добавив вначале this this.name.button1 //Конец места для кнопок);

Инструкция по созданию прозрачных кнопок

1. Выделите нужный элемент и преобразуйте его в символ

2. Укажите название и выбирите Type: Button

3. С помощью двойного клика по символу перейдите в него:

4. Сделайте insert keyframe в кадр hit

5. Удалите содержимое кадров up, over, down

6. Прозрачная кнопка готова:

4. Добавьте в проект слой Actions (в него будем добавлять код для кнопок)

5. Откройте окно для написания кода

Window.buttons.push(//Пропишите через запятую пути кнопок, добавив вначале this //Конец места для кнопок); setAdfox();

Если кнопка находится в главной сцене, то пропишите её instance name сразу после this, например

This.button1

Если кнопка находится внутри вложенной сцены, то после this пропишите сначала instance name сцены, а потом уже instance name кнопки:

This.scene_instance_name.button2

Пример итогового кода в слое Actions:

Window.buttons.push(//Пропишите через запятую пути кнопок, добавив вначале this this.button1, this.scene_instance_name.button2 //Конец места для кнопок); setAdfox();

7. Первая кнопка в строке кода будет вызывать первую ссылку из ADFOX, вторая - вторую и так далее.

Вместе с HTML креативом передайте менеджеру, который будет добавлять баннер в ADFOX, информацию о соответствии кнопок и номеров ссылок.

8. Откройте параметры публикации и подключите шаблон из первого пункта и опубликуйте проект, выбрав нужную директорию.

9. После публикации проекта заархивируйте его в формате.zip. Ваш креатив готов для загрузки в баннер ADFOX.

Редактор Google Web Designer

Код данного баннера можно брать за основу при создании креативов в редакторе.

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N - номер события от 1 до 30.

2. Обработка клика.

Все события назначаются конкретным элементам анимации через вкладку "События".

Для вызова действий используется компонент "Интерактивная область".
Добавьте его и выберите событие Интерактивная область → Касание/нажатие (или "Tap Area > Touch/Click" в английской версии).

Во вкладке "Собственный код" укажите вызов функции клика.

2.1 Если используется одна кнопка перехода:

CallClick();

2.2 Если кнопок перехода несколько:

CallClick(n);

где n

2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:

CallEvent(n);

где n - номер события, которое должно быть вызвано.

Особенность реализации тянущегося (резинового) баннера.

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

Также используйте опции "Выровнять по контейнеру" и "Резиновый макет" на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить "Резиновый макет", то при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные – в пикселях.

4. Публикация проекта.

При добавлении баннера в ADFOX менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.

После публикации проекта заархивируйте его в формате .zip . Ваш креатив готов для загрузки в баннер ADFOX.

Другие редакторы

1. Подсчет кликов в баннере

Чтобы в ADFOX у баннера считалась статистика по кликам, необходимо в HTML-коде в теге а для атрибута href прописать переменную:

%banner.reference_user1%

Также для ссылок используйте атрибут target с переменной %banner.target% в значении атрибута.
Если атрибут отсутствует, то ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте.

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

Сайт рекламодателя

В HTML-коде баннеров, которые будут размещаться в мобильных приложениях, для учета кликов используйте макрос: %reference%@%banner.user1%

2. Подсчет кликов с нескольких ссылок в баннере

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

Первая ссылка Вторая ссылка

Замените значения атрибута href на переменные %request.reference%@%banner.eventN% , где вместо N должен быть номер события с 1 по 28.
Например:

Первая ссылка Вторая ссылка

Соответствие ссылок и переменных нужно сообщить менеджеру, добавляющему баннер в ADFOX. Так как при добавлении баннера нужно будет во вкладке "События" указать для События 1 первую ссылку, а для события 2 - вторую ссылку.

Добавление баннера в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Banner HTML5 " .

Укажите параметры баннера:

Архив с HTML5 креативом - загрузите.zip архив с проектом, поле "HTML5 код креатива" должно оставаться пустым (оно будет заполнено содержимым.html файла вашего проекта уже после добавления баннера).

HTML5 код креатива - загрузите zip-архив с проектом, подготовленный в HTML редакторах или вставьте HTML-код.

Если в баннере несколько ссылок, добавьте их во вкладке События у баннера, в поля URL перехода.
Соответствие номеров ссылок и событий уточняйте у разработчиков HTML креатива.

Ссылка на промерочный пиксель - по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif , при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

Ширина креатива (px или %) - укажите ширину баннера.

Высота креатива (px или %) - укажите высоту баннера.

Изображение - загрузите изображение.
Условия показа креативов:
- добавлен HTML-код и изображение - будет показан HTML-код.
- добавлено изображение - будет показано изображение.
- добавлен HTML-код - будет показан HTML-код.

Имя атрибута class контейнера баннера - укажите имя (или несколько имён через пробел) для атрибута class контейнера с баннером.

Использовать SafeFrame (yes|no) - safeFrame - это технология, которая оборачивает рекламу в специальный iframe, у которого есть строгий API. SafeFrame не даёт рекламе, которая в нём отрисовывается, собирать данные и взаимодействовать с остальной страницей вне safeFrame.
yes - включить использование safeFrame и запретить доступ к веб-странице;
no - не включать safeFrame. Код баннера имеет доступ к веб-странице.

Стили для блока баннера - произвольные стили для контейнера баннера одной строкой. Кроме стиля: display. Например, "border: 1px solid red;". Невалидные значения будут отброшены браузером.