BannerLine HTML5

Description

The template works in insertion codes which uses loader.js library only. That insertion codes marked “NEW” in the instruction.

BannerLine HTML5 - it the streamer consists of HTML5 banner or images. It spreads only when special events execute.
BannerLine HTML5 shows over site content, sticks to one of the browser’s edges and doesn’t move during scroll.

You could add banner with this template in two different ways:
1. If you have the images and URL referrer. In that case you coul add two images which will be expand/collapse or add one image #1 (before expansion).
2. If you have HTML-creative in editor. For productive work in editors you could use the according instructions: Adobe Animate CC and Google Web Designer.

Settings options:

- button “Close” on/off and adding custom button;
- background color for the images;
- which browser’s edge banner will be stick to;
- redefining names for the expand/collapse functions;
- banner container could have its own CSS-styles;
- time tuning for expand event. After that time the banner will be automatically collapsed;
- autoexpand tuning in two ways:
Autoexpand always (yes/no) - will be banner expanded after initialization.
Session expand - consists of two parameters:
Autoexpand amount for one session – how many times the banner will be shown expanded during initialization.
Session time for autoexpand – during this time parameter “Autoexpand amount for one session” works. When the session time is up the banner starts to do autoexpand again.

Recommendations
Here are the tips that will help your ads match new IAB Russia recommendations on quality advertising:
- banner height should not exceed 250px when it is placed at the bottom of the browser window;
- banner height should not exceed 200px when it is placed at the top of the browser window.

Images requirements

Images
Prepare one or two images: 1st image is a streamer or a banner in collapsed condition (has less height); 2nd is a banner in expand condition (has greater height).

“Close” button
Prepare your own image if you want to replace default close button. Your image will be paste without size changes.

Use high-resolution images to improve banner quality on mobile devices despite this could decrease download speed of the banner.
The following formats are supported: png, gif, jpg.
Maximum file size: 300Кб.

Features:
- Touchscreen gadgets. First touch on banner will expand it, second touch will cause linking to a refferer URL.
- Banner background. You can specify background color for the container in case of container size is bigger than image size. This could happen when one of the sizes specified in percent and another size setted in px. Another case is when banner size is fixed and it’s smaller than viewport. Free space in container will be filled in selected colour. You can set different colours for expanded and collapsed conditions.

HTML5 Creative’s requirements (for developers)

1. Maximum number of symbols — 65 000;
2. JavaScript and CSS are preferable to locate in HTML code of the banner. If HTML code reaches the symbols limit, you have to reduce the code through taking JS and CSS out of HTML and putting it into standalone files:
- Save JS and CSS in standalone files with extensions .js and .css ; 3. There could be only the one html file in the project;
4. Maximum number of project files — 50;
5. The following file formats are supported: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
6. Maximum size for each file ( including files inside archives ):
- 300Кb;
- 1Мb for video files.
7. Filenames should contain only digits, letters of English alphabet and underscores. Using of Russian letters, spaces, quotes and special characters is restricted;
8. Using of Russian letters is restricted in name of the variables and objects. There is only one exception: the banner text.
9. Format of ready project is the .zip archive.

Creative’s preparation advice

You can develop buttons with transfers on different advertiser's pages.

The creative expands with click on definite area and collapses with click on another area. In that case you haven’t to implement functions functionCreativeCollapse and functionCreativeExpand, because the functions will cause expansion on pointing over the banner and collapse on pointing outside the banner.

The creative expands on pointing and collapses with click on definite area or according the timer
Timer time could be setted in banner option or could be implemented in the creative. In case of banner has its own timer the creative must have an ability to collapse itself through calling the function functionCollapse. Please note that you haven’t to implement function functionCreativeCollapse because it will cause banner collapse on touching outside the banner on mobile devices

Canvas content always clears in webkit browsers when canvas changes its size. That’s why you have to redraw canvas after resizing if you created the banner without using programs like Adobe Animate.

Event tracking

The following events tracks automatically:

- Number of banner expansion
- Number of banner collapse

Adding banner in ADFOX

Use template “BannerLine HTML5 [loader]” to add banner in ADFOX.

Specify the settings for banner:

  1. Ссылка на промерочный пиксель — ADFOX pixel uses by default //banners.adfox.ru/transparent.gif. If you need to keep track in other system you have to delete ADFOX pixel and specify another link.

  2. Изображение №1 (до расхлопа) — image for banner before expansion (in collapsed condition). You could specify only th 1st image so BannerLine will be the streamer without expansion.

  3. Изображение №2 (после расхлопа) — image for collapsed condition.

  4. Показывать кнопку "Закрыть" (yes или no) — will be closing cross always shows.

  5. Ссылка к картинке "Закрыть" — upload an image for “close” button.

  6. Цвет фона после расхлопа (#fff) — background color for banner container after expansion. Example values: "#fff", "#f0f0f0" or "rgba(0,0,0,0.4)". It's transparent by default.

  7. Цвет фона до расхлопа (#fff) — background color for banner container before expansion. Example values: "#fff", "#f0f0f0" or "rgba(0,0,0,0.4)". It's transparent by default..

  8. target ссылки для изображений — specify _blank or _top options for the link. If parameter isn’t specified the link will open in current window.

  9. URL перехода — specify the link to advertiser’s site. It’s necessarily to check if there is a protocol mention in the link (http:// or https://) for correct work.

  10. Время жизни расхлопа (секунд) — after that time the banner will collapse by itself.

  11. HTML5 (css, html, js) — content of .html file from project’s archive (upload automatically from archive).

  12. Ширина до расхлопа (в px или 100%) — banner width in collapsed condition.

  13. Высота до расхлопа (в px или 100%) — banner height in collapsed condition.

  14. z-index — z-index block with a banner. Default 999996.

  15. Ширина после расхлопа (в px или 100%) — banner width in expanded condition.

  16. Высота после расхлопа (в px или 100%) — banner height in expanded condition.

  17. Расположение — which browser’s edge banner will be stick to. It also specifies the direction of expand event. Expansion always directs to the centre of browser’s window.
    Available layout options:

Option Description
top Banner sticks to the top of browser’s window and expansion executes downward.
left Banner sticks to the left edge of browser’s window and expansion executes to the right.
bottom Banner sticks to the bottom of browser’s window and expansion executes upward.
right Banner sticks to the right edge of browser’s window and expansion executes to the left.
  1. Кол-во авторасхлопов — the number of expansions for one session.

  2. Время сессии для авторасхлопа — during this time parameter “Autoexpand amount for one session” works. When the session time is up the banner starts to do autoexpand again.

  3. Авторасхлоп всегда — will be banner expanded after initialization (yes/no).

  4. Имя функции для вызова расхлопа контейнера — function which sends to container start of expansion.

  5. Имя функции для вызова схлопа контейнера — function which sends to container start of collapse.

  6. Имя функции для вызова расхлопа креатива — function which sends to banner start of expansion.

  7. Имя функции для вызова схлопа креатива — function which sends to banner start of collapse.

  8. Стили для блока баннера — custom styles in one line for banner’s container. Except for: position, z-index, top, left, right, bottom, width, height, display. For example: “border: 1px solid red;”. Invalid values will be discarded.

  9. Имя атрибута class контейнера баннера — specify a name (or several names with a space) for the class attribute of the container with the banner.