Шаблоны

Шаблон — это код (JSON, JavaScript, HTML, XML), определяющий внешний вид и функциональность для отображения баннера на сайте. Код шаблона содержит переменные, значения которых подставляются из параметров выбранного баннера.

Для одного типа баннера можно добавить несколько разных шаблонов. Например, на площадке с типом баннера 240 × 400 могут быть показаны баннеры с шаблоном Картинка или Баннер с видео.

Шаблоны бывают:

  • Предзаданные — уже созданы в Adfox и готовы к использованию. Для корректной работы для таких шаблонов разработаны технические требования.
  • Собственные — добавлены пользователями Adfox самостоятельно с помощью кода.

Примечание

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

Добавление предзаданных шаблонов

  1. Откройте вкладку Настройки → Типы баннеров → Собственные. Выберите Безразмерные или XML.

  2. Создайте новый тип баннера или выберите уже существующий, для которого нужно добавить шаблон.

  3. Для добавления шаблона нажмите Шаблоны около нужного типа баннера.

  4. Нажмите Использовать предзаданный.

  5. Выберите нужный предзаданный шаблон из списка и нажмите .

    Важно

    Для баннера в рекламной кампании с методикой подсчета показов Показ (IMS), Видимый показ (IMS) и Видимые показы, Яндекс (IMS) будут доступны шаблоны c пометкой IMS . Такие шаблоны позволяют реализовать учет видимости и проводить расширенную проверку показов и переходов инструментами антифрода.

  6. Внизу открывшейся страницы нажмите кнопку Добавить.

Примечание

При добавлении одного и того же предзаданного шаблона к типу баннера более одного раза его название будет автоматически дополнено подписью: копия N, где N — номер копии шаблона.

Во всех предзаданных шаблонах параметры креатива автоматически передаются в ЕРИР при включенной маркировке рекламы. При добавлении баннеров с таким шаблоном рядом с полем для креатива будет значок .

Чтобы отключить передачу данных в баннере, нажмите на значок — он станет серого цвета: . При копировании баннера с активной маркировкой на дочернем баннере она выключается. Если вам нужно включить маркировку, сделайте это вручную.

Как отключить передачу данных о креативе на уровне шаблона

В параметрах шаблона в строке с дополнительной переменной, отвечающей за файл или код креатива, для параметра Маркировка выберите значение Не использовать в маркировке.

Создание собственных шаблонов

Чтобы добавить шаблон, который будет корректно работать на коде вставки с библиотекой context.js:

  1. Напишите HTML-код баннера, например:

    <div style="max-width:500px;">
  <h1 style="text-align: center;"><a style="text-decoration: none; color:red;" href="https://adfox.ru/ru/">Adfox</a></h1>
  <div style="display: inline-flex; padding-left: 5px;">
    <a href="https://adfox.ru/ru/product/adfox_sites/" target="_blank" style="text-decoration: none; color:red; padding-left: 5px;">
      <img src="https://adfox.ru/ru/product/adfox_sites/">Adfox. Размещение и управление рекламой на сайтах</a>
  </div>
</div>

  2. В интерфейсе Adfox перейдите к типу баннера, в котором будет находится новый шаблон: откройте вкладку Настройки → Типы баннеров → Собственные. Выберите Безразмерные или XML.

  3. Нажмите Шаблоны около нужного типа баннера. Затем нажмите Использовать предзаданный и рядом с шаблоном Проброс кода [context] нажмите .

  4. В параметрах шаблона найдите внизу раздел Дополнительные переменные. В поле Значение по умолчанию для дополнительной переменной № 1 HTML код вставки вставьте HTML-код баннера.

  5. Рекомендуем включить флаг Запрет на редактирование.

  6. Если с помощью этого шаблона вы планируете размещать рекламу с маркировкой через ОРД Яндекса, советуем включить автоматическую передачу данных о креативе в ЕРИР.

  7. Далее замените в HTML-коде значения, которые могут изменяться от одного баннера к другому (например, размеры, ссылки на изображения, ссылки для перехода, тексты), на специальные макросы Adfox, одновременно включая используемые переменные.

    Например:

    • Заменим в HTML-коде слово «Adfox» на макрос %banner.user2%, включим дополнительную переменную № 2, сделаем ее обязательной с типом «Строка».
    • Заменим в HTML-коде ссылку на файл с логотипом на макрос %banner.user3%, включим дополнительную переменную № 3, сделаем ее обязательной с типом «Файл».
    • Заменим в HTML-коде ссылку на сайт рекламодателя на макрос %request.reference_mrc%, включим предопределенную переменную URL перехода.
    <div style="max-width:500px;">
  <h1 style="text-align: center;"><a href="%request.reference_mrc%">%banner.user2%</a></h1>
  <div style="display: inline-flex; padding-left: 5px;">
    <a href="%request.reference_mrc%" target="_blank" padding-left: 5px;">
      <img src="%banner.user3%">Adfox. Размещение и управление рекламой на сайтах</a>
  </div>
