Banner Image

Description

Banner Image is a banner that displays an image with a link. The banner has convenient settings for placing and scaling the image in the banner. This means that the image occupies a width equal to the image width or less if the banner container is smaller than the image size. This template is convenient for adaptive sites.

You can use the following banner features in Adfox:

  • 3 setting options for placing and scaling the image in the banner.
  • Custom CSS styles for the banner container.
  • You can upload high-resolution images to make the banner look nicer on mobile devices. For example, for a 240 × 400 banner, you need to upload a 480 × 800 image and set the width to 240 × 400 in the banner settings.
  • You can add a non-clickable banner. To do this, leave the Click URL parameter empty.

Sample banner

Image requirements

  • Use high-resolution images. This substantially improves banner quality on mobile devices, though it reduces banner loading speed.
  • We recommend that you reduce the image file size using a service like TinyPNG. This service works with both PNG and JPEG.
  • You can use SVG images. They are vector, which means they look better on both mobile and desktop devices. They have a small file size and can be animated.
  • Acceptable image formats: PNG, GIF, JPG, and SVG.
  • Maximum weight of a file: 300 KB.

Add a banner to Adfox

To add a banner to Adfox, select the necessary banner type and the Banner Image [context] template.

Set the banner parameters:

  1. Image: Banner image.

  2. Image ALT: Alternative text that's shown before the banner image loads.

  3. Target “transmission parameter”: Specify how the link from the placeholder banner opens. Possible values are _blank and _top. If you don't set a value, the link opens in a new window.

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

  5. 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://).

  6. Banner width (% or px): Specify the banner width.

  7. Banner height (px): Specify the banner height. This is required if the Image position parameter has the contain or cover value. If the Image position parameter value is empty, the height is ignored and the height: auto; style applies.

  8. Image position (contain, cover, empty): Determines where the image is in the banner and how it's scaled.

    If you specify the Image position parameter and set Width in pixels, the banner size doesn't change when the window size is changed. This may be significant for mobile sites, because a horizontal scroll may appear if the banner size is larger than the window size.

    Available position options:

    Option

    Description

    Scheme

    contain

    The banner size doesn't depend on the container size: it's depends on what you specified in the banner parameters.

    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.

    Be sure to specify the banner height.

    Note

    To change the background color, specify the background style in the Styles for banner block banner parameter, for example, background-color: #cd1e25;

    cover

    The banner size doesn't depend on the container size: it's depends on what you specified in the banner parameters.

    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.

    Be sure to specify the banner height.

    empty string

    The image adapts to the surrounding container.
    If the image size is larger than the container, the image is proportionally reduced in size and made equal in width to the container size, and the image height is changed according to the image proportions.

    If the image size is smaller than the container, the image size is what you specified in the banner parameters, and the image is at the upper-left border of the container.

  9. Name for the class attribute of the banner container: Enter a name (or multiple names separated by a space) for the class attribute of the banner container.

  10. Styles for banner block: Custom styles for the banner container in a single string. Except for the display style. For example, border: 1px solid red;. Invalid values are ignored by the browser.

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

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

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

Contact support

Send an email