HTML код, HTML5 код

"Английская версия" "Скачать в формате PDF"

Описание

Любой html-код, в том числе HTML5, для показа через систему.

Код может представлять собой html верстку баннера с css стилями и JavaScript-кодом, либо код вставки сторонней системы управления интернет-рекламой.

Требования к 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 код баннера

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

<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 коде баннера можно с помощью JavaScript:
var rnd=%random1% || %random%;

7. Если в HTML коде используется тег textarea, необходимо экранировать закрывающий тег обратным слеш.

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

<textarea><\/textarea>

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

Swiffy - это google конвертер flash в HTML5.

1. При подготовке Flash баннера необходимо использовать технические требования:
- Flash с одной кнопкой для перехода;
- Flash с несколькими кнопками для перехода

2. Перейдите по ссылке и сконвертируйте Flash ролик в HTML5 код.

3. Полученный код необходимо преобразовать, можете использовать Генератор кода

или в ручную изменить код по инструкции. Подробнее

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

swiffyobject = {...} 

и сохраните его как файл swiffyobject.js

4. К тегу script, содержимое которого было сохранено в файл, добавьте атрибуты:

type="text/javascript" src="%user1%" 

5. Для подсчета кликов добавьте следующий код:
- перед строкой "var stage=" :

var flashvars = "link1=%REFERENCE_ENCODED%&target=%target%&event_1=%eventEncoded1%&event_2=%eventEncoded2%&event_3=%eventEncoded3%&event_4=%eventEncoded4%&event_5=%eventEncoded5%&event_6=%eventEncoded6%&event_7=%eventEncoded7%&event_8=%eventEncoded8%&event_9=%eventEncoded9%&event_10=%eventEncoded10%&event_11=%eventEncoded11%&event_12=%eventEncoded12%&event_13=%eventEncoded13%&event_14=%eventEncoded14%&event_15=%eventEncoded15%&event_16=%eventEncoded16%&event_17=%eventEncoded17%&event_18=%eventEncoded18%&event_19=%eventEncoded19%&event_20=%eventEncoded20%;";

- и после строки "var stage=" и перед строкой "stage.start" :

stage.setFlashVars(flashvars);

6. Удалите строки:

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Swiffy Output</title> 

затем

    <style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">

и

    </body>
</html>

В результате получим:

- файл swiffyobject.js
- HTML5 код баннера, который будет выглядеть так:

Инструкция по подготовке 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 включает следующий набор файлов:

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

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

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

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

var link1="%reference%@%eventHTML1%";
var link2="%reference%@%eventHTML2%";
...
var linkN="%reference%@%eventHTMLN%";
Если кнопка для перехода всего одна, то достаточно прописать код:
var link1="%reference%";
В таком случае, при добавлении баннера в ADFOX, ссылку для перехода нужно указать только в параметрах баннера, во вкладке События уже не нужно прописывать ссылки.

Если же в креатив не добавлены функции вызова ссылки и достаточно одной общей кнопки, то для подсчета кликов оберните элемент < 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)» в параметрах баннера при его добавлении в системе.

Пример кода

Разработчики подготовили html код баннера:

<a href="http://www.site.ru/" target="_blank"><img src="http://www.site.ru/img/img1.png"></a>

И изменили код следующим образом:

<a href="%reference%" target="%target%"><img src="%user1%"></a>

Менеджер при добавлении баннера в ADFOX укажет в параметры значения для этих переменных:

"URL перехода" - http://www.site.ru/
"TARGET" ссылки - _blank
Файл 1 (выберите файл) - загрузит файл img1.png. Ссылка сформируется автоматически.

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

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

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

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

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

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

5. Размеры баннера по ширине и высоте.
6. Дополнительно может быть предоставлен промерочный пиксель для подсчета количества показов.

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

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

- в 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-перехода - укажите ссылку на сайт рекламодателя.

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

  1. "TARGET" ссылки - определяет в каком окне открывать ссылку.
    _blank - загружает страницу в новое окно браузера.
    _parent - загружает страницу в текущее окно.
    _top - загружает страницу в полном окне браузера.

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

Макрос для подстановки случайного числа к ссылкам, устанавливаемым в ADFOX: %random%
  1. Файл 1 - Файл 5 - если к HTML коду прилагаются дополнительные файл, то загрузите их в переменные, согласно присланному соответствию.
Убедитесь, что в HTML коде баннера присутствуют переменные %user1% - %user5%
  1. Ширина (укажите размерность: px или %) - укажите ширину баннера px или %. Например: 240px или 100%.

  2. Высота (укажите размерность: px или %) - укажите высоту баннера px или %. Например: 240px или 100%

  3. HTML-код - вставьте HTML код баннера;

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

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