Fullscreen HTML5

Fullscreen HTML5 displays any HTML content or image in the format of a fullscreen banner. The banner is displayed for a certain amount of time or until the user closes the banner by clicking Close.

You can upload an HTML creative and/or images when adding a new Adfox banner.

Banner size and position

Banners consist of two elements: a banner wrapper and a container with ad content. The wrapper always occupies 100% of the width and height of the window dimensions. The ad content is always positioned in the center of the screen.

To specify the dimensions of your ad content, use the Banner width and Banner height parameters. You can use percentages and pixels. The size of the browser window is taken as 100%.

Your ad won't get horizontal or vertical scroll bars if its content has larger dimensions than the window, rather the content unit (and therefore the container with the creative) will be scaled down. If the creative isn't adaptive, part of the banner won't be visible to users with smaller screens. In that case, the banner will be positioned:

  • On the left if the banner width is greater than the screen width.
  • On the top if the banner height is greater than the screen height.

You can use images as an alternative to HTML creatives. Placeholder images can change their size inside the content unit following the algorithm specified in the Image position (contain, cover) parameter.

Banner control panel elements

  • Countdown timer to close the banner: You can adjust the visibility and color of the timer.

  • Text next to the timer: You can use custom or default text, Advertisement.

  • The Close button: You can adjust the visibility or delayed display of the button or specify your own image for the button.

  • The More button located at the bottom of the screen, in the center. You can adjust the visibility and the text of the button or specify your own styles for the button.

Format features

For a Fullscreen HTML5 banner to pass the viewability check, at least one of its pixels must be visible in the active browser window for at least 2 seconds.

Tip

International industry standards recommend showing the Close button without a delay (set the display delay for the Close button to 0).

Sample banner

HTML code requirements (for code developers)

To prepare a project with an HTML5 creative, we recommend using the ready-made manual for editors:

Adobe Animate CC

  1. Place two symbols on different layers that will correspond to the banner in the expanded and collapsed states.

    If you need the Close button, add it to the Movie clip of the collapsed state.

    Specify instance names.

    We recommend using instance names expanded, collapsed, and closed for the expanded, collapsed states, and the Close button accordingly. You can then transfer the code samples from this manual to Animate without changes.

    See also:

    Instructions for adding a button and assigning an instance name

    Button on the main scene

    1. Create an object on the scene, for example, using Rectangle Tool. Then select the object and select Convert to Symbol... in the context menu.

    2. In the window that appears, select Type: Button. You can leave Name unchanged. Then click Ok.

    3. For the click to work, assign an Instance Name to this button.

    4. Write the code for this button in Actions:

      window.buttons.push(
//Separate the buttons paths with a comma, adding this first
this.button1
//End of button space
);

    Nested button

    1. Let's say that the button is inside another symbol, for example, Movie Clip. In this example, this Movie Clip has the Instance Name “name”.

    2. Double-click to go inside name. The nested button is there.

    3. When you specify the path to this button in Actions, you need to add the object's Instance Name after this where it's nested:

      window.buttons.push(
//Separate the buttons paths with a comma, adding this first
this.name.button1
//End of button space
);

  2. Select one of the templates depending on the scenario in the banner.

    Download the template and connect it to the project:

    Templates for Animate version 15 and below:

  3. Depending on the scenario of the banner, add one of the code samples to the Actions layer:

    One clickable area and expand on hover

    //Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
setAdfox();

    Multiple buttons and expand on hover

    //Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
window.buttons.push(
//Separate the buttons paths with a comma, adding `this` first
this.expanded.button1, this.expanded.button2, this.expanded.button3, this.expanded.button4
//End of button space
);
setAdfox();

    One clickable area and expand/collapse on click

    //Change instance name if needed
expanded = this.expanded;
collapsed = this.collapsed;
close = this.expanded.close;
setAdfox();

    Multiple buttons and expand/collapse on click

    //Change instance name if needed
