Fullscreen HTML5

Description

This template works only with insert codes that use loader.js library - in document such codes are marked NEW .

Fullscreen HTML5 - displays any html content or image in full screen banner format.

Banner is shown by timer, which can be set in ADFOX interface, or until the user closes the banner by clicking "Close" button.

Banner consists of two parts - banner wrapper (background and control panel) and container with advertising content. Wrapper always takes 100% of the width and height of the window. Advertising content is always located in the center of the screen.

"Banner width" and "banner height" for advertising content can be set in the banner parameters. You can specify units in percents or pixels. Browser viewport accepted as 100%.

If content dimensions are larger than the window dimensions, horizontal or vertical scroll bars will not appear, and content block (and container with the creative) will be smaller.
If the creative is not adaptive, this will result part of the banner will be unavailable for viewing to users with a small screen size.
In this case, there are two variants of banner positioning:
  - on the left - if the width of the banner is greater than the width of the screen;
  - above - if the height of the banner is greater than the height of the screen.

As an alternative to creatives, you can use stub images. Rules for specifying dimensions are similar, but stub image can change its dimensions inside content block according to the algorithm specified in the "Image, cover" parameter.

Banner features available when added to ADFOX:
- Adding HTML creatives and / or images.
- Banner control panel consists of the following elements:
    "Mute / Unmute" button: adjustable visibility and sound on playback start, it is possible to specify custom images for buttons;
  countdown timer before the banner is closed: timer's visibility and colour is adjustable;
  text next to the timer: arbitrary text or default text "Advertisement”;
"Close" button: visibility and deffered display are adjustable, it is possible to specify custom image for it;
  
  "Details" button, located at the bottom center of the screen. Visibility and text of the button is adjustable, it is possible to specify custom CSS styles for it.
  

Features of the format:
- Visibility check of the Fullscreen HTML5 format begins only if at least 1px of the banner is in the active browser window for at least 2 seconds.

Recommendations
Here are the tips that will help your ads match new IAB Russia recommendations on quality advertising:
- always show "Close" button without delay (use value 0).

HTML code requirements (for code developers)

Please, use the following documentation to prepare HTML5 Creative in editors:
  Adobe Animate CC;
  Google Web Designer.

HTML5 Creative preparation tips:

In the HTML frame, the method window.destroyBanner() is available, which will completely destroy (close) the fullscreen.

Example:

this.close.addEventListener("click", function (e) {
    var t = e.nativeEvent;
    if (t.which == 1 || t.button == 0) {
        window.destroyBanner();
    };
});

Stub image requirements

Acceptable image formats: png, gif, jpg.
Maximum filesize is 300Kb.

Custom control buttons requirements (turn sound on / off, close)

Acceptable image formats: png, gif, jpg.
Maximum dimensions 50х50px.

Adding a banner to ADFOX

To add a banner to ADFOX, select banner type and template "Fullscreen HTML5 [loader]".

Specify parameters of the banner:

  1. Архив с HTML5 креативом (HTML5 creative archive) - upload *.zip with your project

  2. "TARGET" ссылки ("TARGET" of the links) - specify target window:
       "_top" - in the current window;
       "_blank" - in a new window or tab, depending on the browser settings.

  3. Ссылка на промерочный пиксель (Tracking pixel link) - by default the ADFOX tracking pixel//banners.adfox.ru/transparent.gif is used, if it is necessary to record hits in a third-party system, delete ADFOX pixel and specify another link.

  4. URL перехода (Referrer URL) - specify the link to the advertiser's site. For correct operation of the transition, please check protocol in the link (http:// or https://).

  5. HTML5 (css, html, js) (HTML5 (css, html, js)) - contents of the .html code from the archive with the project (loads automatically from archive with creative). If there is no code, upload stub image for a banner.

  6. Ширина баннера (в px или 100%) (Banner width (“px” or “%”)) — width of the main HTML of the banner (px or %). If the width is defined in percents, then the width of the parent container is taken as 100%.

  7. Высота баннера (в px или 100%) (Banner height (“px” or “%”)) — height of the main HTML of the banner.

  8. Класс контейнера с баннером (Banner container class) — define class of the banner container. All significant child elements will get classes also will get classes according BEM methodology based on this parameter.

  9. Показывать кнопку "Подробнее" (yes|no) (Show "Details" button (yes|no)) — select whether you want to show "Details" button or not:
    yes - show button;
    no - hide button.

  10. Текст на кнопке "Подробнее" ("Details" button text) - specify text for "Details" button. If the parameter is empty, button will be shown. Default text is "Details".

  11. Наличие панели управления (yes|no) (Control panel (yes|no)) - select whether you want to show control panel or not:
    yes - show control panel;
    no - hide control panel.

  12. Текст на панели управления (Control panel text) - text on control panel, near timer. Default value is "Advertisement".

  13. Изображение для HTML-заглушки (Stub image) - upload stub image. Whole image will be clickable except of control panel.

  14. Расположение картинки (contain, cover) (Stub image scale) - select stub image scale method:
    contain - banner size will be fixed, as defined by advertiser and won't depend on the size of container. If the image size is larger than the banner size image will be proportionally scaled so that the whole area of the banner will be occupied by the image& Center of the image will be located in the center of the container. Be sure to specify height of the banner;
    cover - banner size will determined by advertiser and will not depend on the container size. If the image size is larger than the banner size, then image will be proportionally scaled so that the image is completely visible. Image-free areas will be transparent. The center of the image will be located in the center of the block. Be sure to specify the height of the banner.

  15. Время показа баннера (секунды) (Banner display time (seconds)) - specify the time period in which banner has to be shown. Timer begins to count on banner load.

  16. Задержка показа "Закрыть" (-1 - не показывать) сек ("Close" button appearance delay ("-1" - doesn't show at all)) - time between appearance of the banner and "Close" button display.

  17. Стиль для кнопки "Подробнее" ("Details" button styles) - specify CSS styles for "Details" button. For example: "background-color: #f00; color: #fff; border-radius: 10px;".

  18. Собственная картинка кнопки "Закрыть" ("Close" button custom image) - upload image or provide link for "Close" button. Acceptable image formats: jpg, png, gif. Not larger than 50x50 pixels.

  19. Цвет таймера закрытия (Banner timer colour) - specify colour for countdown timer in CSS format. For example: #404994.