Background HTML5

Description

Background HTML5 is a banner that allows you to replace the site background with an HTML creative or image.

Using the Banner Background HTML5 template, you can add a background to a site in two ways:

  1. Only prepare the background image and the clicklink. It's important that the size of the background image doesn't exceed the allowable size limit in the account.
  2. Prepare an HTML creative in the editor. To work with Adobe Animate CC or Google Web Designer editors you can use the ready-made manual.

You can use the following banner features in Adfox:

  • Show the background image on the edges of the site, and with the shift of the site content.
  • Add several buttons leading to different pages of the advertiser's site (only for HTML creatives).
  • Flexibly configure additional elements on the site that overlap the background image.
  • Set the position of the background image when scrolling through the site content.
  • You can specify the banner width and height both in pixels and as a percentage (100%).
  • The HTML creative code can be adaptive. For that, you need to specify the banner size as a percentage.
  • The availability of the click URL in the banner parameters determines the clickability of the banner with the image.

Format features:

  • Viewability check for the HTML5 Background format is only performed if at least 1 px of the banner is in the active browser window for at least 2 seconds.
  • We don't recommend using this format on mobile devices, because a part with the background image often remains outside the mobile device screen.

Sample banner

Image requirements

Prepare a background image that should be equal in width to the width of the site + the width of the background side edges.

The size of the background image shouldn't exceed the allowed size limit in the account (300 KB by default).

The background image can be both an independent banner (in that case, you don't need to prepare the HTML creative) or a placeholder that will appear if the user's browser doesn't support the HTML5 code of the creative.

HTML creative requirements (for code developers)

Prepare your project with an HTML creative complying with the following requirements:

  1. The maximum allowed number of characters in the HTML code is 65,000.

  2. It's best to place JavaScript and CSS inside the HTML code of the banner. If the final HTML code exceeds the maximum allowed size, reduce it by splitting JavaScript and CSS into separate files:

    1. Save the JS and CSS code in separate files with the .js or .css extension.

    2. File weight can't be more than 300 KB.

    3. Upload the files to the Files tab of the ad campaign and embed the resulting links to the files in the HTML code.

      • If absolute links (src="js/script.js", src="css/style.css") are included in the project, then when the project is uploaded, Adfox recognizes the file paths, automatically uploads them to the Files tab, and replaces all links to these files in the uploaded project.

      • If relative links (for example, src="../js/script.js") are included in the project, use one of the following methods:

        • Replace the links to the .js and .css files with absolute links: Adfox parsing will work and all of the links will be replaced automatically.
        • Manually upload the .js and .css files to the Files tab. Then get links to these files in Adfox and replace the relative links with them in the HTML code.

      Example of connecting JS and CSS files:

      <script type="text/javascript" src="LINK_TO_FILE"></script><link rel="stylesheet" type="text/css" href="LINK_TO_FILE" />

  3. The project can contain only one file with the .html extension.

  4. The maximum allowed number of files in a project is 50.

  5. File types allowed in the project: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, and SWF.

  6. The maximum size of each file (this applies to archived files as well):

    • 300 KB.
    • 1 MB for video files.

  7. File names must only contain numbers or Latin letters and an underscore character. You can't use spaces, quotation marks, and special characters in the file name.

  8. The completed project is a ZIP archive.

    To place the creative in the center, you need to set the central location in the editor settings. For example, in Adobe Animate CC, go to Publish Settings → Center Stage:

Note

When preparing an HTML creative for the background on the edges of the site, we recommend using two images: one for the left edge and the other one for the right edge.

The part of the background that will be located under the site content must have the same width as the site content and it must be made transparent. To do that, set background-color=alpha 0.

Add a banner to Adfox

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

Set the banner settings:

  1. Archive with HTML5 creative: Upload a ZIP archive with the project and leave the HTML5 creative code field empty (it will be filled with the contents of the HTML file of your project after you add the banner).

  2. 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.

  3. Click URL: Specify the link to the advertiser's site that will be applied to the background image. For the click to work correctly, make sure that the link includes the protocol (http:// or https://).

  4. HTML5 creative code: Leave the field empty because the HTML code contents will be automatically uploaded here from the project archive.

  5. Banner width (px or 100%): Specify the width of the banner, which includes the width of the site content and the width of the two side images. You can specify a width of 100%, which is equal to the width of the browser window.

    If you specify the width in % for an HTML creative, it should be made stretchable (rubber).

  6. Banner height (px or 100%): Specify the height of the banner. You can specify a height of 100%, which is equal to the height of the browser window.

    If you specify the height in % for an HTML creative, it should be made stretchable (rubber).

  7. General background color (rgb in hex: for example, fff): Specify the background color of the page if the banner is placed in the BODY (that is, the Banner container selector parameter is not specified).

  8. Selector of additional clickable elements (for example, #content): Specify the selectors of elements that are located in the content area of the site but are transparent (you can see the creative through them). A click on these elements is accompanied by a click. The selectors are separated by commas.

    The description of selectors must correspond to the CSS syntax. For example:

    • #content: Specify a single selector by the content ID.
    • #content,.clickable-block: Specify two selectors separated by a separator.

  9. Banner container selector (for example, .ya-ad-container): A special container in which a block with a background will be embedded. If you don't specify this parameter, BODY will be used as the container. The description of selectors must correspond to the CSS syntax.

  10. Banner top edge shift (px or %): Shift of the top edge of the banner. Positive values shift the banner down, negative values shift it up.

  11. Background position (absolute or fixed): Specify the background position:

    • absolute: The position of the banner will be absolute relative to the container. It will scroll during scrolling.
    • fixed: The position of the banner will be fixed relative to the container. It will remain in place during scrolling.

  12. Container selector for content shift (for example, .header): Specify the container selector after which a transparent block will be added that will shift the content. If no container is specified, the block will be added to BODY as the second element, right after the ad block.

    The description of selectors must correspond to the CSS syntax.

    This parameter requires a positive value in the Number of content shift pixels (px) parameter.

  13. Number of content shift pixels (px): The number of pixels to shift the content by. The number must be positive.

  14. Banner block z-index: z-index of the block with the banner. Not specified by default.

  15. Target for background image link: Determine in which window to open the link for the background image:

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

  16. ContainerBackgroundColor: Specify the background color for the special container (if a value is set for the Banner container selector parameter), in which the block with the background will be embedded. Format: rgb in hex, for example, fff.

  17. BackgroundPosition: The background-position CSS property for a container with a banner image. By default, the value is set to '50% 0'.

  18. Background image: Upload a background image that will be displayed as an independent banner (if the HTML5 creative is not specified).

  19. Additional styles for body tag: CSS styles to be added to the body element on the page (styles will be applied to the body regardless of which element is set as the main element for the background placement).

  20. Align banner by the edge (left or right): This parameter only works if the banner width is not specified as a percentage. It can take the following values: left (left positioning) or right (right positioning).

  21. 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).

  22. 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.

  23. 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
InPage video
Next
Telegram banner