Technical requirements for HTML5 banners

1. HTML5 banners in Yandex.Display
2. HTML5 banners in Yandex.Direct

Technical requirements for HTML5 banners in Yandex.Display

Data must be sent as a ZIP archive.
Archive size must not exceed 150 KB.

The contents of the __MACOSX folder and .DS_Store files will be ignored in the archive. They are created during the archiving process on Apple Mac OS X platforms and are not needed for creatives to work.

The archive may contain one HTML file and several files in JS, JSON, CSS, JPG, GIF, PNG, or SVG formats.
File and directory names may contain only: -._~ , numbers and Latin letters.
All links in banner ad must be relative paths in the ZIP archive. When creating the ad there must not be any external network access. If necessary, all supporting JavaScript libraries must be presented together with the banner ad.
The number of files in the archive must be minimized. Combine images into a page of sprites. If necessary, combine JS/CSS/Image documents and include them in an HTML file. The maximum number of files is 50.
The banner ad must function correctly in the following browsers: Internet Explorer 9 and higher, Firefox 14 and higher, Safari 5 and higher, Chrome 14 and higher, Opera 14 and higher, Yandex.Browser 14 and higher, and Microsoft Edge. If necessary, the file must consider the browser functions necessary for its correct functioning.
The advertised site must open in a new window only if the user clicks on the banner.

Clicks on the banner must receive the address of the advertiser’s landing page via yandexHTML5BannerApi.getClickURLNum(1) call for the first click, yandexHTML5BannerApi.getClickURLNum(2) for the second click, etc.

<a id="click1_area" href="#" target="_blank">...</a> 
<a id="click2_area" href="#" target="_blank">...</a> 
<script> 
   document.getElementById("click1_area").href = yandexHTML5BannerApi.getClickURLNum(1); 
   document.getElementById("click2_area").href = yandexHTML5BannerApi.getClickURLNum(2); 
</script>

Please note that the previous version of this point from link1 is also compatible, functional, and accepted.

Clicks on the banner must use the linkN parameter value from the get URL parameters to the HTML document in the following manner: link1 for the first click, link2 for the second and so on. Such a code can be used:

<script>
   function getUrlParam(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
   }
</script>

<a id="click1_area" href="#" target="_blank">...</a>
<a id="click2_area" href="#" target="_blank">...</a>
<a id="click3_area" href="#" target="_blank">...</a>

<script>
   document.getElementById("click1_area").href = getUrlParam('link1');
   document.getElementById("click2_area").href = getUrlParam('link2');
   document.getElementById("click3_area").href = getUrlParam('link3');
</script>

The <META> tag shows the size of the banner file in the following manner:
```
<meta name="ad.size" content="width=300,height=250">
```

The Yandex ad library must be included immediately after the <HEAD> tag:

<HEAD> 
   <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"> 
   </script>

In the banner it is permitted to use external links to several base libraries, included in the developer tools for HTML5: Adobe Edge Animate CC, Adobe Flash CC HTML5 Canvas, CreateJS, GreenSock, Swiffy and others.
Only external links leading to the site of the library's creator can be allowed in the banner.
A placeholder and ALT text must be added separately to the archive (up to 100 characters). The image will go through separate moderation including the size. The image and text will be used for display in browsers not included in the list of support browsers from page 7.
It is forbidden to use irritating or harmful script behavior: for example, calls for the spontaneous opening of pop-up windows, change of page addresses, etc. The use of browser extensions (flash/java and others) is forbidden.
The ad banner must not lead to confusion (obfuscation).
It is assumed that the banner must behave identically and uniformly in all environments, on all platforms, each time the banner is opened, over the entire course of the campaign.
The ad banner must meet the requirements for CPU usage¹.
Ad materials must meet the requirements set in the document “Banner Ads. Advertising requirements,” on points 3-10.
The banner animation should not distract the user or make it difficult for them to view the pages of the website (banners with flashing graphics and/or backgrounds, fast-moving animations, etc. are not permitted).
When preparing banners, the use of low-quality graphical elements is not permitted, including:
- deformed images or images with artifacts resulting from file compression
- low-resolution (pixelated) images, or images that are blurry.
In addition to the banner, MP4 videos can be loaded (if permitted in the product). The maximum size for the video file is 2 MB.

Access to videos must be via URL JS call, starting from 1. For example, for video 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);

The video must play only when clearly initiated by the user. It must be possible to stop and restart the video at any moment. The size of the video must be displayed. It is forbidden to play sound separately from the video. In the interest of security and load speed, the video file must be stored on Yandex servers.

To count the number of times the video starts, the advertiser must set up a javascript call for each time the button is pressed:
For video 1: yandexHTML5BannerApi.reportVideoStart(1);
For video 2: yandexHTML5BannerApi.reportVideoStart(2);
Please note that the previous version of this point from link1 is also compatible, functional, and accepted.

In addition to the banner, MP4 videos can be loaded (if permitted in the product). The maximum size for the video file is 2 MB.

Access to videos must be by videoN URLparameter, starting from 1. For example, for video url_video1 = getUrlParam('video1');

The video must play only when clearly initiated by the user. It must be possible to stop and restart the video at any moment. The size of the video must be displayed. In the interest of security and load speed, the video file must be stored on Yandex servers.

To count the number of times the video starts, the advertiser must set up a javascript call for each time the button is pressed:
For video 1: yandexInbannerVideoEventApi.reportVideoStart(1);
For video 2: yandexInbannerVideoEventApi.reportVideoStart(2);
Audio clips are not supported.