</div>

    Если баннер имеет sticky-формат, добавьте вручную в код своего блока верстку для метки «Реклама». Не рекомендуем включать метку «Реклама» в параметрах баннера в Adfox.

  8. После замены всех необходимых значений на макросы сохраните изменения в шаблоне. Теперь можно добавлять баннеры.

Добавление шаблона для видеорекламы

Чтобы добавить шаблон с поддержкой мультиформатного видео:

  1. Откройте Настройки → Типы баннеров → Собственные → XML. Добавьте новый тип баннера или откройте список шаблонов существующего баннера.

  2. Нажмите Добавить.

  3. Введите название шаблона. Выберите Формат описания мультиформатного видео.

    При выборе значения нет в качестве основного будет использоваться формат MP4 высотой до 480 пикселей. Если в шаблоне указан макрос %template.media_files%, он будет заменен на пустую строку.

  4. В блоке Код шаблона введите XML-код баннера с макросом %template.media_files%. При показе баннера, созданного по такому шаблону, макрос %template.media_files% будет заменяться на код со списком сгенерированных видеофайлов в разных форматах. Этот список формируется только при загрузке видеофайлов через интерфейс Adfox. Если в баннере указать ссылку на видео с внешнего источника, макрос заменится пустой строкой.

    При необходимости в тег MediaFiles можно добавлять свои описания форматов в виде XML или JSON, в зависимости от выбранного формата описания мультиформатного видео.

    При добавлении своего формата в JSON нужно указать, до или после макроса стоят прописанные вами теги. Для этого используются расширения:

    • %template.media_files:delimiter_after% — запятая ставится после макроса;
    • %template.media_files:delimiter_before% — запятая ставится перед макросом;
    • %template.media_files% — запятая не ставится.

    Разделитель ставится, только если будут найдены сконвертированные файлы и в JSON будут добавлены их описания. В противном случае шаблон заменяется на пустую строку. Таким образом, корректный шаблон будет формироваться из макроса, когда есть собственное описание и когда может появиться описание сконвертированных форматов в JSON.

    Пример кода шаблона для описания мультиформатного видео в формате XML
    <xml>
  <someTag>
    <MediaFiles>
      %template.media_files% <!-- макрос мультиформатного видео -->
    </MediaFiles>
  </someTag>
