Technical requirements for a banner with expandable block

The HTML5 banner with expandable block is a ZIP archive containing two HTML files (the main banner and the expandable block), as well as JavaScript, JSON, CSS, JPEG, GIF, PNG, SVG, and MP4 files. You can add several variations of your main HTML5 banner to be served on different screens:

Screen Regular HiDPI
Size of the main banner in pixels 728 × 90 1456 × 180
Maximum archive size 21 MB 21 MB
Maximum video size (unpacked file) 20 MB 20 MB
Maximum weight of the banner content without video (unpacked files) 1 MB 1 MB

The archive and its files must meet the following requirements:

General requirements
  1. The file and directory names can only contain Latin letters, digits, and the symbols -._~.

  2. All links in an HTML5 file must be relative and lead to other files in the archive.

  3. The archive can contain up to 20 files. Include your source code from JavaScript, CSS, and SVG inside your HTML file and combine all bitmaps into a single file (a sprite atlas).

  4. The size of the archive without the video file must be less than 1 MB. The maximum size of the video file is 20 MB, so the maximum size of the video file archive is 21 MB. Each HTML file in the archive must be less than 150 KB.

  5. All event handlers must be explicitly specified within the script tag, for example:

    <script>
        document.onload = init;
    </script>
  6. External calls to Yandex-hosted JavaScript libraries are allowed. If an HTML5 banner uses a different library, include it in the archive source code.

  7. The link in an HTML5 banner must not exceed 1024 characters and must be UTF-8 encoded.

  8. The banner must not use statistics collection tools (pixels, tags, etc.).

    When you create a campaign, you can specify a Yandex.Audience pixel or ADFOX tag (for details, see How to launch a campaign). You can also use UTM tags in the link to your website.

Requirements for the main banner
  1. The main banner must not contain interactive elements, click handlers, or additional links, including the repeat animation button. When the user clicks on the main banner, the banner's expandable block opens.

  2. The HTML5 banner size must be specified in the content attribute of the meta tag of the main banner. See the example below:
    <meta name="ad.size" content="width=728,height=90">
    or
    <meta name="ad.size" content="width=1456,height=180">
Requirements for expandable block
  1. The expandable block must display correctly when its height changes from 360 to 675 pixels and width changes from 640 to 1200 pixels. This means that when the banner size changes within the range from the banner's minimum to maximum height and width, no artifacts or distortions should appear on the banner.

  2. All important information must be centered.

  3. The entire area of the expandable block must be clickable, meaning that any click on any segment of the banner must either perform the actions enabled by the interactive banner elements or lead to the advertiser website.

  4. A link click must be generated by calling the method homeExpandableDesktopBannerAPI.clickAndClose(clickNum), where clickNum is the ordinal number of the link specified in the field Links to website on the ad creation or editing page. This method closes the expandable block and navigates to the advertiser website.
    <a id="click1_area"><div>banner</div></a>
    <script>
       document.getElementById("click1_area").addEventListener("click", function(){
          homeExpandableDesktopBannerAPI.clickAndClose(1);
       });
    </script>
  5. The banner can't be transparent or contain a frame.

  6. The entire area of the expandable block must be free of elements for closing it.

  7. The expandable block of the banner must have the meta tag with the ad.bgrcolor attribute that sets the layer color, for example:

    <meta name="ad.bgrcolor" content="FFFFFF">

    The layer must not differ significantly from the main color of the banner.

  8. The expandable block of the banner must not contain the ad.size tag.

  9. In the banner's expandable block, you can add the View again button that restarts the animation scenario.

Requirements for banners with video
  1. You can only use a video in the expandable block. The video file format is MP4. The maximum video duration is 5 minutes. The video must be accessed using the homeExpandableDesktopBannerAPI.getVideoURL() method:
    var url_video = homeExpandableDesktopBannerAPI.getVideoURL();
  2. If the video plays back automatically on loading the expandable block, its audio must be muted. If the video plays back on the “Play” button, the playback can start with the sound on.
  3. The user must be able to pause and resume the video at any time.
  4. You can't play back audio separately from video.

The archive will ignore the contents of the __MACOSX folder andDS_Store and Thumbs.db files. These are the operating system's auxiliary files which are not necessary for the HTML5 banner to work.