An example of a completed HTML5 banner is available to download here. The example code shows how points 5, 8, 9, 10, 11, and 12 are completed.

Technical requirements for HTML5 banners converted using swiffy

In order to place HTML5 format banners, files must be transferred to Yandex in the following formats:
- Flash (.SWF)
- HTML5 (.html) — a Flash banner converted using swiffy according to the conditions listed in the document “Flash Banners with Video and Audio. Advertising requirements.”
- static image (size depends on the requirements presented (pixels) for a specific banner). Format GIF, JPEG, or PNG
- alternative text for the banner
All files relating to the same ad should have the same name.
The Flash banner used by the advertiser after conversion to HTML5 format must meet the requirements outlined in the document “Flash Banners with Video and Audio. Advertising requirements,” including the requirements outlined in point 3 of the document.
When positioning elements of the Flash banner (images, texts, and other content), the use of fractional coordinates is not permitted. Coordinates of Flash banner elements must be written in whole numbers in order for text and images to maintain their definition upon conversion to HTML5. The pixel_round.jsfl script for Flash environments (available for download here) can be used to automatically round fractional coordinates to whole integers.
The maximum size of the Flash banner before conversion to HTML5 format must not exceed 60 KB. The HTML5 file converted using swiffy may exceed 60 KB.
The Flash banner must not contain video and audio.
The HTML5 format file must be converted without any additional edits and changes.
The advertisers must themselves check the HTML5 file for play or display errors and confirm that the result of the conversion matches the original Flash banner.
The HTML5 format must meet the requirements for CPU usage¹.
Advertising materials (banner format) must meet the requirements outlined in the document “Banner Ads. Advertising requirements,” including but not limited to the requirements in points 3-10 of the document.

Technical requirements for HTML5 in Yandex.Direct

Data must be sent as a ZIP archive.
Archive size must not exceed 150 KB.

The archive may contain one HTML file and several files in JS, JSON, CSS, JPG, GIF, PNG, or SVG formats.
File and directory names may contain only: -._~ , numbers and Latin letters.
All links in banner ad must be relative paths in the ZIP archive. When creating the ad there must not be any external network access. If necessary, all supporting JavaScript libraries must be presented together with the banner ad.
The number of files in the archive must be minimized. Combine images into a page of sprites. If necessary, combine JS/CSS/Image documents and include them in an HTML file. The maximum number of files is 20.
The banner ad must function correctly in the following browsers: Internet Explorer 9 and higher, Firefox 14 and higher, Safari 5 and higher, Chrome 14 and higher, Opera 14 and higher, Yandex.Browser 14 and higher, and Microsoft Edge. If necessary, the file must consider the browser functions necessary for its correct functioning.
The advertised site must open in a new window only if the user clicks on the banner.
Clicks on the banner will open the page indicated in the “Link to site” field on the page where ad groups are created and edited. Access to this page from the banner must be via the yandexHTML5BannerApi.getClickNum(1) method call.
```
<a id="click_area" href="#" target="_blank">...</a> 
   document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1); 
</script>
```
The <META> tag shows the size of the banner file in the following manner:
```
<meta name="ad.size" content="width=300,height=250">
```
The following sizes are available: 160×600, 240×400, 240×600, 300×250, 300×300, 300×500, 300×600, 320×50, 320×100, 320×480, 336×280, 480×320, 728×90, 970×250, 1000×120.
Links to jQuery libraries and libraries listed on the page https://tech.yandex.ru/jslibs/ are permitted.
Only external links leading to the site of the library's creator can be allowed in the banner.
It is forbidden to use irritating or harmful script behavior: for example, calls for the spontaneous opening of pop-up windows, change of page addresses, etc. The use of browser extensions (flash/java and others) is forbidden.
The ad banner must not lead to confusion (obfuscation).
It is assumed that the banner must behave identically and uniformly in all environments, on all platforms, each time the banner is opened, over the entire course of the campaign.
The ad banner must meet the requirements for CPU usage¹.
Ad materials must meet the requirements set in the document “Banner Ads. Advertising requirements,” on points 4-10.
The banner animation should not distract the user or make it difficult for them to view the pages of the website (banners with flashing graphics and/or backgrounds, fast-moving animations, etc. are not permitted).
When preparing banners, the use of low-quality graphical elements is not permitted, including:
- deformed images or images with artifacts resulting from file compression
- low-resolution (pixelated) images, or images that are blurry.
Audio clips are not supported.
The use of video clips is not supported.
The link (URL) contained in the banner must not exceed 1024 characters in length.
The link (URL) to the site (address of the page that opens when someone clicks on the banner) is only accepted in UTF-8 coding.

1. To test the level of CPU usage, advertising materials use a dedicated computer (an Intel® Core™2 Duo CPU P9600@ 2,53 GHz, 2 GB RAM, and 64-800 MB video memory) running Windows 7 Professional 64 bit. This computer is configured in a standard manner to operate in an office.
A special page is loaded, which only contains this banner, for testing purposes. No other programs are running at the time.
The CPU load level is evaluated using the Task Manager.
During such tests, the banner should not take up more than 50% of the CPUs resources based on information in the Performance tab of Task Manager (Update Speed is set to High for the test). If 50% of the CPUs resources are used for a considerable amount of time (fractions of a second) or the CPU load peaks over 70%, the banner is considered to take up too much of the computers resources.
RAM usage is not optimized, and no additional utilities or programs are loaded on start-up. After logging in (without any applications running), the amount of memory used by system processes is around 62-63 MB according to the Task Manager.

Advertising requirements