FullScreen HTML

"Русская версия"

Description

Fullscreen HTML - is a fullscreen banner for desktop and mobile browsers. It is impressed over the main content of the website for a short period of time.

Banner is closed after the countdown or when «Skip Ad» button is clicked.

Advertiser’s website is opened on click.

If control panel is on it is necessary to impress «Skip Ad» button (you can add your own image or use default one) and countdown timer. This elements are add by our default control panel (may be turned on while adding the banner in AdFox). Default control panel is positioned in the top of the browser’s window, it could be configured to match the website’s or banner’s design (you can change height, background, font style, inscription, change «Skip Ad» button and turn off the control panel).

Example

Example

Preparation (for developers)

Prepare the HTML code following the instructions:

  1. It might be no more than 65 000 symbols in code.

If your final code consists more than acceptable quantity of symbols, it might be reduced by using JavaScript and CSS in standalone files:

  • save js and css in standalone files (not more than 5 files) with .js and .css extensions;

  • file size must not be more than 300 kb;

You can add this files to your server or to the «Files» section of the campaign.

Click count

If you need to collect statistics on clicks in ADFOX, direct links have to be replaced to variable:

%reference%

To specify location where linked document is opened use a target attribute (_blank, _top, _parent).

Example:

With specifying link inside banner’s code:

<a href="%reference%@link" target="%target%">Advertiser’s website</a>

With specifying link in URL link parameter:

<a href="%reference%@%user1%" target="%target%">Advertiser’s website</a>   

Click count from several links in HTML banner

If there are several links inside banner and you want to count each link separately:

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

1. Direct links replace with %reference% variables in order to count the summary clicks.
2. Using @%event1%-@%event30% redirect user to the wanted webpage.

After all the preparations we have links:

<a href="%reference%@%event1%" target="%target%">First link</a>  
<a href="%reference%@%event2%" target="%target%">Second link</a>
Manager, who adds a banner in ADFOX, have to be notified about compliance of used links and variables.

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

Information for the manager who adds banner in our system:

In the «Events» section of the banner put the links to the advertiser’s website matching it to the event’s number.

Summary clicks would be counted in the banner’s statistics and each link’s clicks would be counted in «Events» section of the banner.
To avoid event’s caching
Also banner’s closing and countdown timer may be implemented via following fuctions:

fullscreenClose_[rnd] — banner’s closing function;
fullscreenGetSecond_[rnd] — returns countdown timer’s time;
fullscreenControlTimer_[rnd] – to stop timer you should send "pause", to start again "resume".  

You can get [rnd] value with JavaScript:

var rnd=%random1% || %random%;  

Example:

window['fullscreenClose_' + rnd]();
window['fullscreenGetSecond_' + rnd]();
window['fullscreenControlTimer _' + rnd](“pause”);
window['fullscreenControlTimer _' + rnd](“resume”).

Adding in AdFox

To add a banner in ADFOX choose necessary Type of banner and «FullScreen HTML» template. If there is no template at you template list it might be added from pre-defined.

Template supports both sync and async codes.

Specify the following parameters:

  1. URL link - specify a link to advertiser's site.
  2. Target - is used to specify the location where linked document is opened:
    _blank - Opens the linked document in a new tab;
    _parent - Opens the linked document in the parent frame;
    _top - Opens the linked document in the new browser’s window.
  3. Add link area on the iframe (yes or no) - if there is no link area inside the banner than using this parameter you can add link area on the whole iframe.
  4. HTML code - banner’s code.
  5. Creative’s width (px or 100%) - banner’s creative width.
  6. Creative’s heigh (px or 100%) - banner’s creative height.
  7. Banner’s z-index - z-index for the creative. Default value: 9999999.
  8. Control panel (yes/no) - yes - control panel will be shown, no - control panel will be hidden. If no - «Skip ad» button and countdown timer should be added inside the banner’s code.
  9. Control panel’s color (#……) - color in HEX format, example: #ffffff.
  10. Control panel’s height (*px) - control panel’s height in px.
  11. Image for «Skip Ad» button - load the image for «Skip Ad» button, which will be shown in the top-right corner of the control panel.
  12. Height of image for «Skip Ad» button (px or 100%) - height for the image (if specified in %, it would be calculated relatively to the control panel’s height). Default - 80%.
  13. Text on the control panel - default is «Return to the website in «» seconds». You can use your own text to show it instead of default one.
  14. Styles for control panel’s text - specify all the styles for the text on the control panel (example: color:red;).
  15. Countdown timer (sec) - for how long (in seconds) banner is being shown.
  16. Background color (rgba) - specify the background for the banner in HEX or rgba format, for example: #000000 or rgba(0,0,0,0.4).
  17. Time before "Close" button shows up (sec.) - the amount of time before "Close" button is showing up, if 0 button will appear at the same time with the banner.
  18. The size of text in "%" calculated relative to the height of the panel (27% by default) - the size of the text, calculated relative to the height of the panel.

Adding the insertion code on the webpage

Insertion code for the FullScreen HTML banner should be put right after opening <body> tag.