collapsed = this.collapsed;
expanded = this.expanded;
close = this.expanded.close;
window.buttons.push(
//Separate the buttons paths with a comma, adding `this` first
this.expanded.button1, this.expanded.button2
//End of button space
);
setAdfox();

  4. Publish the project and package it in a ZIP archive.

  5. If you use the option with multiple buttons, make sure to keep track of instance names of the buttons and their corresponding purpose. You'll need this information when adding an HTML creative to the Adfox interface.

    For example:

    this.expanded.button1: A link to the product page.

    this.expanded.button2: A link to contacts.

    After adding the banner in the Adfox interface, specify the links on the Events tab.

    The first instance in the line of code will correspond to the Event 1 parameter of the banner. You can use any name for the event.

Google Web Designer

  1. Download a banner template for Google Web Designer.

    You can use this banner code as a basis for making creatives in the editor. Put the contents of the archive into the folder with the program templates, for example:

    /Users/[USER_NAME]/Documents/Google Web Designer/templates

    The template contains an adfox_HTML5.js script and a set of parameters for clicks and event counters to work correctly:

    %request.reference_mrc%, %user1%, %eventN%, where N is the event number from 1 to 30.

  2. Click processing.

    All events are assigned to animation elements on the Events tab.

    The Tap area component is used for calling actions.

    Add it and select the Tap Area → Touch/Click.

    On the Custom code tab, select the call of the click function.

    • If a single button is used: callClick();

    • If multiple buttons are used: callClick(n); where n is the number of the event to be called.

    • If you need to call an event from an animation without a click, use the following code:callEvent(n); where n is the number of the event to be called.

    How to use a stretching banner.

    To make the banner stretch across the width of the container on the site, specify percentages instead of pixels for the banner location and dimensions on the Properties panel.

    Use the Align by container and Fluid layout options on the top toolbar.

    If you enable Fluid layout before using any alignment tools, when you change the parent container size, all elements are aligned relative to each other and relative to the container size.

    You can simultaneously use both the relative sizes of elements in percentages and absolute sizes in pixels.

    Sample ready-made project in Google Web Designer, source file.

  3. Publish the project.

    The project has to be published with the following settings:

    • Collect files enabled;
    • Create ZIP archive enabled;
    • Groups unpacking enabled;
    • CSS prefix enabled for WebKit and Mozilla.

Note

When adding a banner to Adfox, the manager needs to know the button and event number correspondence. For each event, the manager adds its own click link, which is then passed to the banner code using a variable.

Tips for preparing your creative

The window.destroyBanner() method is available in the HTML frame. This method completely destroys (closes) fullscreen.

Sample code for the Close button:

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

Placeholder image requirements

Allowable image formats: JPG, PNG, GIF. Maximum file size: 300 KB.

Requirements for custom (close) buttons

Allowable image formats: JPG, PNG, GIF. Image size shouldn't exceed 50 x 50 px.

Add a banner to Adfox

To add a banner to Adfox, select the banner type you need and the Fullscreen HTML5 [context] template.

