HTML-Banner (HTML5)

1. Banner summary

If a banner should be shown only after a user scrolls down to its placement, you can use special Ajax code or Poster code. In other cases we recommend to use standard Ajax and Extension codes.

2. How to prepare a banner

Prepare HTML-code for a banner. It can be any HTML-code, including HTML5, which represents standard HTML-layout. Code can contain CSS styles and JavaScript. We recommend placing CSS and JavaScript blocks inside HTML-code of your banner. However you can still use separate files, if it is necessary.

Note: if you are using relative paths to banner files, all files should be placed in the same folder as the main HTML-file of the banner. There should not be separate folders for images, scripts and media files. All file names should contain only English letters, numbers or the underscore character and should not contain spaces, quotes, the dash character or any other special characters.

3. How to register clicks in a banner

3.1. Standard HTML-creatives

In HTML-banners clicks are not being registered by default. To realize click registration, the file index.html (main file of HTML-banner) should be modified according the following instruction:

1. Open index.html file with a text editor. Include html.js file in the script tags:

   <script src="/html.js"></script>

   If the banner is located on external server and will not be downloaded in AdRiver, specify the full path to html.js file:

   <script src="//content.adriver.ru/html.js"></script>

   Note: you don’t have to download or create html.js file by yourself. This plugin is stored on AdRiver servers and you only have to include it in the script tags correctly.

2. To redirect a user and register a click call ar_callLink() function. If a function is called without parameters, the user will be redirected to URL, which was specified when the banner was added in AdRiver system. Function can take object parameter. Properties that can be specified:
   • target – can be _blank, _top or _self and specifies whether the link should be opened in a new window, in the current window or in the banner iframe
   • other – is a string, which specifies the alternative URL on which a user should be redirected
   • event – event object (click, mousedown etc.). If event object is passed, into the click link will be added coordinates of the click inside the banner iframe

   All properties are optional.

   ar_callLink can be called on any event for any tag in the banner code, for example:

   <div class="button" onclick="return ar_callLink({target: '_blank', other: '//ya.ru', event: event});">Visit site</div>

3.2. HTML-banners created by Swiffy Converter

3.2.1. Banners with one link

The following solution assumes that the converted Flash banner was prepared in accordance with common requirements for banners in AdRiver and contained the variable link1.

1. Open HTML-file created by Swiffy Converter with a text editor
2. Include html.js file:

   <script src="/html.js"></script>

   If the banner is located on external server and will not be downloaded in AdRiver, specify the full path to html.js file:

   <script src="//content.adriver.ru/html.js"></script>

   Note: you don’t have to download or create html.js file by yourself. This plugin is stored on AdRiver servers and you only have to include it in the script tags correctly. It is not recommended to specify the protocol precisely. Characters // allow to determine the protocol automatically.

3. Declare the variable named link1 as follows:

   var link1 = encodeURIComponent(ar_redirect);

4. After calling stage.start() function insert the code specified below:

   stage.setFlashVars('link1='+link1);

3.2.2. Banners with several links

This solution assumes that the following requirements were met before convertion:

• Flash banner was prepared in accordance with common requirements for banners in AdRiver
• Each link had its own click-area (button)
• For each link its own variable link1, link2, link3 etc. was used

The example of ready for convertion Flash-banner:

// element button1
on (release) {
       getURL(_root.link1,"_blank");
}
// element button2
on (release) {
       getURL(_root.link2,"_blank");
}
// element button3
on (release) {
       getURL(_root.link3,"_blank");
}

1. Open HTML-file created by Swiffy Converter with a text editor
2. Include html.js file:

   <script src="/html.js"></script>

   If the banner is located on external server and will not be downloaded in AdRiver, specify the full path to html.js file:

   <script src="//content.adriver.ru/html.js"></script>

   Note: you don’t have to download or create html.js file by yourself. This plugin is stored on AdRiver servers and you only have to include it in the script tags correctly. It is not recommended to specify the protocol precisely. Characters // allow to determine the protocol automatically.

3. Declare the variables named link1…linkN as follows (where N is the number of links):

   var link1 = encodeURIComponent(ar_redirect + encodeURIComponent("http://url1"));
   var link2 = encodeURIComponent(ar_redirect + encodeURIComponent("http://url2"));
   ...
   var linkN = encodeURIComponent(ar_redirect + encodeURIComponent("http://urlN"));

4. After calling stage.start() function insert the code specified below:

   stage.setFlashVars('link1='+link1);
   stage.setFlashVars('link2='+link2);
   ...
   stage.setFlashVars('linkN='+linkN);

4. Banner requirements

All file names should contain only English letters, numbers or the underscore character and should not contain spaces, quotes, the dash character or any other special characters.

File size restrictions:

• simple graphic files (png, jpg, jpeg) – 600 Kb
• swf files – 600 Kb
• other file types – 600 Kb
• banners consisting of several files – 600 Kb for each file

If file size exceeds these limitations, banner can be loaded to an external server. In this case when adding a new banner in AdRiver system, a user should specify the full path to the main banner file in a special field – “Расположение на стороннем сервере” ( location on an external server). For HTML-banner it is path to index.html file for Iframe code, path to script.js file for banners on Poster/Extension/Ajax codes. All banner files should be located in one folder.

It is possible to increase file size limits, if banner can’t be hosted on external server. This additional service must be agreed with sales and support departments.