Інформація

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, svg, html, json.
Вага файлів
  • Вага .zip архіву зі всіма файлами не має перевищувати 500kb.
  • Всі необхідні файли для роботи банера мають бути всередині архіву.
Вимоги до файлів
  • В назвах файлів і каталогів можна використовувати лише цифри та латинські літери.
  • Заборонено використання "пробілу" в назвах файлів та каталогів.
  • Дозволено завантажувати лише файли css, js, gif, png, jpg, jpeg, svg, html, json, xml.
  • Всі завантажувані файли мають відповідати своєму MIME типу.
  • Заборонено використання в файлах таких текстів та класів
    .asciiz
    .byte
    .even
    .globl
    .text
    .file
    .type
В head файлу index.html необхідно вказати
<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 вказує на необхідність використання кнопки переходу всередині кетфіша.
Використання зображень для створення html банеру
Завантажте приклад архіву. Замініть файли зображень, вкажіть назви файлів в 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('Додаткова частина посилання переходу');
  • Вкажіть висоту банеру у пікселях
  • Вкажіть размір и колір кнопки "Закрити"