--- metadata: - name: generator content: Diplodoc Platform v5.55.2 alternate: - https://ads.yandex.com/helpcenter/en/monetization/adfox/banner-specs/html.md - https://ads.yandex.com/helpcenter/ru/monetization/adfox/banner-specs/html.md - https://ads.yandex.com/helpcenter/zh/monetization/adfox/banner-specs/html.md - href: ru/monetization/adfox/banner-specs/html.md type: text/markdown title: Markdown version - href: ../../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/ru/llms.txt # HTML App Mobile Banner/Interstitial **HTML App Mobile Banner** и **HTML App Mobile Interstitial** — баннеры, которые отображают HTML-креатив в мобильных приложениях. * [Пример готового проекта](https://doc-static.yandex.net/src/support/mobile-ads/ru/adfox_inapp.zip) в Adobe Animate CC. * [Пример готового проекта](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_1.zip) в Google Web Designer. ## Разработка HTML-креатива {#html-creative} Убедитесь, что HTML-код соответствует следующим требованиям. {% cut "Требования к HTML-коду" %} 1. Максимальный размер HTML-файла — 65 000 байт. 1. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимый размер, уменьшите его, разместив JavaScript и CSS в отдельных файлах: 1. Сохраните JS и CSS-код в отдельные файлы с расширением .js или .css. 1. Файлы по весу не должны превышать 300 КБ. 1. Для подключения дополнительных файлов (изображений, стилей, скриптов) используйте абсолютные ссылки: `src="js/script.js"`, `src="css/style.css"`. При загрузке проекта Adfox распознает пути к файлам, автоматически загрузит их на вкладку **Файлы** и заменит все ссылки на эти файлы в загружаемом проекте. Не используйте относительные ссылки: `src="../js/script.js"`. Пример подключения JS и CSS-файлов: `````` 1. В проекте может находиться только один файл с расширением .html. 1. Максимальное количество файлов в проекте — 50. 1. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, SWF. 1. Максимальный размер каждого файла (действует также для файлов внутри архива): - 300 КБ; - 1 МБ для видеофайлов. 1. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов. 1. В названиях переменных и объектов нельзя использовать русские буквы. Исключение составляет только текст на баннере. 1. Формат готового проекта — ZIP-архив. **Требования к изображениям** * Максимальный вес одного файла: 300 КБ. * Допустимые форматы изображений: PNG, GIF, JPG, SVG. * Используйте картинки в высоком разрешении: это повысит качество баннера на мобильном устройстве, но может снизить скорость загрузки баннера. * Чтобы уменьшить размер изображения, используйте сервисы наподобие [TinyPng](https://tinypng.com): этот сервис работает как с PNG, так и с JPEG. * Можно использовать изображения в формате SVG: у них небольшой размер файла, возможна анимация, к тому же они векторные, поэтому будут лучше выглядеть на всех устройствах — мобильных и десктопных. {% endcut %} Выберите редактор, в котором будете разрабатывать HTML-креатив, и подготовьте архив с HTML-креативом по инструкции: {% cut "Редактор Adobe Animate CC" %} 1. Скачайте [шаблон для баннера с одной кликабельной областью (кнопкой)](https://doc-static.yandex.net/support/RSYA-RMP/AdobeAnimate_Adfox_inapp_template_oneclick_16_2.html.zip) для Adobe Animate CC версии 16.0 и выше. 1. Создайте в Adobe Animate проект **HTML5 Canvas** (или откройте уже существующий). ![](../../_images/1.png) 1. Откройте параметры публикации **File** → **Publish Settings** и подключите шаблон из пункта 1. ![](../../_images/3.png) 1. Выберите нужную папку и опубликуйте проект. ![](../../_images/4.png) 1. Вся область баннера кликабельна и представляет собой кнопку для перехода на сайт рекламодателя. Ссылка для перехода будет подтягиваться в креатив из настроек баннера в Adfox. {% endcut %} {% cut "Редактор Google Web Designer" %} 1. Скачайте [шаблон баннера для Google Web Designer](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_template.zip). Вы можете взять за основу код этого баннера при создании креативов в редакторе. Разместите содержимое архива в папке с шаблонами программы, например: `/Users/[USER_NAME]/Documents/Google Web Designer/templates` ![](../../_images/GoogleWebDesigner_1.png) Шаблон содержит скрипт `adfox_HTML5.js` и набор параметров для корректной работы переходов и подсчета событий: `%request.reference_mrc%, %user2%, %eventN%`, где N — номер события от 4 до 30. 1. Обработка клика. Все события назначаются конкретным элементам анимации через вкладку **События**. ![](../../_images/GoogleWebDesigner_event11.png) ![](../../_images/GoogleWebDesigner_event2.png) Для вызова действий используется компонент **Интерактивная область**. Добавьте его и выберите событие **Интерактивная область** → **Касание/нажатие** или в английской версии **Tap Area** → **Touch/Click**. ![](../../_images/GoogleWebDesigner_click.png) ![](../../_images/GoogleWebDesigner_click2.png) На вкладке **Собственный код** укажите вызов функции клика: - `callClick()` — если используется одна кнопка перехода; - `callClick(n)` — если кнопок перехода несколько; - `callEvent(n)` — если необходимо вызвать событие из анимации без перехода. Где `n` — номер события, которое должно быть вызвано. ![](../../_images/GoogleWebDesigner_click3.png) ![](../../_images/GoogleWebDesigner_click4.png) ![](../../_images/GoogleWebDesigner_click5.png) **Особенность реализации тянущегося (резинового) баннера** Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели **Свойства** для положения и размеров укажите проценты вместо пикселей. ![](../../_images/Google_Web_Designer_3.png) Также используйте опции **Выровнять по контейнеру** и **Резиновый макет** на верхней панели инструментов. Если перед использованием каких-либо инструментов выравнивания включить **Резиновый макет**, при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера. При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные — в пикселях. [Пример готового проекта](https://doc-static.yandex.net/support/RSYA-RMP/adfox_inapp_1.zip) в Google Web Designer. 1. Опубликуйте проект со следующими настройками: ![](../../_images/GoogleWebDesigner_settings.png) - включена опция **Собрать файлы**; - включена опция **Создать ZIP-архив**; - включена опция **Распаковка групп**; - включены опции **CSS prefix** для WebKit и Mozilla. {% note info %} При добавлении баннера в Adfox сообщите менеджеру соответствие кнопок и номеров событий. К каждому событию менеджер пропишет уникальную ссылку для перехода, которая будет передана в код баннера с помощью переменной. {% endnote %} После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер Adfox. {% endcut %} {% cut "Другие редакторы" %} **Подсчет переходов в баннере** Чтобы в Adfox у баннера считалась статистика по переходам, пропишите в HTML-коде в теге `а` для атрибута `href` переменную: `%banner.reference_mrc_user2%`. Также для ссылок используйте атрибут `target` с переменной `%banner.target%` в значении атрибута. Если атрибут отсутствует, ссылка откроется внутри iframe, то есть рекламируемый сайт откроется на баннерном месте. Пример HTML-кода для подсчета переходов по баннеру: `Сайт рекламодателя` **Подсчет переходов с нескольких ссылок в баннере** Допустим, в баннере есть несколько ссылок для перехода, ведущих на разные страницы рекламируемого сайта, и по каждой из них нужно получить количество переходов. ``` Первая ссылка Вторая ссылка ``` Замените значения атрибута `href` на переменные `%request.reference_mrc@%banner.eventN%`, где вместо N должен быть номер события с 4 по 28. Например: ``` Первая ссылка Вторая ссылка ``` Сообщите менеджеру, добавляющему баннер в Adfox, соответствие ссылок и переменных. При добавлении баннера на вкладке **Events** укажите: - первую ссылку — `http://site.ru — %banner.event4%` для События 4; - вторую ссылку — `http://site.ru/about/ — %banner.event5%` для События 5. {% endcut %} ## Добавление баннера в Adfox {#add-banner-to-adfox} Чтобы добавить баннер в Adfox: 1. В настройках кампании перейдите на вкладку **Баннеры** и нажмите **Добавить**. 2. Выберите тип баннера **App Mobile Banner** или **App Mobile Interstitial** и шаблон **HTML App Mobile Banner** или **HTML App Mobile Interstitial** соответственно. 3. Укажите параметры баннера: {% list tabs %} - Основные - **Приоритет** — числовое значение, определяющее порядок показа баннера в рамках кампании. Чем больше число, тем выше приоритет у баннера перед другими баннерами этой же кампании. Подробнее о приоритетах читайте в [Справке Adfox](https://yandex.ru/support2/adfox/ru/campaigns/rotation-method). - **Архив с HTML5 креативом** — загрузите ZIP-архив с проектом, при этом поле **HTML5** должно оставаться пустым (оно будет заполнено содержимым HTML-файла вашего проекта уже после добавления баннера). - **Ссылка на промерочный пиксель** — по умолчанию используется пиксель Adfox `//banners.adfox.ru/transparent.gif`. При необходимости вести учет показов в сторонней системе, удалите пиксель Adfox и укажите другую ссылку. - **HTML5** — если вы загрузили архив с проектом, поле будет заполнено автоматически. - **URL перехода** — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (`http://` или `https://`). - **Дата, время начала** — обязательные параметры. По умолчанию стоит текущая дата. Если ее не изменить, баннеры начнут показываться сразу после их добавления (если статус баннера **активен**). * **Метка рекламы** — выберите **Реклама** или **Соцреклама**, чтобы добавить метку на баннер. Если метка уже есть в дизайне креатива, в выпадающем списке можно оставить значение **Отключена**. {% note info %} Добавление метки **Соцреклама** не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию **Договор социальной рекламы** в соответствующем [договоре с конечным рекламодателем](https://yandex.ru/support2/adfox/ru/labeling/token#step-2). {% endnote %} * **Домен** — укажите домен рекламодателя, он будет добавлен в метку: `Реклама / Example.com` или `Соцреклама / Example.com` (только если в выпадающем списке выбрано значение **Реклама** или **Соцреклама**). * **Добавить рекламное меню** — включите эту опцию, чтобы добавить токен на некликабельный баннер. При показе баннера на нем будет отображаться значок меню в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен). В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». {% note info %} Если баннер подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. {% endnote %} * **Маркировка рекламы** — раздел доступен, только если в настройках рекламной кампании выбран порядок маркировки **Передавать данные в ЕРИР**. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Подробнее о маркировке рекламы читайте в [Справке Adfox](https://yandex.ru/support2/adfox/ru/labeling/about). - Дополнительные * **Название** — укажите произвольное название баннера. Если поле оставить пустым, баннеру будет присвоен порядковый номер. * **Статус** — выберите статус для баннера: * **активен** — баннер готов для показа; * **приостановлен** — показ баннера приостановлен; * **Завершенная** — баннер показываться не будет. * **Отключен на новых площадках** — по умолчанию опция включена. После создания баннера он не будет размещаться автоматически: * на новых площадках, созданных внутри сайта или раздела, где размещена кампания; * на площадках, которые были включены в настройках размещения кампании после создания баннера. Если выключить опцию, баннер будет автоматически размещен на всех площадках, где включено размещение кампании. * **Профиль таргетирования** — выберите предварительно созданный профиль таргетирования. Подробнее о профилях читайте в [Справке Adfox](https://yandex.ru/support2/adfox/ru/settings/profiles). * **События включены** — опция используется для получения прямых ссылок на события для промера в сторонней системе. Чтобы активировать опцию, на вкладке **Размещения** у баннера нажмите ![](../../_images/code.png). В открывшемся окне вы увидите ссылки на события от 1 до 30, которые нужно скопировать и отправить для установки в стороннюю систему. * **Показы всего, сутки, час**: * **Показы всего, сутки, час** — максимальное количество показов баннера. Если кампания имеет равномерное распределение — необходимо установить дату завершения показа баннера. Как только количество показов достигнет максимального, статус баннера изменится на **Завершенная** и баннер перестанет показываться. * **Показы сутки** — максимальное количество показов в сутки. Как только количество показов с начала суток достигнет максимального, показы приостановятся до начала следующих суток. * **Показы час** — максимальное количество показов в час. Как только количество показов с начала часа достигнет максимального, показы приостановятся до начала следующего часа. * **Переходы всего, сутки, час**: * **Переходы всего** — максимальное количество переходов по баннеру. Если кампания имеет равномерное распределение — необходимо установить дату завершения показа баннера. Как только количество переходов достигнет максимального, статус баннера изменится на **Завершенная** и баннер перестанет показываться. * **Переходы сутки** — максимальное количество переходов по баннеру в сутки. Как только количество переходов с начала суток достигнет максимального, показы приостановятся до начала следующих суток. * **Переходы час** — максимальное количество переходов по баннеру в час. Как только количество переходов с начала часа достигнет максимального, показы приостановятся до начала следующего часа. * **Дата, время окончания** — чтобы установить дату и время окончания, сначала включите опцию. {% endlist %} 3. Чтобы сохранить баннер, нажмите кнопку **Добавить**. [Обратиться в службу поддержки](https://ads.yandex.com/helpcenter/ru/support/contact.md){.button}