<xml>

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

    <xml>
  <someTag>
    <MediaFiles>
      <!-- Макрос мультиформатного видео раскрывается в список сконвертированных форматов -->
      <MediaFile type="video/mp4" width="480" height="240" bitrate="322" delivery="progressive" isScalable="true" keepAspectRatio="true">
        <![CDATA[http://strm.yandex.ru/video1]]>
      </MediaFile>
      <MediaFile type="video/mp4" width="560" height="320" bitrate="441" delivery="progressive" isScalable="true" keepAspectRatio="true">
        <![CDATA[http://strm.yandex.ru/video2]]>
      </MediaFile>
      <MediaFile type="video/mp4" width="680" height="460" bitrate="522" delivery="progressive" isScalable="true" keepAspectRatio="true">
        <![CDATA[http://strm.yandex.ru/video3]]>
      </MediaFile>
      <MediaFile type="application/mpeg" width="" height="" bitrate="" delivery="streamming" isScalable="true" keepAspectRatio="true">
        <![CDATA[http://strm.yandex.ru/video4.m3u8]]>
      </MediaFile>
      </MediaFiles>
  </someTag>
<xml>
    Пример кода шаблона для описания мультиформатного видео в формате JSON
    <xml>
  <someTag>
    <!-- Макрос мультиформатного видео используется внутри секции CDATA -->
    <![CDATA[
      jsonData = [%template.media_files%];
    ]]>
  </someTag>
<xml>

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

    <xml>
  <someTag>
    <!-- Макрос мультиформатного видео раскрывается в массив сконвертированных форматов -->
    <![CDATA[
      jsonData = [{
  "url" : "http://strm.yandex.ru/video5",
  "type" : "video/mp4",
  "width" : "480",
  "height" :"240",
  "bitrate" :"322",
  "delivery" :"progressive"
},
{
  "url" : "http://strm.yandex.ru/video6",
  "type" : "video/mp4",
  "width" : "480",
  "height" :"240",
  "bitrate" :"322",
  "delivery" :"progressive"
},
{
  "url" : "http://strm.yandex.ru/video7",
  "type" : "video/mp4",
  "width" : "480",
  "height" :"240",
  "bitrate" :"322",
  "delivery" :"progressive"
},
{
  "url" : "http://strm.yandex.ru/video8.m3u8",
  "type" : "application/mpeg",
  "width" : "",
  "height" :"",
  "bitrate" :"",
  "delivery" :"streamming"
}];
]]>
  </someTag>
<xml>

    Пример шаблона VAST с макросом для мультиформатного видео в формате XML

    Примечание

    Если вы используете шаблон с макросом мультиформатного видео, то при создании баннера в поле Качество видеоролика по умолчанию будет установлено Выбирается автоматически — в этом случае выбрать качество не получится.

    Если макрос не используется, в поле Качество видеоролика по умолчанию будет установлено 480p. Вы можете выбрать другое значение из списка. При изменении значение поля сохранится и будет использоваться для баннеров, созданных с помощью этого шаблона.

  5. Нажмите Добавить.

Макросы для шаблонов

Вашу таблицу можно преобразовать в следующую форму согласно вашим инструкциям:

Переменные в коде

Описание переменной

Имя переменной в коде

Ссылка на flash-ролик

%banner.get_url%

Ссылка на изображение

%banner.image_url%

URL перехода (предопределенная переменная)

%request.reference_mrc%

URL перехода (дополнительная переменная), где N — номер переменной от 1 до 25. Данный макрос производит подсчет кликов и редирект на сайт рекламодателя

%banner.reference_mrc_userN%

Параметр передачи перехода (название переменной, которая прописана во flash-ролике и принимает значение переменной «URL перехода»)

%banner.flash_parameter_name%

Включение метки Реклама на баннерах. Принимает значения 1 (метка отображается) или 0 (метка не отображается)

%banner.ad_label%

Указание на рекламодателя в метке Реклама. Отображается, если %banner.ad_label% принимает значение 1 и в параметрах баннера заполнено поле Домен

%banner.domain:jsenc%

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

%template.media_files%

Параметр передачи «target»

%banner.target_parameter_name%

Ширина (в пикселях. Для указания ширины в % необходимо использовать дополнительную переменную)

%banner.width%

Высота (в пикселях. Для указания высоты в % необходимо использовать дополнительную переменную)

%banner.height%

Текст «ALT» изображения

%banner.alt%

«TARGET» ссылки. Значение подставляется либо из параметров баннера, либо из запроса в параметре p3

%banner.target%

Цвет фона

%banner.background_color%

Длительность видео в секундах

%banner.video_duration%

Ссылка на промерочный пиксель. Если в баннере значение параметра не задано, по умолчанию будет подставлено значение "https://banners.adfox.ru/transparent.gif"

%banner.tracking_url%

Дополнительная переменная, где N — номер переменной от 1 до 25

%banner.userN%

Событие, где N — номер события от 1 до 30. События нужны для получения информации о каких-либо действиях в баннере, например, расхлоп баннера, наведение указателя мыши на кнопку

%banner.eventN%

Идентификатор баннера, который выбран для показа

%banner.id%

Идентификатор рекламной кампании, которая выбрана для показа

%campaign.id%

Идентификатор площадки, на которой размещен выбранный для показа баннер

%place.id%

Идентификатор раздела, на котором размещен выбранный для показа баннер

%section.id%

Идентификатор сайта, на котором размещен выбранный для показа баннер

%site.id%

Идентификатор аккаунта

%owner.id%

Число, полученное из запроса в параметре pr

%request.page_random%

Ключевые слова, полученные из запроса в параметре pk

%request.keywords%

Генератор случайного числа

%system.random%

Протокол запроса баннера. Например, http или https

%request.protocol%

Значение, полученное из запроса в параметре puidN, где N — номер дополнительной характеристики от 1 до 63

%request.puidN%

Значение, полученное из запроса в параметре eidN, где N — номер переменной от 1 до 2

%request.eidN%

Время запроса баннера в uts, формат — количество секунд since unix epoch

%request.timestamp%

Идентификатор рекламного места, полученный из запроса в параметре phid

%request.placeholder_id%

Случайное число, сгенерированное на площадке для асинхронных кодов. Приходит в запросе в параметре pr1

%request.place_random%

Кодирование значений переменных

Значения из параметров баннера или полученные из запроса в каком-либо параметре, подставляются в код шаблона без изменений. Но для некоторых переменных может потребоваться кодирование значений.

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

Есть три вида кодирования:

  1. htmlenc преобразует символы <,>,&.

    %banner.user1:htmlenc%

    Исходное значение:

    hello// "world", & hello 'world'! + Good morning! < Good afternoon!

    После кодирования:

    hello// "world", &amp; hello 'world'! + Good morning! &lt; Good afternoon!

  2. urlenc производит URL-кодирование строки.

    %banner.user1:urlenc%

    Исходное значение:

    hello// "world", & hello 'world'! + Good morning! < Good afternoon!

    После кодирования:

    hello%2F%2F%20%22world%22%2C%20%26%20hello%20%27world%27%21%20%2B%20Good%20morning%21%20%3C%20Good%20afternoon%21

  3. jsenc экранирует с помощью символа \ кавычки, переносы строк и слеши.

    %banner.user1:jsenc%

    Исходное значение:

    hello// "world", & hello 'world'! + Good morning! < Good afternoon!

    После кодирования:

    hello// \"world\", & hello \'world\'! + Good morning! < Good afternoon!

Автоматическая передача данных о креативе в ЕРИР

Если для маркировки рекламы вы используете инструменты Adfox, то рекомендуем на уровне шаблона включить передачу данных в ЕРИР для переменных, являющихся креативом. Это позволит при создании баннера добавить креатив в параметрах баннера (как обычно) и не заполнять данные о креативе повторно в разделе Маркировка рекламы: медиаданные креатива.

В предазаданных шаблонах автоматическая передача данных включена по умолчанию. Вы можете самостоятельно включать или отключать передачу данных в ЕРИР как в предзаданных, так и в собственных шаблонах.

Чтобы настроить передачу данных о креативе в ЕРИР:

  1. Откройте параметры шаблона.

  2. В строке с переменной, отвечающей за файл креатива, для параметра Маркировка выберите значение:

    • Использовать как URL — если в эту переменную загружаете файл (изображение или видео);
    • Использовать как текстовые данные — если в переменной будет текст (заголовок или текст на баннере). Для переменной HTML-код тоже выбирайте значение Использовать как текстовые данные.

    Примечание

    Для переменной URL перехода включать передачу данных в ЕРИР не нужно.

  3. Нажмите Изменить внизу страницы.

Теперь при добавлении баннеров с таким шаблоном рядом с полем для креатива будет значок : это значит, что данные из этого поля будут автоматически переданы в ЕРИР.

В каждом конкретном баннере передачу данных можно отключить: для этого нажмите значок  рядом с полем для креатива — он станет серого цвета (). При копировании баннера дочерний баннер наследует настройки передачи данных в ЕРИР из родительского баннера.

Запрет на редактирование

Для расширения функциональности шаблонов к дополнительным переменным добавлен флаг Запрет на редактирование, который доступен для настройки только при добавлении из предзаданных или создании нового шаблона.

Примечание

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

Переменные без флага «Запрет на редактирование» (по умолчанию):

  • в шаблоне — при изменении значения по умолчанию в шаблоне для этой переменной, новое значение не применяется к ранее созданным баннерам, но будет применяться к новым баннерам.
  • в баннере — при добавлении баннера поле для этой переменной заполняется значением по умолчанию из шаблона и может быть изменено (в том числе при редактировании баннера).

При отключении переменной в шаблоне:

  • в шаблоне — значение, указанное в поле Значение по умолчанию, будет удалено;
  • в баннерах — переменная вместе со своим значением полностью будет удалена во всех ранее созданных баннерах.

При повторном включении переменной в шаблоне:

  • в шаблоне — возможно указание нового значения в поле Значение по умолчанию, которое будет применяться только к вновь созданным баннерам;
  • в баннерах — переменная появится во всех ранее созданных баннерах либо со старым значением, которое было указано в поле Значение по умолчанию на уровне шаблона до отключения переменной, либо с измененным, если оно было переопределено на уровне баннера.

Переменные с флагом «Запрет на редактирование»:

  • в шаблоне — можно редактировать значение по умолчанию, и изменения будут применяться в том числе и ко всем ранее созданным баннерам.
  • в баннере — поле для этой переменной заполняется значением по умолчанию из шаблона и недоступно для редактирования.

При отключении переменной в шаблоне:

  • в шаблоне — значение, указанное в поле Значение по умолчанию, будет удалено. Флаг Запрет на редактирование останется активированным;
  • в баннерах — переменная вместе со своим значением полностью будет удалена во всех ранее созданных баннерах.

При повторном включении переменной в шаблоне:

  • в шаблоне — возможно указание нового значения в поле Значение по умолчанию;
  • в баннерах — переменная появится во всех ранее созданных баннерах либо с пустым значением, либо с новым значением, указанным в поле Значение по умолчанию на уровне шаблона.

Пример запрета на редактирование

В шаблоне включены две дополнительные переменные:

  • user1: Ширина, значение по умолчанию: 100 px, запрет на редактирование: нет.
  • user2: Текст на плашке: значение по умолчанию Реклама, запрет на редактирование: включен.

Создадим баннер, в котором для каждой переменной будут применены значения по умолчанию, но при этом значение переменной Текст на плашке остается недоступным для редактирования.

Теперь в шаблоне изменим значения по умолчанию:

  • user1: Ширина, значение по умолчанию: 200 px, запрет на редактирование: нет.
  • user2: Текст на плашке: значение по умолчанию Реклама в сети, запрет на редактирование: включен.

В баннере будет автоматически изменено значение только для переменной user2 Текст на плашке, а значение для переменной user1 осталось без изменения:

Настройка видимости шаблонов

Чтобы открыть список шаблонов, на вкладке Настройки → Типы баннеров нажмите Шаблоны напротив нужного типа баннера.

Включенные шаблоны отображаются в списке доступных при добавлении баннера.

Чтобы некоторые шаблоны не были видны при создании новых баннеров, выключите шаблон и нажмите кнопку Изменить. При этом ранее добавленные баннеры продолжат показываться на сайте.

Удаление шаблонов

Внимание

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

Чтобы удалить шаблон, на вкладке Настройки → Типы баннеров нажмите Удалить напротив его названия.

Обратиться в службу поддержки

Написать в чат

Написать письмо

Баннер фиксируется в окне браузера и сопровождает пользователя при прокрутке страницы.

Код такого баннера может быть выгружен в JSON-формате (или JavaScript/HTML).

Код вставки представляет собой лишь строку запроса, в ответ на запрос возвращается XML-код.

Предыдущая
Типы баннеров
Следующая
Расположения