Баннер № 2 - Брендирование внутренних страниц.
Технические требования к баннеру Брендирование
Брендирование
На данный формат у нас существуют внутренние ограничения: цветовая гамма не должна быть сильноконтрастной с сайтом, она должна привлекать внимание, но не должна раздражать.
Брендирование состоит из:
- подложки - 1920*1080 px
- верхней перетяжки 1088х120 для главной страницы
- верхней перетяжки 1088х250 для внутренних страниц
- и бокового баннера (300х600)
1. Подложка:
JPG - Вес до 250КБ: Контентная (не брендируемая) часть – 1000px Мы рекомендуем не вырезать контентную часть, а залить ее нейтральным цветом, расположив все значимые элементы на расстоянии 1030px друг от друга.
2. Боковой баннер и верхняя перетяжка – принимаем следующие типы креативов:
3. Просьба обратить внимание, что ширина видимой части на большинстве экранов – 1366x768px.
На данный формат у нас существуют внутренние ограничения: цветовая гамма не должна быть сильноконтрастной с сайтом, она должна привлекать внимание, но не должна раздражать.
Брендирование состоит из:
- подложки - 1920*1080 px
- верхней перетяжки 1088х120 для главной страницы
- верхней перетяжки 1088х250 для внутренних страниц
- и бокового баннера (300х600)
1. Подложка:
JPG - Вес до 250КБ: Контентная (не брендируемая) часть – 1000px Мы рекомендуем не вырезать контентную часть, а залить ее нейтральным цветом, расположив все значимые элементы на расстоянии 1030px друг от друга.
2. Боковой баннер и верхняя перетяжка – принимаем следующие типы креативов:
- html5 баннер
- картинка в формате .jpg или .gif весом до 150Кб,
3. Просьба обратить внимание, что ширина видимой части на большинстве экранов – 1366x768px.
Требования к ссылкам и счетчикам
1) Ссылка с баннера высылается в отдельном файле.
2) К прямым ссылкам нужно обязательно добавлять метки метрик, например, метки UTM. Правила создания и настройки UTM меток есть в справках аналитических систем:
https://yandex.ru/support/metrika/reports/tags.xml,
https://support.google.com/analytics/answer/1033867?hl=ru
3) В случае использования счетчиков на клики и показ, к размещению принимаются только проверенные HTTPS счетчики, а случайное число в ссылке должно быть заменено на %%CACHEBUSTER%%
4) К размещению принимаются следующие счётчики: adriver/ doubleclick/ sizmek/ weborama/ adfox
5) Примечание: При сборке баннеров для проектов должен быть использован https-протокол.
1) Ссылка с баннера высылается в отдельном файле.
2) К прямым ссылкам нужно обязательно добавлять метки метрик, например, метки UTM. Правила создания и настройки UTM меток есть в справках аналитических систем:
https://yandex.ru/support/metrika/reports/tags.xml,
https://support.google.com/analytics/answer/1033867?hl=ru
3) В случае использования счетчиков на клики и показ, к размещению принимаются только проверенные HTTPS счетчики, а случайное число в ссылке должно быть заменено на %%CACHEBUSTER%%
4) К размещению принимаются следующие счётчики: adriver/ doubleclick/ sizmek/ weborama/ adfox
5) Примечание: При сборке баннеров для проектов должен быть использован https-протокол.
Использование 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-протокол.
