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

Описание

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

При разработке HTML кода можно использовать редакторы:

• Adobe Animate CC;
• Google Web Designer;
• Adobe Edge Animate CC.

Примеры

• Пример готового проекта в Adobe Animate CC, исходный файл.
• Пример готового проекта в Google Web Designer, исходный файл.
• Пример готового проекта в Adobe Edge Animate CC, исходный файл.

Требования к HTML коду (для разработчиков кода)

Подготовьте ваш проект, соблюдая следующие требования:

1. Максимально допустимое количество символов в HTML коде — 65 000;
2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
   Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы: сохраните js и css код в отдельные файлы с расширением .js или .css;
3. В проекте может находиться только один файл с расширением .html;
4. Максимально допустимое количество файлов в проекте — 50;
5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
   — 300Кб;
   — 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
   Исключение составляет только текст на баннере.
9. Переменная, в которой будет храниться ссылка на рекламируемый сайт, должна содержать параметр `%reference%` вместо прямой ссылки;

Adobe Animate CC

1. Подготовка редактора.

Для создания нового проекта в AdobeAnimate CC выберите проект «HTML5 Canvas».

2. Скачайте шаблон:
— для Adobe Animate CC версии 15.2 и выше;
— для Adobe Animate CC версии 15.1 и ниже.

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

Для того, чтобы применить шаблон к проекту в настройках публикации выберите «Advanced Publish Settings -> Import New…».

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

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

3.1 Чтобы вся область баннера была кликабельна и имела одну ссылку для перехода, добавьте в первом кадре анимации код:

canvas.style.cursor = "pointer"; canvas.addEventListener("click", function() { window.callClick(); }); 

3.2 Чтобы добавить несколько кнопок для перехода с разными ссылками, то добавьте в верхнем слое анимации основную кнопку для клика по баннеру, присвойте кнопке имя экземпляра (Instance Name) и пропишите на кнопке код:

this.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); 

Добавьте остальные кнопки, при кликах на которые пользователь переводится на разные страницы рекламируемого сайта.
Разместите несколько кнопок в верхнем слое над определенными частями анимации, присвойте кнопкам имена экземпляра (Instance Name) и пропишите для каждой кнопки код:

this.btnLeft.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(n); }; }); 

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

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

this.btnText.addEventListener("mouseover", function() { window.callEvent(n); }); 

где mouseover — событие javascript, n — номер события от 1 до 30, которое должно быть вызвано.

Особенность создания цикличной анимации

В случае создания баннеров с цикличной анимацией в Animate CC (установлена галка «Временная шкала цикла»(«Loop Timeline») в настройках публикации), в коде вызова событий ADFOX добавьте код:

if (typeof(this.stopCycle) == "undefined") { 
this.btnMain.addEventListener("click", function (e) { 
var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); this.stopCycle = true; } 

Использование прозрачных кнопок.

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

Кнопки в Animate это символы, которые содержат четыре кадра. Вы можете оставить первые три пустыми и заполнить только последний «Клик» («Hit»), добавив в него содержимое (графический элемент) через Вставка > Временная шкала > Ключевой кадр ( Insert > Timeline > Keyframe).

Содержимое кадра «Клик» (Hit) является невидимым при этом оно определяет ту область кнопки, которая реагирует на клик. Добавить содержимое (графический элемент) на этот кадр можно через Вставка > Временная шкала > Ключевой кадр ( Insert > Timeline > Keyframe). Если остальные кадры остаются пустым или невидимыми, кнопка в рабочей области выглядит прозрачно-голубой и имеет форму того содержимого, которое содержится в следующем в кадре «Клик» (Hit). При публикации проекта прозрачно-голубая область видна не будет.

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

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, произведите настройки:
Выберите File > Publish Settings.
В табе Basic, выберите Make Responsive > Width, Height или Both.
Выберите Scale to fill visible area для просмотра вывода в полноэкранном режиме.
При выборе «Fit in view» контент будет масштабироваться вплоть до заполнения всего доступного места на экране, при этом соотношение сторон сохраняется. Так что если Максимальная ширина уже достигнута, то может остаться незаполненной область по высоте экрана и наоборот.

Если не удается прийти к желаемому результату с помощью настроек программы, используйте скрипты.
Приводим примеры кодов:
Скачать код для масштабирования с учетом соотношения сторон.
Скачать код для масштабирования без учета соотношения сторон.
Скачать код для позиционирования элементов, где an0..an4 — это Instance Name элементов.

Пример готового проекта в Adobe Animate CC, исходный файл

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

При публикации проекта выберите шаблон AdobeAnimate_Adfox_[template].html.

Google Web Designer

1. Скачайте шаблон баннера для 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 — номер события, которое должно быть вызвано.

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

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

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

Пример готового проекта в Google Web Designer, исходный файл.

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

Проект должен быть опубликован со следующими настройками:

Adobe Edge Animate CC

1. Скачайте шаблон баннера для Adobe Edge CC.

Для начала работы запустите файл с расширением .an из архива.

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

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

Для перехода по выбранному элементу необходимо выбрать событие click и прописать вызов функции клика.

Кнопкам необходимо присвоить имя экземпляра (Instance Name), например: btnMain, btnRight.

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

callClick(); 

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

callClick(n); 

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

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

callEvent(n); 

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

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

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

Есть также кнопки Scale Size и Scale Position для элементов на панели Position and Size

Пример готового проекта в Adobe Edge Animate CC, исходный файл.

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

Публиковать проект следует с такими настройками: