HTML-код, HTML5-код с расхлопом до FullScreen (HTML Expandable)

Описание

HTML-верстка баннера с возможностью расхлопа и схлопа, к которой могут быть подключены css стили и JavaScript-код.

Функциональные возможности баннера, задаваемые при добавлении в ADFOX:

  • размеры для свернутого и развернутого баннера указывается в пикселях или 100%;

  • 10 вариантов направлений рахлопа;

  • настройка количества показов в расхлопнутом виде;

  • установка количества авторасхлопов (показ баннера сразу в расхлопнутом виде) и возможность указания времени сессии для авторасхлопов уникальному пользователю;

  • установка скорости анимации расхлопа и схлопа баннера;

  • сдвиг контента при расхлопе.

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

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

  1. Максимально допустимое количество символов в HTML коде — 65 000.

    JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера.

    Если итоговый HTML-код превышает максимально допустимое количество символов, то уменьшите код за счет вынесения JavaScript и CSS в отдельные файлы:

    • сохраните js и css код в отдельные файлы (не более 5 файлов) с расширением .js или .css;
    • файлы по весу не должны превышать 300Кб.
  2. Подключение файлов к HTML-коду.

    Если в HTML-коде есть подключаемые файлы (js, css, картинки, flash), то вместо ссылок на файлы используйте переменные:

    %user1% Файл 1 — Файл 5. При создании баннера в ADFOX к нужным переменным менеджер загрузит файлы. Ссылки на файлы будут подставлены сервером в HTML-код с помощью переменных.
    %user2%
    %user3%
    %user4%
    %user5%
    Примечание. Все переменные вида %название_переменной%, такие как, например, %user1%, %reference%, %target%, %eventHTML1% и т.д. можно использовать только в поле HTML-код. В подключаемых файлах, переменные работать не будут, вместо переменных необходимо использовать абсолютные ссылки.

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

    <scripttype="text/javascript"src="%user1%"></script><link
                  rel="stylesheet" type="text/css" href="%user2%" />
    Примечание. Если файлов больше 5, то можно использовать абсолютные ссылки на файлы. При этом файлы должны быть доступны. Не допускается в коде использовать относительные пути к файлам.
  3. Подсчет кликов в баннере.

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

    %reference%

    Используйте атрибут target(_blank, _top, _parent) для ссылок, чтобы указать, в каком окне будет открыт сайт рекламодателя при клике.

    Если атрибут отсутствует, то ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте.

    Пример:

    <ahref="%reference%"target="%target%">Сайт
                    рекламодателя</a>
  4. Подсчет кликов с нескольких ссылок в HTML-баннере.

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

    <ahref="http://site.ru"target="_blank">Первая
                    ссылка</a><a
                  href="http://site.ru/about/" target="_blank">Вторая
                    ссылка</a>

    Прямые ссылки замените на переменные %reference% — чтобы в системе считалось общее количество переходов по баннеру.

    С помощью @%eventHTML1%-@%eventHTML29% переадресовываем пользователя на нужную страницу.

    После изменения получаем ссылки:

    <ahref="%reference%@%eventHTML1%"target="%target%">Первая
                    ссылка</a><a
                  href="%reference%@%eventHTML2%" target="%target%">Вторая
                    ссылка</a>

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

    Первая ссылка — http://site.ru%eventHTML1% (Событие 1).

    Вторая ссылка — http://site.ru/about/%eventHTML2% (Событие 2).

  5. Менеджеру, добавляющему баннер в систему:

    В параметрах баннера в URL перехода пропишите общую ссылку, вызываться она не будет.

    Во вкладке Баннеры → События пропишите к нужным номерам событий ссылки на сайт рекламодателя:

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

    Примечание. Для использования доступны события с 1 по 29. Событие №30 (event_30) уже используется в коде шаблона.
  6. Вызов функции расхлопа/схлопа.
    Примечание. Функционал расхлопа/схлопа подразумевает под собой увеличение или уменьшение размеров контейнера для HTML-кода. Следовательно, изменение отображаемого содержимого в контейнере для расхлопа или схлопа осуществляется разработчиком HTML-кода баннера.
    • expandStart — имя функции для увеличения размеров контейнера (для расхлопа баннера);
    • expandEnd — имя функции для возврата размеров контейнера к исходным (для схлопа баннера).
    Примечание. В случае использования событий mouseover и mouseout, рекомендуется их назначать самому элементу iframe в котором находится HTML-содержимое баннера. На уровне этого же элемента вызывать функции схлопа (expandEnd) и расхлопа (expandStart). Вызвано это тем, что в некоторых случаях данные события назначенные элементам внутри iframe, могут не срабатывать при их наступлении.
  7. Если в HTML-коде используется тег textarea, необходимо экранировать закрывающий тег обратным слеш.

    Таким образом:

    <textarea><\/textarea>

  8. Информация о контейнере, в который будет выгружен HTML-код баннера.

    На синхронном коде вставки:

    <divid="adfoxHtml5_pseudoPlaceholder_[rnd]"><iframe id="adfoxHtml5_iframe_[rnd]" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
                HTML-код баннера
                </iframe></div>

    На асинхронном коде вставки:

    <divid="AdFox_banner_[rnd]"><iframe id="adfoxHtml5_iframe_[rnd]" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
                HTML-код баннера
                </iframe></div>

    Получить значение [rnd] в HTML-коде баннера можно с помощью переменной

    var rnd=%random1%||%random%

