Admixer HelpCenter

Russian

English

Ukrainian

Назад к Обзору платформы

Глоссарий

Креативы

Стоимость креативов

Работа с креативами

Тех. требования к креативам

Дополнительные настройки

Viber Format Creatives specs

Шаблон в интерфейсе: HTML5 Float

Preview

Формат баннера, состоящий из двух панелей – начальной и развернутой. Соответствующая развернутая панель появляется по клику на один из 9-ти объемных элементов (“кубов”) основной панели. По клику на центральный элемент (#4), открывается панель с видео. Анимация начальной панели может выходить за пределы начальной панели, перекрывая при этом часть контента сайта. Содержит кнопку “Закрыть” в правом верхнем углу развернутой панели, которая позволяет пользователю свернуть баннер.

Данный формат может подпадать под ограничения, налагаемые Google совместно с Coalition for Better Ads на показ рекламных баннеров в браузере Chrome. Чтобы баннер не был признан таким, который нарушает требования стандарта, необходимо исключить следующее поведение баннера: · автопроигрываемое видео с включенным звуком.

Общие требования к формату

Начальная панель

Стандартные размеры, WxH, px: 300×600
Тип файла: .png, .jpg

Развернутая панель

Стандартные размеры, WxH, px: 900×600
Тип файла: .png, .jpg

Размеры изображений, WxH, px.

200×200 – 4 файла; используются в качестве граней “кубов”
300×150 – 2 файла; используются в качестве верхней и нижней грани
900×600 – 4 файла; используются в качестве развернутых панелей, один из которых служит подложкой для видеоплеера (900×600-vid в шаблоне)

Видео

Размер контейнера для видеоплеера может быть задан любой в границах развернутой панели (контейнер с видео в шаблоне имеет размер 600×337; размеры могут быть изменены)
Тип файлов: .mp4
Макс. продолжительность: 30 сек

Аудио

Инициируется пользователем (выключено по умолчанию)

Кнопки управления

Кнопка “X Закрыть” в правом верхнем углу развернутой панели; позволяет пользователю свернуть баннер. Можно использовать кнопку, имеющуюся в шаблоне.

Вес креатива

до 3 Mb

Скачать архив с шаблоном:

3d-expand_v4.zip

Инструкция по работе с .zip архивом (шаблон)

Распакуйте архив с примером. Откройте папку images и замените картинки, используемые в шаблоне, своими. Названия файлов желательно оставить без изменения.
В случае замены названия и/или расширения файлов, необходимо открыть файл body.html текстовым редактором, найти в коде следующие участки и заменить названия файлов на загружаемые вами.

Материалы для начальной панели:

#p1{top:0px;left:0px;background:url('images/1.jpg');}
#p2{top:0px;left:100px;background:url('images/2.jpg');}
#p3{top:0px;left:200px;background:url('images/3.jpg');}
#p4{top:100px;left:0px;background:url('images/2.jpg');}
#p5{top:100px;left:100px;background:url('images/4.jpg');}
#p6{top:100px;left:200px;background:url('images/2.jpg');}
#p7{top:200px;left:0px;background:url('images/3.jpg');}
#p8{top:200px;left:100px;background:url('images/2.jpg');}
#p9{top:200px;left:200px;background:url('images/1.jpg');}

где images – название папки, 1.jpg - название файла, которое необходимо изменить. Данные пронумерованные картинки используются в качестве граней “кубов”.

HTML код

<div id="top"><img src="images/top.jpg"></div>
<div id="bottom"><img src="images/bottom.jpg"></div>

где top.jpg – название файла, использующегося в качестве верхней панели баннера
bottom.jpg - название файла, использующегося в качестве нижней панели баннера.

Материалы для развернутой панели:

   <div id="size_2"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-2.jpg">
    </div>
    <div id="size_3"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-1.jpg">
    </div>
    <div id="size_4"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0;opacity: 0; right: 0;">
        <img src="images/900x600-3.jpg">
    </div>
    <div id="size_vid"
         style="position: absolute;width: 900px; height: 600px;transform-origin: 0 0; background-image:url(images/900x600-vid.jpg);opacity: 0; right: 0;">
        <div id="player_container" style="position : absolute; width: 600px; height: 337px; top:131.5px; z-index: 1;">
        </div>
    </div>

Номера элементов начальной панели и соответствующей развернутой, совпадают. Например, по клику на элемент 200×200 #1 (файл 1.jpg) открывается панель 900×600 #1 (файл 900×600-1.jpg)

Файлы, имеющие одинаковые названия, одинаковы (в качестве источника используется одна и та же картинка).

Если ссылка перехода для верхней, нижней и развернутых панелей должна быть разная, откройте файл body.js текстовым редактором и пропишите ссылку перехода (globalHTML5Api.click(‘https://yourdomain.com’)) по клику на соответствующую панель – верхнюю (“Link – Top”), нижнюю (“Link – Bottom”) и развернутые (Link – 1, 2, 3):

Код файла body.js

s_2.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 2”);
};
s_3.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 1”);
};
s_4.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – 3”);
};
s_v.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Video”);
};
topLink.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Top”);
};
bottomLink.onclick = function(_event) {
  prevent(_event);
  globalHTML5Api.click(‘’);
  //alert(“Link – Bottom”);
};

Файл с видеороликом должен называться video.mp4 и находиться в корневой директории папки.
Сохраните и заархивируйте все используемые материалы в ZIP формате (архив должен создаваться из файлов, а не из папки, в которой эти файлы находятся).

Файл body.html должен находиться в корневой директории ZIP-архива.

Данный шаблон предполагает заданное поведение панелей и их размер. Если есть необходимость отредактировать размер и параметры панелей, а также используемого видеоплеера, обратитесь, пожалуйста, к данным инструкциям: Expandable API 2.0, Видео плеер модуль.

Отслеживание событий

View/Просмотр
Confirmed view/ Подтвержденный просмотр
Click/Клик
Expand by user/Расхлоп баннера пользователем
Collapse by user/Сворачивание баннера пользователем
Play/Запуск видеоролика
Pause/Пауза
Resume/Повторный запуск видеоролика
Sound on/Включение звука
Sound off/Выключение звука
Progress (firstQuartile, midpoint, thirdQuartile, complete)/Досмотр видеоролика (первая четверть, середина, третья четверть, окончание)

Chrome может ограничивать использование ресурсов рекламой (до взаимодействия пользователя с ней) путем удаления тяжелого креатива со страницы. Реклама считается тяжелой, если пользователь не взаимодействовал с ней (например, не кликнул) и если она соответствует любому из следующих критериев:
— Использует основной поток в общей сложности более 60 секунд
— Использует основной поток более 15 секунд в любом 30-секундном окне
— Использует более 4 мегабайт пропускной способности сети

По вопросам технических требований к баннерам, пожалуйста, обращайтесь к менеджеру поддержки вашего аккаунта.

Обновлено 27 марта, 2024