Использование HTML5 креативов
Требования к файлам:
1) Подготовьте HTML-код баннера в виде одного файла index.html
2) Это может быть любой HTML5-код, представляющий собой HTML верстку баннера с CSS стилями и JavaScript-кодом. JavaScript и CSS необходимо размещать внутри HTML-кода баннера, а не подключать отдельными файлами. Не запрещается загружать JS-библиотеки с помощью указания в коде абсолютной ссылки на данную библиотеку.
3) Можно использовать абсолютные ссылки на изображения, подгружаемые в баннер, но рекомендуется вставлять их в формате base64.
● Внутри HTML-код баннера запрещается вставлять относительные ссылки на любые файлы.
● Максимальный вес 250 Kb с учетом веса подключаемых библиотек
1. Учет кликов в баннере
По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в файл index.html
необходимо внести изменения согласно инструкции:
1.2.1. Для одной ссылки в HTML-баннере:
1. Откройте текстовым редактором файл index.html и добавьте следующий код внутри тега <head>:
<script>
var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
</script>
2. Для осуществления перехода и учета клика используйте функцию window.open(window.clickTag, "_blank");
Вызов функции может быть осуществлен при любом необходимом событии для любого тэга в коде баннера:
<div class="button" onclick="return window.open(window.clickTag, '_blank');">Перейти на сайт<div>
1.2.2. Для нескольких ссылок в HTML-баннере
1. Откройте текстовым редактором файл index.html и добавьте следующий код внутри тега <head>:
<script>
var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
var clickTag2 = "%%CLICK_URL_ESC%%%%DEST_URL%%";
var clickTag3 = "%%CLICK_URL_ESC%%%%DEST_URL%%";
</script>
2. Для осуществления перехода и учета клика используйте функцию window.open();
Вызов функции может быть осуществлен при любом необходимом событии для любого тэга в коде баннера:
<div class="button" onclick="return window.open(window.clickTag, '_blank');">Перейти на site1.ru<div>
<div class="button" onclick="return window.open(window.clickTag2, '_blank');">Перейти на site2.ru <div>
<div class="button" onclick="return window.open(window.clickTag3, '_blank');">Перейти на site3.ru <div>
Примечание: При необходимости добавления динамической ссылки в баннер, объявите переменную var clickTag0 = "%%CLICK_URL_ESC%%";, которую можно будет использовать при обработке клика следующим образом: window.open(window.clickTag0+'http://custom.ru', '_blank');
2. Подготовка HTML-креатива, созданного в Adobe Animate:
Примечание 1: Принимаются только стандартные баннеры изготовленные с использованием только следующей библиотеки https://code.createjs.com/createjs-2015.11.26.min.js
2.1. Файл с одной ссылкой
1. Убедитесь, что геометрический размер площади canvas в html-креативе равен размеру креатива.
2. К размещению принимается только основной файл JS, который создается при сохранении креатива Adobe Animate.
3. Убедитесь, что основной файл JS не содержит относительных ссылок.
4. JS файл не должен содержать обработки события клика, вся область баннера будет кликабельной автоматически.
5. Пример основного JS файла с картинками в формате base64:
lib.properties = {
width: 300,
height: 600,
fps: 24,
color: "#CCCCCC",
manifest: [
{id:"image_1", type:"image", src:"data:image/jpeg;base64,….
2.2. Файл с несколькими ссылками
1. Убедитесь, что геометрический размер площади canvas в html-креативе равен размеру креатива.
2. К размещению принимается только основной файл JS, который создается при сохранении креатива Adobe Animate.
3. Убедитесь, что основной файл JS не содержит относительных ссылок.
4. При клике должна вызываться функция window.open(window.clickTag, '_blank');, window.open(window.clickTag2, '_blank'); - для второй ссылки и window.open(window.clickTag3, '_blank'); - для третьей ссылки (при её наличии) . Ссылки для перехода присылаются отдельно. Все ссылки должны указывать на домены сайтов – запрещается указывать ссылки на IP адреса.
5. Пример основного JS файла с картинками в формате base64:
lib.properties = {
width: 300,
height: 600,
fps: 24,
color: "#CCCCCC",
manifest: [
{id:"image_1", type:"image", src:"data:image/jpeg;base64,….
Примечание: при сборке баннеров для всех проектов должен быть использован https-протокол.
Требования к файлам:
1) Подготовьте HTML-код баннера в виде одного файла index.html
2) Это может быть любой HTML5-код, представляющий собой HTML верстку баннера с CSS стилями и JavaScript-кодом. JavaScript и CSS необходимо размещать внутри HTML-кода баннера, а не подключать отдельными файлами. Не запрещается загружать JS-библиотеки с помощью указания в коде абсолютной ссылки на данную библиотеку.
3) Можно использовать абсолютные ссылки на изображения, подгружаемые в баннер, но рекомендуется вставлять их в формате base64.
● Внутри HTML-код баннера запрещается вставлять относительные ссылки на любые файлы.
● Максимальный вес 250 Kb с учетом веса подключаемых библиотек
1. Учет кликов в баннере
По умолчанию клики в HTML-баннере не учитываются. Для учета кликов в файл index.html
необходимо внести изменения согласно инструкции:
1.2.1. Для одной ссылки в HTML-баннере:
1. Откройте текстовым редактором файл index.html и добавьте следующий код внутри тега <head>:
<script>
var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
</script>
2. Для осуществления перехода и учета клика используйте функцию window.open(window.clickTag, "_blank");
Вызов функции может быть осуществлен при любом необходимом событии для любого тэга в коде баннера:
<div class="button" onclick="return window.open(window.clickTag, '_blank');">Перейти на сайт<div>
1.2.2. Для нескольких ссылок в HTML-баннере
1. Откройте текстовым редактором файл index.html и добавьте следующий код внутри тега <head>:
<script>
var clickTag = "%%CLICK_URL_ESC%%%%DEST_URL%%";
var clickTag2 = "%%CLICK_URL_ESC%%%%DEST_URL%%";
var clickTag3 = "%%CLICK_URL_ESC%%%%DEST_URL%%";
</script>
2. Для осуществления перехода и учета клика используйте функцию window.open();
Вызов функции может быть осуществлен при любом необходимом событии для любого тэга в коде баннера:
<div class="button" onclick="return window.open(window.clickTag, '_blank');">Перейти на site1.ru<div>
<div class="button" onclick="return window.open(window.clickTag2, '_blank');">Перейти на site2.ru <div>
<div class="button" onclick="return window.open(window.clickTag3, '_blank');">Перейти на site3.ru <div>
Примечание: При необходимости добавления динамической ссылки в баннер, объявите переменную var clickTag0 = "%%CLICK_URL_ESC%%";, которую можно будет использовать при обработке клика следующим образом: window.open(window.clickTag0+'http://custom.ru', '_blank');
2. Подготовка HTML-креатива, созданного в Adobe Animate:
Примечание 1: Принимаются только стандартные баннеры изготовленные с использованием только следующей библиотеки https://code.createjs.com/createjs-2015.11.26.min.js
2.1. Файл с одной ссылкой
1. Убедитесь, что геометрический размер площади canvas в html-креативе равен размеру креатива.
2. К размещению принимается только основной файл JS, который создается при сохранении креатива Adobe Animate.
3. Убедитесь, что основной файл JS не содержит относительных ссылок.
4. JS файл не должен содержать обработки события клика, вся область баннера будет кликабельной автоматически.
5. Пример основного JS файла с картинками в формате base64:
lib.properties = {
width: 300,
height: 600,
fps: 24,
color: "#CCCCCC",
manifest: [
{id:"image_1", type:"image", src:"data:image/jpeg;base64,….
2.2. Файл с несколькими ссылками
1. Убедитесь, что геометрический размер площади canvas в html-креативе равен размеру креатива.
2. К размещению принимается только основной файл JS, который создается при сохранении креатива Adobe Animate.
3. Убедитесь, что основной файл JS не содержит относительных ссылок.
4. При клике должна вызываться функция window.open(window.clickTag, '_blank');, window.open(window.clickTag2, '_blank'); - для второй ссылки и window.open(window.clickTag3, '_blank'); - для третьей ссылки (при её наличии) . Ссылки для перехода присылаются отдельно. Все ссылки должны указывать на домены сайтов – запрещается указывать ссылки на IP адреса.
5. Пример основного JS файла с картинками в формате base64:
lib.properties = {
width: 300,
height: 600,
fps: 24,
color: "#CCCCCC",
manifest: [
{id:"image_1", type:"image", src:"data:image/jpeg;base64,….
Примечание: при сборке баннеров для всех проектов должен быть использован https-протокол.
© 2000-2022 Фонтанка.ру
Свидетельство Роскомнадзора ЭЛ № ФС 77-66333 от 14.07.2016
Свидетельство Роскомнадзора ЭЛ № ФС 77-66333 от 14.07.2016