Подготовка креативов в HTML редакторах

"Английская версия"

Описание

Для подготовки HTML креативов к размещению в ADFOX важно соблюсти требования по вставке кода, обрабатывающего клик по баннеру и подсчитывающего события в баннере.
При разработке HTML кода можно использовать редакторы, для которых написана данная инструкция:
- 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, otf, ttf, abf, acfm, gdr, etx, eot, fnt, fon, mf, ttc, woff;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
- 300Кб;
- 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере.
9. Формат готового проекта — zip архив.

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;
}

Если в баннере с цикличной анимацией имеется несколько кнопок, то в коде вызова событий 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.btnLeft.addEventListener("click", function (e) {
            var t = e.nativeEvent;
            if (t.which == 1 || t.button == 0) {
                window.callClick(n);
            };
        });
    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. Публикация проекта.

Важно! При предпросмотре проекта в браузере через (Ctrl-Enter | Cmd-Enter) к ссылкам в названиях файлов в HTML дописываются рандомные значения вида ?1468231208369. Такие значения должны быть исключены из проекта при его загрузке в ADFOX.
Для этого, финальный проект в редакторе должен быть опубликован через File > Publish Settings > Publish (Shift-Ctrl-F12 | Shift-Cmd-F12).

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

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

После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон "HTML5Creative".

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. Публикация проекта.

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

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

После публикации проекта, он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон "HTML5Creative".

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. Публикация проекта.

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

После публикации проекта он должен быть архивирован в формат .zip, после чего добавлен в ADFOX через шаблон "HTML5Creative".

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

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "HTML5Creative".
Далее загрузите ваш проект в поле "Архив с HTML5 креативом", поле "HTML5 код креатива" должно оставаться пустым.
Оно будет заполнено содержимым .html файла вашего проекта уже после добавления баннера в систему.

Параметры баннера:

  1. Архив с HTML5 креативом - поле для загрузки .zip архива с проектом;

  2. HTML5 код креатива - содержимое .html кода из архива с проектом (загружается автоматически из архива);

  3. URL перехода - укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://);

  4. "TARGET" ссылки - определяет в каком окне открывать ссылку:
    "_top" - в текущем окне;
    "_blank" - в новом окне или вкладке, в зависимости от настроек браузера.

  5. Ссылка на промерочный пиксель - укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой;

  6. HTML код креатива - содержимое основного html файла проекта;

  7. Картинка - заглушка (URL) - ссылка на изображение;

  8. Ширина креатива (px|100%) - ширина креатива;

  9. Высота креатива (px|100%) - высота креатива;

  10. Стили для блока баннера - укажите стили для блока div, в котором находится код баннера. Формат записи стилей - inline CSS. Например, для размещения баннера по центру: margin: 0 auto;

  11. Callback функция - имя функции на стороне сайта, которая будет вызвана при удачном отображении баннера;