Catfish HTML5
Catfish – баннер, размещенный внизу окна браузера.
Баннер, WxH, px- Ширина: 100%; Iframe баннера растягивается на 100% ширины окна браузера.
- Catfish должен адаптироваться ко всем возможным значением ширины. При размещении баннера на мобильные устройства, ширина Catfish начинается от 320px. При размещении на десктоп - минимальная ширина 1000px.
- Высота фиксирована 60, 250 px. Высоту необходимо указать при загрузке или в meta ad.vars (см. требования к файлам).
- HTML баннер со всеми необходимыми файлами должен находиться в .zip архиве.
- Допускается использования таких типов файлов: css, js, gif, png, jpg, jpeg, webp, svg, html, json.
- Вес .zip архива со всеми файлами не должен превышать 500kb.
- Все погружаемые файлы должны быть внутри архива.
- В именах файлах и каталогах можно использовать только цифры и символы латиницы.
- Запрещено использовать знак "пробел" в именах файлов и каталогов.
- Разрешено загружать файлы css, js, gif, png, jpg, jpeg, svg, html, json, xml.
- Все загружаемые файлы должны соответствовать своему MIME типу.
- Запрещенно использовать появление в файлах таких текстов и класов
.asciiz
.byte
.even
.globl
.text
.file
.type
<meta name="ad.type" content="banner">
<meta name="ad.size" content="catfish">
<meta name="ad.vars" content="height=90,auto_button=1">
- height - высота баннера в px
- auto_button - (опционально) установить ли кнопку перехода поверх кетфиша. Значение 0 укажет что неободимо использовать кнопку перехода внутри кетфиша.
Скачайте пример архива. Замените файлы изображений, установите имена файлов в index.html и укажите заливку фона.
Имя файла Имя файла должно соответствовать шаблону:
banner_catfish@myname.zipКнопки
- Кнопка Закрыть в правом верхнем углу добавляется автоматически
- Кнопка перехода при клике на баннер добавляется автоматически
- Добавьте viewport в head
meta name="viewport" content="width=device-width, initial-scale=1">
Свойство width определяет размер окна просмотра. Он может быть установлен на определенное количество пикселей, скажем,width=600 или на специальное значение device-width, которое означает ширину экрана в пикселях CSS в масштабе 100%. (Есть также соответствующие значения height и device-height, которые могут быть полезны для страниц с элементами, которые изменяют размер или положение на основе высоты окна просмотра). Свойство initial-scale контролирует уровень масштабирования при первой загрузке страницы. Свойства maximum-scale, minimum-scale и user-scalable определяют, как пользователям разрешено увеличивать или уменьшать страницу. - При использовании библиотеки createjs, для правильного отображении на устройствах iOS, удалите все значения width и height внутри body
<div id="animation_container">
<canvas id="canvas" style="position: absolute; display: block;">
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden;position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
Установка
- Заполните поле рекламодатель
- Выберите тип banner
- Выберите формат catfish
- Укажите название медиа
- Укажите URL перехода при клике, если это необходимо
- Укажите путь к зеропикселю для отслеживания показов. Он будет вызыватся автоматичести при загрузке кода баннера на сайт.
- Выберите шаблон Template-catfish
- Выберите zip архив с баннером
- Укажите в поле auto_button создать ли автоматически кнопку для клика или же использовать кнопку внутри баннера.
Для сбора статистики кликов, внутрь баннера будет переданы переменные clickTag, clickTAG, ar_redirect, admixAPI.click. У вас есть возможность задать ссылку перехода внутри баннера и получать статистику кликов. Для этого оставьте поле URL пустым, а ссылку перехода задайте одним из вариантов:
clickTag+'&url='+escape('Ваша ссылка перехода');
clickTag+'&url='+encodeURI('Ваша ссылка перехода');
/* если вам неободимо добавить часть к переменной из поля URL */
clickTag+'&a='+encodeURIComponent('Добавочная часть ссылки перехода');
- Укажите высоту баннера в пикселях
- Укажите размер и цвет кнопки закрыть