Banner HTML5

Description

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

Banner HTML5 — is the banner with custom HTML content. HTML code could be usual HTML page with styles and scripts. This code puts into iframe and has limited access to platform content.

You could add banner with this template in two different ways:
1. If you have the images only. If there's a URL referrer in banners' parameters the image will be clickable.
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:

- width and height settings
- custom CSS-styles for banner container

Example

Example

HTML code requirements

1. Maximum number of symbols — 65 000;

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;
- Maximum size for each file is 300kb.
- Open tab “Files” in the ad campaign then add .js/.css files there.
- Copy the links of your files from the tab then insert them into HTML code.

Example of .js and .css files import:

<script type="text/javascript" src="LINK_TO_THE_FILE"></script>

<link rel="stylesheet" type="text/css" href="LINK_TO_THE_FILE" />
Use of relative paths in HTML-code is prohibited.

2. Banner click counting

To count banner clicks it's necessary to write in а tag the variable:

%banner.reference_user1%

Also use target attribute with %banner.target% variable.

If there's no attribute link will be opened inside iframe so the advertiser's site will be shown on banner's place.

HTML example for banner click counting:

<a href="%banner.reference_user1%" target="%banner.target%">Advertiser's site</a>   

3. Banner click counting from several links

In case of banner has several links for different advertiser's pages and you have to get referrals number.

<a href="http://site.ru" target="_blank">First link</a>  
<a href="http://site.ru/about/" target="_blank">Second link</a>

Replace href attribute values to variables %request.reference%@%banner.eventN% where N is for event number from 1 to 28.

Example:

<a href="%request.reference%@%banner.event1%" target="%banner.target%">First link</a>  
<a href="%request.reference%@%banner.event2%" target="%banner.target%">Second link</a>

It's necessary to tell the manager who adds banners in ADFOX about Matches between links and variables. The manager has to set first link for Event 1 and second link for Event 2.

First link - http://site.ru - %banner.event1% (Event 1).
Second link - http://site.ru/about/ - %banner.event2% (Event 2).

HTML5 Creative’s requirements

1. There could be only the one html file in the project;
2. Maximum number of project files — 50;
3. The following file formats are supported: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
4. Maximum size for each file ( including files inside archives ):
- 300Кb;
- 1Мb for video files.
5. Filenames should contain only digits, letters of English alphabet and underscores. Using of Russian letters, spaces, quotes and special characters is prohibited;
6. Using of Russian letters is restricted in name of the variables and objects. There is only one exception: the banner text.
7. Format of ready project is the .zip archive.

Images requirements

Use high-resolution images to improve banner quality on mobile devices despite this could decrease download speed of the banner.

We highly recommend to reduce image sizes using services like TinyPng. This service works with PNG and JPEG.

You can use SVG images. SVG is vector format so it looks better on all kinds of device (mobile and desktop). Additionally SVG has lower size and can be animated.

The following formats are supported: png, gif, jpg, svg.
Maximum file size: 300 Kb.

Adding banner in ADFOX

Choose necessary banner type and template "Banner HTML5 [loader]" to add banner in ADFOX.

Specify the settings for banner:

  1. Ссылка на промерочный пиксель (Tracking pixel link) — 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. URL перехода (URL referrer) — 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.

  3. HTML5 (css, html, js) — upload *.zip-archive with your project made in HTML editors or paste HTML-code.

  4. Ширина (укажите размерность: px или %) (Banner width (px or %)) — specify banner width.

  5. Высота (укажите размерность: px или %) (Banner height (px)) — specify banner height..

  6. Изображение (Image) — uploas the image.
    Creative's display variants:
    - HTML-code and an image addded - the HTML-code will be shown.
    - an image added - the image will be shown.
    - HTML-code added - the HTML-code will be shown.

  7. "TARGET" ссылки ("target" link parameter) — specify where the link will be opened.
    Possible values:
    _blank - in a new window/tab;
    _top - in current window.

  8. Использовать SafeFrame (yes|no) (Enable SafeFrame) — safeFrame is a technology that wraps ads in a special API-enabled iframe. SafeFrame restricts interaction with parent window and prevents collecting data for advertisment that is being placed inside.
    yes - enable safeFrame and restrict access to web page;
    no - do not enable safeFrame. Banner code would be able to access web page.

  9. Стили для блока баннера (Banner block styles) — custom styles in one line for banner’s container. Except for: display. For example: “border: 1px solid red;”. Invalid values will be discarded.