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

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

<script type="text/javascript" src="%user1%"></script>

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

3. Подсчет кликов в баннере

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

%reference%

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

Пример:

<a href="%reference%" target="%target%">Сайт рекламодателя</a>   

4. Подсчет кликов с нескольких ссылок в HTML баннере

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

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

1. прямые ссылки замените на переменные %reference% - чтобы в системе считалось общее количество переходов по баннеру.
2. с помощью @%eventHTML1%-@%eventHTML29% переадресовываем пользователя на нужную страницу.
После изменения получаем ссылки:

<a href="%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. Менеджеру, добавляющему баннер в систему:

1. В параметрах баннера в "URL перехода" пропишите общую ссылку, вызываться она не будет.
2. Во вкладке Баннеры -> События в "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 код баннера

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

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

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

<div id="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. необходимо подготовить 1 креатив, который включает в себя элементы схлопа и расхлопа;
2. слой с элементами расхлопа ставится выше уровнем, ему задается свойство Display: Off;
3. размеры 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> таким образом:

<a href="%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 необходимо получить от разработчиков следующую информацию:

1. Папку с проектом, которая содержит HTML код.
2. Если есть дополнительные файлы, подключаемые к коду с помощью переменных, то необходимо соответствие названия файла и переменной:

file1.png - %user1%  
file2.css  - %user2%  

3. Ссылку на сайт рекламодателя (URL перехода).
4. Если ссылок в баннере несколько, в таком случае требуется наличие соответствия "Ссылка на страницу сайта" - "Номер события".

http://site1.ru - %eventHTML1% (Событие 1). 
http://site2.ru - %eventHTML2% (Событие 2).

5. Размеры свернутого и развернутого баннера в пикселях.
6. Дополнительно может быть предоставлен промерочный пиксель для подсчета количества показов.
7. Имена функций, используемых для расхлопа (по умолчанию expandStart) и схлопа (по умолчанию expandEnd).
8. Для авторасхлопа баннера необходимо указать имя функции расхлопа креатива в 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%
  1. Файл 1 - Файл 5 - если к HTML коду прилагаются дополнительные файл, то загрузите их в переменные, согласно присланному соответствию.

  2. Сдвигать контент при расхлопе (yes/no) (по умолчанию no) - yes – расхлоп со сдвигом контента, или no – без сдвига контента.

  3. Ширина до расхлопа (в px или 100%) - укажите ширину для первого баннера (до расхлопа). Если указано 100%, тогда ширина после расхлопа примет значение 100%.

  4. Ширина после расхлопа (в px или 100%) - укажите ширину для второго баннера (после расхлопа). Если указано 100%, тогда ширина до расхлопа примет значение 100%.

  5. Высота до расхлопа (в px) - укажите высоту для первого баннера (до расхлопа) в px.

  6. Высота после расхлопа (в px) - укажите высоту для второго баннера (после расхлопа) в px.

  7. Направление расхлопа - в какую сторону должен расхлопываться баннер.
    Возможные значения:
    overhead_left_corner - из левого верхнего угла открывать вправо – вниз
    overhead_right_corner - из верхнего правого угля открывать влево – вниз
    lower_left_corner - из нижнего левого угла открывать вправо – вверх
    lower_right_corner - из нижнего правого угла открывать влево – вверх
    central_point - из центральной точки открывать по центру
    right - вправо
    left - влево
    bottom - вниз
    top - вверх
    fullscreen - фуллскрин

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

  1. Количество авторасхлопов (по умолчанию 0) - сколько раз баннер покажется расхлопнутым для уникального пользователя.

  2. Время сессии для авторасхлопа (по умолчанию 20) - время в часах, в течении которого будет действовать настройка количества авторасхлопов, начиная с первого авторасхлопа.

  3. Авторасхлоп всегда (по умолчанию no) - принимает значения yes/no , yes - баннер всегда показывается сначала в расхлопнутом виде.

  4. Время анимации - (по умолчанию 0) время в секундах, в течении которого происходит анимация расхлопа и схлопа баннера. Если 0 - то анимации нет.

  5. Кадров в секунду (FPS) (по умолчанию 40) - количество кадров в секунду для анимации.

  6. Имя функции для вызова расхлопа контейнера (по умолчанию expandStart) - в HTML коде это имя JavaScript функции, которая вызывается для запуска анимации расхлопа.

  7. Имя функции для вызова схлопа контейнера (по умолчанию expandEnd) - в HTML коде это имя JavaScript функции, которая вызывается для запуска анимации схлопа.

  8. Имя функции для вызова расхлопа креатива (по умолчанию expand) - в HTML коде это имя JavaScript функции, которая отвечает за показ кода баннера в расхлопнутом виде. Имя данной функции необходимо для ее вызова шаблоном при включенном авторасхлопе.

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

  10. HTML5 (css, html, js) - вставьте HTML код баннера;

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

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

"overhead_left_corner"

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

"overhead_right_corner"

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

"lower_left_corner"

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

"lower_right_corner"

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

"central_point"

right – вправо

"right"

left – влево

"left"

bottom – вниз

"bottom"

top – вверх

"top"

Последнее обновление: 28.06.2016