Инструкция по подготовке HTML5, полученного в Adobe Edge Animate

Adobe Edge Animate — это adobe-редактор для создания HTML5-баннеров.

Информация о редакторе.

В Adobe Edge на кнопки для клика добавьте код, где N — номер ссылки от 1 до 29:

window.open(link1);
window.open(link2);
...
window.open(linkN);

Требования при подготовке расхлопа в Adobe Edge Animate:

  • необходимо подготовить 1 креатив, который включает в себя элементы схлопа и расхлопа;
  • слой с элементами расхлопа ставится выше уровнем, ему задается свойство Display: Off;
  • размеры Stage должны быть 100%*100%.

Код на кнопке расхлопа:

sym.$("ExpandState").show();
expandStart();

где ExpandState — названия элементов, которые должны показаться при расхлопе.

Код на кнопке схлопа:

sym.getSymbolElement().hide();
expandEnd();
Примечание. Скачайте пример HTML5-кода с расхлопом, полученного с помощью редактора Adobe Edge Animate.

Настройки при публикации проекта:

Проект, созданный в Adobe Edge Animate включает следующий набор файлов:

  • html-файл ([Имя проекта].html);
  • изображения;
  • js-файл с названием проекта ([Имя проекта]_edge.js).

В полученных файлах необходимо внести следующие изменения:

