HTML-Fullsreen

1. Banner summary

ID Number: 68H080.
Short description: splash screen banner.
Code type: AjaxJS.
Specification: FullScreen banner on code AjaxJS: the banner is shown on the current page, IFrame is placed above the site content, in which the banner creative is created using html/css/js. Banner occupies 100% of the screen’s width and height.

2. Banner preparation

Download the archive.

2.1. Preparation of the script.js file

Open the file script.js.

In the editable part of the script change the values of parameters ar_html and ar_pix on your own:


/*********editable-block********/
var ar_html	= 'index.html';
var ar_pix	= '';
/****************************/

ar_html – name of the banner file. Enter your file name. If the file is to be loaded from the outer server, enter the full address starting with «http: //». In this case you don’t have to download the file in AdRiver interface.
ar_pix – this variable contains a link to call the outer counter. If the counter is not used, leave the variable blank.

2.2. Preparation of the index.html file

Open the file index.html in a simple text editor. In the tags <head></head> should be included the script adriverFullscreen.js. To include the script add the following line:

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

If necessary, adriverFullscreen.js file can be hosted on outer server. In this case src parameter should contain the full path to the file on the server, e.g:


<script src="http://www.samplesite.com/scripts/banners/htmlfullscreen/adriverFullscreen.js">
</script>

If adriverFullscreen.js file is loaded from the outer server, you don’t have to download it in AdRiver interface (in item 3).

To define in index.html any of the required elements, a special class must be assigned to the tag, which contains this element. Required elements and their corresponding classes are given below.

Click element «Learn more»

With the help of «Learn more» link a visitor is redirected to the target site. “adriverClick” class should be assigned to html-tag containing this link.

By default, the link opens in a new window. If the link is to be opened in the current window, an attribute “data-target” with the value “_top” should be specified.

By default, the visitor is redirected to the URL-address, which is defined in AdRiver interface.

If the banner contains several links, in corresponding <a> tag should be specified the attribute “data-redirect”. The value of this attribute should contain URL-address on which the visitor will be redirected after the click.

If the banner has only one link, the attribute “data-redirect” can be omitted.

Example:


<a class="adriverClick adriverClose">Learn more</a>

*in the example above both classes (“adriverClick” and “adriverClose”) are specified, as after the click the banner firstly closes, and only then the user is redirected.

Below you can see the example for the case when the banner has several links with the different URL-addresses and it has to be opened in a current window.


<a class="adriverClick adriverClose" data-redirect="http://www.samplesite.ru" data-target="_top">Learn more</a>

<a class="adriverClick adriverClose" data-redirect="http://www.news.samplesite.ru" data-target="_top">Learn more</a>

The button “Skip Intro”

The “Skip Intro” button closes the banner. The class “adriverClose” should be assigned to the corresponding html-element. You can use any text on this button.

Example:


<a class="adriverClose">Skip intro</a>

Time counter before automatic banner closing “Timeout”

Timeout starts immediately after the banner creative is loaded. The value of a countdown is displayed. Usually, timeout is set to 5-15 seconds. However, it is important to know that each site has its own requirements for the Timeout counter: for example, the duration of the timeout on Mail.ru is 7 seconds. Therefore, we advise to precise the requirements for the Timeout on a particular advertising site before creating a banner.

“adriverReturn” class should be assigned to html-tag containing the Timeout counter. A tag can have the following attributes:

attribute “data-time” – specifies the time until the automatic banner closing
attribute “data-message” – a message of closing

Example:


<a class="adriverReturn" data-time="7" data-message=" %time% seconds before going back to the site."></a>

where %time% is the number of seconds before the automatic banner closing (it is calculated and changed automatically).

The element that stops the Timeout counter

Timeout can be stopped with the help of “Stop counting” element. This element should have an assigned “adriverPause” class.

Example:


<a class="adriverPause">Stop</a>

3. Banner loading in AdRiver interface

Add a banner special → AjaxJS → Generic_AjaxJS
Enter a link to the advertiser’s website in the field “Линк баннера” (Banner Link). If necessary, specify other options
Click the “Добавить” button (Add). This will take you to the banner editing page
Turn on the banner, choosing the box “Вкл.”, specify the required settings. Click the Save button to save the selected settings
Click on the link “Загрузить баннер” (Download a banner)
Download the file script.js, prepared in item 2.1.
Download the file index.html, prepared in item 2.2
*if in item 2 the full address was specified in ar_html parameter, you don’t have to download the index.html file in the interface.
Download the adriverFullscreen.js file from archive, which you have downloaded in item 2
Click the “Загрузить” button (Download)

The size of downloaded files should satisfy the specification.

4. Operability test

If you click on “Learn more” element, a window with an advertiser’s site should appear
If you click on “Skip intro” you should be returned to the site from which the banner was called.

5. File size limits for banners in AdRiver system

for standard graphic files (in the interface they are designated as img width x height) – 600 KB
for the swf-files (in the interface they are designated as flash width x height) – 600 KB
for other file types – 600 KB
for multicomponent banners limits are checked separately for each banner component

If the size of a banner component is greater than 600 KB, you can use the box “Расположение на стороннем сервере”, in which you should insert the full pathname to the banner component on an external server.

For the banners that can’t be loaded from an external server it is possible to increase the limits of the file size. The additional increase of the loaded banner size is agreed with commercial department and technical support departments.

Last modified on 29.03.2016