Background HTML5Creative

Описание

Background HTML5Creative — формат, позволяющий реализовать замену фона на странице сайта на изображение или HTML креатив.

Возможности:
* показ фонового изображения по краям сайта, а также со сдвигом контента сайта;
* добавление нескольких кнопок для перехода на разные страницы сайта рекламодателя (только для HTML креатива);
* гибкая настройка дополнительных элементов на сайте, перекрывающих фоновое изображение;
* настройка положения фонового изображения в момент скролла контента сайта.

С помощью одного шаблона "Background HTML5Creative" можно добавить background на сайт двумя способами:
1. подготовить только фоновое изображение и ссылку для перехода. Важно, чтобы вес фонового изображения не превышал допустимое ограничение в аккаунте.
2. подготовить HTML креатив в редакторах Adobe Animate CC или Google Web Designer, соблюдая требования по вставке кода, обрабатывающего клик по баннеру и подсчитывающего события в баннере. Также можно подготовить к HTML коду дополнительно фоновое изображение, которое будет показано, если в браузере отсутствует поддержка HTML5.

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

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

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

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

Подготовьте ваш проект с 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. В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере.

Пример переменной с ошибкой:

exportBase = new lib.Новый?1_2016721();

Пример корректной переменной:

exportBase = new lib.New?1_2016721();

9. Формат готового проекта — zip архив.

При подготовке HTML креатива для фона по краям сайта рекомендуем использовать две картинки: одну для левого края, вторую для правого.
Часть фона, которая будет находится под контентом сайта, должна быть равна ширине контента сайта и ее необходимо сделать прозрачной, для этого установите background-color=alpha 0.

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). При публикации проекта прозрачно-голубая область видна не будет.

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

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

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

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

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

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

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

Если background добавляется только фоновым изображением, тогда поля "Архив с HTML5 креативом" и "HTML5 код креатива" оставьте пустыми.

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

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

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

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

  3. Цвет фона — цвет в формате HEX, который будет задан как цвет фона в элементе body.

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

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

  6. HTML5 код креатива — оставьте поле пустым, так как содержимое html-кода будет автоматически загружено из архива с проектом.

  7. Изображение — загрузите фоновое изображение, которое будет показано либо как самостоятельный баннер (если баннер разработан без HTML креатива), либо как картинка-заглушка (если в браузере отсутствует поддержка HTML5).

  8. Ширина креатива (px) – ширина креатива с указанием размерности, включает в себя ширину контента сайта и ширину двух боковых изображений;

  9. Высота креатива (px) — высота креатива с указанием размерности;

  10. Ширина сайта (px) — ширина контента сайта с указанием размерности.
    На сайтах, поддерживающих масштабирование контента, размещение баннера BackGround невозможно.

  11. Сдвиг контента (px) — высота сдвига контента сайта для показа фонового изображения над контентом сайта. По умолчанию задано: 0px;

  12. ID элемента, после которого осуществлять сдвиг — идентификатор элемента, после которого будет осуществлен сдвиг (элемент должен находиться внутри элемента, в который размещаем background - например, body или "ID главного элемента").

  13. Сдвиг креатива по оси X (px) — величина сдвига креатива по горизонтали в px (можно использовать отрицательные значения). По умолчанию задано: 0px.

  14. Сдвиг креатива по оси Y (px) — величина сдвига креатива по вертикали в px (можно использовать отрицательные значения). По умолчанию задано: 0px.

  15. z-index при курсоре мыши над сайтом — z-index, который будет использоваться для расположения фонового изображения на самом нижнем слое в момент нахождения указателя мыши над областью контента сайта. По умолчанию: -1.

  16. z-index при курсоре мыши над креативом — z-index, который будет использоваться для расположения фонового изображения на самом верхнем слое в момент нахождения указателя мыши за пределами контента сайта. По умолчанию: 999999.

  17. ID элементов за пределами сайта (укажите через разделитель |) — идентификаторы элементов, которые не должны перекрываться фоновым изображением.

  18. ID элементов в пределах сайта, с переходом (укажите через разделитель |) — идентификаторы элементов, которые находятся в области контента сайта, но являются прозрачными (сквозь них видно креатив), и при клике на них, так же должен осуществиться переход по ссылке.

  19. Позиция фона (absolute или fixed) — настройка положения фонового изображения в момент скролла контента сайта:
    "absolute" - фон будет скроллиться вместе с сайтом;
    "fixed" - фон будет стоять на месте при скролле сайта.

  20. ID главного элемента — идентификатор элемента, в который будет размещен backgroound (по умолчанию фоновое изображение размещается в body).

  21. Дополнительные стили для body — css-стили, которые будут добавлены к элементу body на странице (стили будут применены для body, вне зависимости от того, какой элемент задан в качестве главного элемента для размещения background).