Set the banner parameters:

  1. Archive with HTML5 creative: Upload a ZIP archive with the project.

  2. TARGET links: Select the window where the background image link opens:

    • _top: Current window.
    • _blank: New window or tab, depending on the browser settings.

  3. Tracking pixel link: By default, the Adfox //banners.adfox.ru/transparent.gif pixel is used. If you want to count impressions in a third-party system, delete the Adfox pixel and specify another link.

  4. Click URL: Enter the link to the advertiser's site. For the click to work correctly, make sure that the link includes the protocol (http:// or https://).

  5. HTML5 (CSS, HTML, JS): The content of the HTML code from the archived project (loaded from the archive automatically). If no HTML5 code is specified, upload a placeholder image for the banner.

    For a creative, only the area inside the creative is clickable.

  6. Banner width (in px or 100%): The width of the main HTML content of the banner (px or %). If the width is specified as a percentage, the width of the parent of the banner container is taken as 100%.

  7. Banner height (in px or 100%): The height of the main HTML content of the banner (px or %).

  8. Name of the banner container class attribute: Specify the class for the banner container. All relevant child elements also receive classes generated following the BEM methodology principle based on the specified class.

    All elements:

    • header: Control panel.
    • header__close: The Close button.
    • header__adv-block: A block with the Advertisement text.
    • more__button: The More button.

    For example, if you specify the my-site-fullscreen class, the close button will have the my-site-fullscreen__header__close class.

  9. Text on the control panel: The text on the control panel next to the timer. By default: Advertisement".

  10. Show the “More” button (yes|no): Specify whether or not to show the More button on the banner:

    • yes: Show the button.
    • no: Hide the button.

  11. Text on the “More” button: Specify the text for the More button. If no text is specified, but the button should be shown, the default text will be More".

  12. Visible control panel (yes|no): Configure the visibility of the control panel:

    • yes: Show the panel. Specify the Time of the banner impression (seconds) parameter.
    • no: Hide the panel.

  13. Vertical image: The image displayed when using vertical orientation.

    Horizontal image: The image displayed when using horizontal orientation.

    You can fill in only one of the parameters, and then the same image will be used for both vertical and horizontal orientation.

  14. Image position (contain, cover): Specify the location of the placeholder images inside the banner and how they should scale. Acceptable values:

    • contain: The size of the banner is the same as specified by the advertiser and doesn't depend on the size of the container. If the image size is larger than the banner size, the image is scaled proportionally to occupy the entire banner area. The image center is in the center of the block. You must specify the height of the banner.
    • cover: The size of the banner is the same as specified by the advertiser and doesn't depend on the size of the container. If the image size is larger than the banner size, the image is scaled proportionally so that it's fully visible. The areas where there's no image are transparent. The image center is in the center of the block. You must specify the height of the banner.

  15. Time of banner impression (seconds): The time in seconds for which the banner should be displayed. The countdown starts from the moment the banner appears.

  16. “Close” button display delay (-1: don't show), in seconds: The time between the banner appearance and the Close button display in seconds.

    Sample values:

    • 0: The button is displayed immediately, without delay (by default, recommended).
    • -1: The button is hidden.

  17. Style for the “More” button: Specify the CSS style for the More button. For example: background-color: #f00, color: #fff, border-radius: 10px.

  18. Custom “Close” button image: Upload an image or provide a link to the image for the Close button. You can use any JPG, PNG, and GIF images with a maximum size of 50 × 50 pixels.

  19. Closing timer color: Specify the color for the closing timer in any format available in CSS. For example: #404994.

  20. Under Advertising label settings:

    • In the Ad label list, select Ad or Social ad, and the label will be added to the banner. If the creative's design already includes the label, you can keep “Disabled” in the drop-down list.

      Note

      Adding the “Social ad” label doesn't automatically define the creative content as social ad. To label creative content as a social advertisement in the state register, select Social ads contract for the corresponding contract with the end advertiser.

    • In the Domain field, specify the advertiser domain, and it will be added to the label: “Ad | example.com” or “Social ad | example.com” (only if you select Ad or Social ad in the drop-down list).

  21. To add a token to a non-clickable banner, enable the Show banner menu option in the banner settings. When the banner is served, the menu icon  will be displayed in the upper right corner of it. When a user clicks this icon, the advertiser information and the copy token button appear (if ad register is enabled for the banner and a third-party token is specified).

    The banner menu contains a link to the rules for using recommendation technologies. That is necessary to comply with paragraph 3, section 1, article 10.2-2 of Federal Law No. 149-FZ On information, information technologies, and information protection", dated July 27, 2006.

    Note

    If a banner is non-clickable (the Transition URL field is not filled in) and it is to be added to the ad register, be sure to show the banner menu. This is the only way to make the token available when serving the banner.

  22. Settings for Russian ad register: The section is only available if the Submit data to state register procedure is selected in the campaign settings. Fill in the fields in this section to register the creative in the Yandex advertising data operator. The creative is assigned a token automatically.

    Note

    If a specific banner doesn't need to be added to the ad register, select Do not submit data to state register.

Contact support

Send an email

Previous
Banner Slider
Next
Carousel