Technical mistakes when creating banners

HTML5 banners

Tip.

Before you create an HTML5 banner, consult our list of requirements on the HTML5 banners page.

The expandable banner doesn't work correctly on the main mobile page. What should I do?

Try following these recommendations:

  1. We recommend not to use Adobe for creating banners. Expandable banners created with Adobe usually work incorrectly in iOS.
  2. If you use 320 px or wider elements in Adobe, make sure that the HTML/JS/CSS files created with such elements work correctly. If necessary, correct the JS/CSS files.
  3. For elements that need to be stretched in width, set the width to 100%. Do not use elements with a fixed maximum width of 1080 px. This often causes display errors in iOS.
  4. To crop the element edges (for example, background elements) when the banner size is reduced, use the style overflow:hidden;.
How can I check an expandable banner for the mobile Main page?
  1. Install the browser (for example, Yandex Browser).
  2. Prepare sets (folders) with HTML files before and after the expandable block. For example, “HTML_small” before the expandable block and “HTML_big” after it.
  3. Open the banner from the “HTML_small” folder in the browser.
  4. Start the console in your browser (in Yandex Browser, the console is started by pressing “F12”). Choose the mobile browser emulation mode and the desired device from the list. Make sure that the banner looks correct:

  5. Open the banner from the “HTML_big” folder in the browser and go back to the console mode. Make sure that the banner looks correct.
  6. In the console mode, add a link in the browser address bar (the banner with the expandable block must be open), for example ?link1=https://yandex.ru/. Click the banner and make sure that the page https://yandex.ru/ opens.

One click opens two windows. How do I fix it?
To prevent the browser from opening two windows, don't write href="#" and onclick together, because onclick opens the link with the specified technical requirements and href opens an empty window. Example: <a id="click1_area" target="_blank" onclick="closeApi(event);">.
A click is registered for the right button, not for the left one. How do I fix it?
  1. Standard HTML5 banner.
    For pure JavaScript, the event in onclick is triggered when the user clicks any mouse button. Add the left click check to the code:
    // Check if only left mouse button is clicked.
           if(e.which==1 ){
               window.open(yandexHTML5BannerApi.getClickURLNum(1));
           }
    In the Adobe Animate CC environment, add this check:
    this.btn.addEventListener("click", fl_ClickOnButton);
    function fl_ClickOnButton(e) {
      if (e.nativeEvent.button == 0){
      // Check if only the left mouse button is clicked.
                 window.open(yandexHTML5BannerApi.getClickURLNum(1));
      }
    return false;
    }
  2. A banner with the expandable block on the main Yandex page.

    Instead of the window.open(yandexHTML5BannerApi.getClickURLNum(1) method, call the homeExpandableDesktopBannerAPI.click_and_close(click_num); method. Call the click that is specified in the banner instructions.

  3. A banner with the expandable block in the mobile version of the Main Yandex page.

    Instead of the window.open(yandexHTML5BannerApi.getClickURLNum(1) method, call the homeExpandableMobileBannerAPI.click_and_close(1) method. Call the click that is specified in the banner instructions.

The banner takes too long to load. How do I fix it?
The delay may be due to the fact that animation starts only after all required resources are downloaded. Mimimize the number of files in the archive:
  • Combine images in the sprite sheet, or insert them in the base64 format for JS.

  • If you have a lot of JS files, make one JS file from them.

Flash banners

Before you create a banner in Flash format, review the list of requirements on the Flash banners with video and audio page.

When you create a banner in Flash format, you should consider the following:
  • Users should only be directed to the site when they click on the Flash banner (onRelease event). When the Flash banner is clicked, the advertised site should open in a new browser window.
  • All referral links should be added to the source file (.FLA).

    Incorrect link

    Correct link

    on(release) {
    getURL(_http://www.vash-url.ru, "_blank");
    }
    on(release) {
    getURL(_root.link1, "_blank");
    }
    Attention.

    You don't need to replace the root.link1 link with a link to the advertiser's page.

  • Information about the banner background and frame is indicated in the base layer of the .swf file.