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.1 и ниже

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

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

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

  3. Обработка клика.
    1. Чтобы вся область баннера была кликабельна и имела одну ссылку для перехода, добавьте в первом кадре анимации код:
      canvas.style.cursor = "pointer";
      canvas.addEventListener("click", function() {
          window.callClick();
      })
    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. Если необходимо вызвать событие из анимации без перехода используйте следующий код:
      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). При публикации проекта прозрачно-голубая область видна не будет.

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

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

    • если используется одна кнопка перехода:
      callClick();
    • если кнопок перехода несколько:
      callClick(n);
    • если необходимо вызвать событие из анимации без перехода используйте следующий код:
      callEvent(n);
      где n — номер события, которое должно быть вызвано.

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

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

    Примечание. При добавлении баннера в 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) — высота сдвига контента сайта для показа фонового изображения над контентом сайта. По умолчанию задано: 0 px;
  12. ID элемента, после которого осуществлять сдвиг — идентификатор элемента, после которого будет осуществлен сдвиг (элемент должен находиться внутри элемента, в который размещаем background — например, body или ID главного элемента).
  13. Сдвиг креатива по оси X (px) — величина сдвига креатива по горизонтали в px (можно использовать отрицательные значения). По умолчанию задано: 0 px.
  14. Сдвиг креатива по оси Y (px) — величина сдвига креатива по вертикали в px (можно использовать отрицательные значения). По умолчанию задано: 0 px.
  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-стили (кроме стилей: display, background-color), которые будут добавлены к элементу body на странице (стили будут применены для body, вне зависимости от того, какой элемент задан в качестве главного элемента для размещения background).