HTML-код, HTML5-код

Описание

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

Примечание. Данная инструкция и шаблон HTML-код [Sync_Async] устарели. Рекомендуем воспользоваться требованиями к подготовке HTML кода для шаблона Banner HTML5 [loader].

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

    Пример:

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

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

    В статистике по баннеру будет считаться общее количество показов и переходов, а во вкладке События можно получить данные по переходу непосредственно с каждой ссылки.
    Примечание. Для использования доступны события с 1 по 29. Событие №30 (event_30) уже используется в коде шаблона.
  6. Информация о контейнере, в который будет выгружен 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-коде баннера можно с помощью JavaScript:

    var rnd=%random1% || %random%;

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

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

    <textarea><\/textarea>

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

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

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

  3. Полученный код необходимо преобразовать, можете использовать Генератор кода или вручную изменить код по инструкции.
    Подробнее
    1. В полученном HTML-коде уберите весь код, находящийся внутри второго скрипта, без тегов script и сохраните его как файл swiffyobject.js

      swiffyobject = {...} .

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

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

    3. Для подсчета кликов добавьте следующий код:
      • перед строкой 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);.

    4. Удалите строки:
      <!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> таким образом:

    <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) в параметрах баннера при его добавлении в системе.

Пример кода

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

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

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

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

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

URL переходаhttp://www.site.ru/.

TARGET ссылки_blank.

Файл 1 (выберите файл) — загрузит файл img1.png. Ссылка сформируется автоматически.

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

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

  • папку с проектом, которая содержит HTML-код;
  • если есть дополнительные файлы, подключаемые к HTML-коду с помощью переменных, то необходимо соответствие названия файла и переменной:
    file1.png - %user1%  
    file2.css  - %user2%  
    
  • ссылку на сайт рекламодателя (URL перехода);
  • если ссылок в баннере несколько, в таком случае требуется наличие соответствия Ссылка на страницу сайта → Номер события;
    http://site1.ru - %eventHTML1% (Событие 1). 
    http://site2.ru - %eventHTML2% (Событие 2).
    
  • размеры баннера по ширине и высоте;
  • дополнительно может быть предоставлен промерочный пиксель для подсчета количества показов.

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

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

  • в 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-коду прилагаются дополнительные файлы, то загрузите их в переменные, согласно присланному соответствию.
    Примечание. Убедитесь, что в HTML-коде баннера присутствуют переменные %user1% — %user5%.
  5. Ширина (укажите размерность: px или %) — укажите ширину баннера px или %. Например: 240px или 100%.
  6. Высота (укажите размерность: px или %) — укажите высоту баннера px или %. Например: 240px или 100%.
  7. HTML-код — вставьте HTML-код баннера.
  8. Стили для блока баннера — укажите стили для блока div, в котором находится код баннера. Формат записи стилей — inline CSS. Например, для размещения баннера по центру: margin: 0 auto;.