Подробнее
  1. Откройте основной HTML-файл [Имя проекта].html в блокноте.

    В Adobe Edge на кнопки добавляется код.

    window.open(link1);
    window.open(link2);
    ...
    window.open(linkN);
    

    В HTML-код баннера, после тега <script> и перед AdobeEdge.loadComposition, допишите код, где N — номер ссылки от 1 до 29:

    var link1="%reference%@%eventHTML1%";
    var link2="%reference%@%eventHTML2%";
    ...
    var linkN="%reference%@%eventHTMLN%";
    

    Если же в креатив не добавлены функции вызова ссылки и достаточно одной общей кнопки, то для подсчета кликов оберните элемент < div id="Stage">...< /div > в тег <a> таким образом:

    <ahref="%reference%"target="%target%"><div id="Stage" class="EDGE-18124829"></div></a>
  2. Откройте следующий файл [Имя проекта]_edge.js с помощью блокнота. В самом файле указаны относительные пути к изображениям. Их нужно заменить на абсолютные.

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

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

    При загрузке изображений автоматически будет сгенерирована абсолютная ссылка на каждое из них. Такую ссылку нужно указать вместо относительной в JS файле [Имя проекта]_edge.js.

    Например, в папке было изображение image.jpg , после добавления в интерфейс получилась ссылка:

    http://banners.adfox.ru/150923/adfox/507542/1420837_3.jpg

    В файле [Имя проекта]_edge.js нужно найти image.jpg и произвести замену на:

    http://banners.adfox.ru/150923/adfox/507542/1420837_3.jpg

    После внесения изменений в файл [Имя проекта]_edge.js сохраните его и также загрузите в закладку Файлы рекламной кампании. Скопируйте сгенерированную ссылку, например:

    http://banners.adfox.ru/000000/adfox/000000/[Имя проекта]_edge.js

    В основном HTML-коде [Имя проекта].html замените название проекта Имя проекта на полученную ссылку на файл [Имя проекта]_edge.js в строке

    AdobeEdge.loadComposition(‘Имя проекта’, 'EDGE-18124829', {

    После чего удалите у ссылки окончание _edge.js. Получится следующее:

    AdobeEdge.loadComposition(‘http://banners.adfox.ru/000000/adfox/000000/Имя проекта’, 'EDGE-18124829', {

    Преобразованный код будет выглядеть таким образом:

  3. Полученное содержимое HTML-кода [Имя проекта].html укажите в поле HTML5 (css, html, js) в параметрах баннера при его добавлении в системе.

Информация от разработчика, необходимая для добавления баннера в ADFOX

Для добавления HTML-баннера в ADFOX необходимо получить от разработчиков следующую информацию:

  • папку с проектом, которая содержит HTML-код;

  • если есть дополнительные файлы, подключаемые к коду с помощью переменных, то необходимо соответствие названия файла и переменной:

    file1.png - %user1%
    file2.css  - %user2%   
  • ссылку на сайт рекламодателя (URL перехода);

  • если ссылок в баннере несколько, в таком случае требуется наличие соответствия Ссылка на страницу сайтаНомер события;

    http://site1.ru - %eventHTML1% (Событие 1).
    http://site2.ru - %eventHTML2% (Событие 2).
  • размеры свернутого и развернутого баннера в пикселях;

  • дополнительно может быть предоставлен промерочный пиксель для подсчета количества показов;

  • имена функций, используемых для расхлопа (по умолчанию expandStart) и схлопа (по умолчанию expandEnd);

  • для авторасхлопа баннера необходимо указать имя функции расхлопа креатива в HTML-коде.

Подсчёт событий

Вызов событий осуществляется следующим образом:

  • в html и js коде: %eventHTMLN%, где N — номер события от 1 до 29;
  • в html-коде, полученном через конвертер swiffy: %eventEncodedN%, где N — номер события от 1 до 29;
  • во flash-ролике, который будет сконвертирован через swiffy, необходимо использовать код:

    Для ActionScript 2:

    var loader = new LoadVars(); 
    loader.load(_root.event_N);

    Для ActionScript 3:

    import flash.net.URLRequest;
                import flash.net.sendToURL;
                
                var flashVars:Object = this.stage.loaderInfo.parameters;
                flash.net.sendToURL(new URLRequest(flashVars['event_N']))

    где N — номер события от 1 до 29.

  • при размещении flash-ролика напрямую в HTML-коде через шаблон HTML-код с расхлопом [Sync_Async]: в HTML-коде используйте %eventEncodedN%, где N — номер события от 1 до 29.

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

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон HTML-код с расхлопом [Sync_Async].

Если шаблон отсутствует в списке дополнительных шаблонов, то добавьте его из предзаданных.

В разделе Содержимое баннера укажите значения для параметров:

  1. URL-перехода — укажите ссылку на сайт рекламодателя.
  2. TARGET ссылки — определяет, в каком окне открывать ссылку:
    • _blank — загружает страницу в новое окно браузера;
    • _parent — загружает страницу в текущее окно;
    • _top — загружает страницу в полном окне браузера.
  3. Ссылка на промерочный пиксель — укажите ссылку на промерочный пиксель для подсчета показов в сторонней системе управления рекламой.
    Примечание. Макрос для подстановки случайного числа к ссылкам, устанавливаемым в ADFOX: %random%.
  4. Файл 1Файл 5 — если к HTML-коду прилагаются дополнительные файлы, то загрузите их в переменные, согласно присланному соответствию.
  5. Сдвигать контент при расхлопе (yes/no) (по умолчанию no): yes — расхлоп со сдвигом контента; no — без сдвига контента.
  6. Ширина до расхлопа (в px или 100%) — укажите ширину для первого баннера (до расхлопа). Если указано 100%, тогда ширина после расхлопа примет значение 100%.
  7. Ширина после расхлопа (в px или 100%) — укажите ширину для второго баннера (после расхлопа). Если указано 100%, тогда ширина до расхлопа примет значение 100%.
  8. Высота до расхлопа (в px) — укажите высоту для первого баннера (до расхлопа) в px.
  9. Высота после расхлопа (в px) — укажите высоту для второго баннера (после расхлопа) в px.
  10. Направление расхлопа — в какую сторону должен расхлопываться баннер.

    Возможные значения:

    • overhead_left_corner — из левого верхнего угла открывать вправо — вниз;
    • overhead_right_corner — из верхнего правого угля открывать влево — вниз;
    • lower_left_corner — из нижнего левого угла открывать вправо — вверх;
    • lower_right_corner — из нижнего правого угла открывать влево — вверх;
    • central_point — из центральной точки открывать по центру;
    • right — вправо;
    • left — влево;
    • bottom — вниз;
    • top — вверх;
    • fullscreen — фуллскрин.

    Подробнее с иллюстрациями значения рассмотрены ниже.

  11. Количество авторасхлопов (по умолчанию 0) — сколько раз баннер покажется расхлопнутым для уникального пользователя.
  12. Время сессии для авторасхлопа (по умолчанию 20) — время в часах, в течении которого будет действовать настройка количества авторасхлопов, начиная с первого авторасхлопа.
  13. Авторасхлоп всегда (по умолчанию no) — принимает значения yes/no; yes — баннер всегда показывается сначала в расхлопнутом виде.
  14. Время анимации — (по умолчанию 0) время в секундах, в течение которого происходит анимация расхлопа и схлопа баннера. Если 0 — то анимации нет.
  15. Кадров в секунду (FPS) (по умолчанию 40) — количество кадров в секунду для анимации.
  16. Имя функции для вызова расхлопа контейнера (по умолчанию expandStart) — в HTML-коде это имя JavaScript функции, которая вызывается для запуска анимации расхлопа.
  17. Имя функции для вызова схлопа контейнера (по умолчанию expandEnd) — в HTML-коде это имя JavaScript функции, которая вызывается для запуска анимации схлопа.
  18. Имя функции для вызова расхлопа креатива (по умолчанию expand) — в HTML-коде это имя JavaScript функции, которая отвечает за показ кода баннера в расхлопнутом виде. Имя данной функции необходимо для ее вызова шаблоном при включенном авторасхлопе.
  19. Стили для блока баннера — укажите стили для блока div, в котором находится код баннера. Формат записи стилей — inline CSS. Например, для размещения баннера по центру: margin: 0 auto;
  20. HTML5 (css, html, js) — вставьте HTML-код баннера;

Направление расхлопа

  • overhead_left_corner — из левого верхнего угла открывать вправо — вниз;

  • overhead_right_corner — из верхнего правого угля открывать влево — вниз;

  • lower_left_corner — из нижнего левого угла открывать вправо — вверх;

  • lower_right_corner — из нижнего правого угла открывать влево — вверх;

  • central_point — из центральной точки открывать по центру;

  • right — вправо;

  • left — влево;

  • bottom — вниз;

  • top — вверх.