Native design
- Block template
- Required ad elements
- CSS class styles
- Ad block design
- Design of individual ad elements
- Mobile app ad design
- Statistics
Native advertising is an ad format that flexibly adapts to your website's design.
You can pick and choose the elements to use in your ad, such as the title, body text, image, and so on. Some elements are required by advertising law and the terms of the Yandex Advertising Network. Other elements are optional: you can use them to make the ad fit in seamlessly with your website's design and increase the block conversion rate.
Add a native design when editing or creating an RTB unit: in the visual designer, when setting up the Advertising format, click .
You can customize the HTML and CSS settings to help your ad blend in with your site's page. To do this, go to the Code tab in the native design settings in the right part of the window.
Block template
The template determines which ad elements will be displayed in the ad. All available elements are shown in the schematic below:
<div class="wrapper">
<div class="headline">See also</div>
<ya-units-grid cols="${grid_columns}" rows="${grid_rows}">
<div class="image"><ya-unit-image /></div>
<div class="title"><ya-unit-title /></div>
<div class="desc"><ya-unit-desc /></div>
<div class="domain"><ya-unit-domain /></div>
<div class="meta">
<span class="category"><ya-unit-category /></span>
</div>
<ya-unit-kebab />
</ya-units-grid>
</div>
You can use this to:
- Add your own layout to the template.
- Swap elements or nest elements into other HTML tags.
- Remove additional elements you don't want displayed in the block. For example, if you wish to hide a label, delete the line
<ya-unit-desc />
.
The template must include the following elements: <ya-units-grid />
or <ya-units-slider />
. You cannot delete these elements as they are required for the ad unit to work properly. All elements that follow the format <ya-unit-... />
must be placed inside <ya-units-grid />
or <ya-units-slider />
.
Please be sure to follow the requirements laid out for the mandatory ad elements so that your ad complies with the Yandex Advertising Network Terms of Participation and advertising law. Please keep in mind that ads for mobile apps and other ad types have different sets of required elements.
Required ad elements
As defined by the terms of the Yandex Advertising Network, these elements must always be in the ad unit:
Element | HTML tag | Required ad element | Required mobile app ad element |
---|---|---|---|
The “Ad” label and the age restriction label. | <ya-unit-category /> | Yes | Yes |
Menu icon | <ya-unit-kebab /> | Yes | Yes |
Ad title | <ya-unit-title /> | Yes | No |
Domain | <ya-unit-domain /> | Yes | No |
Price | <ya-unit-price /> | No | Yes |
App name | <ya-unit-app-name /> | No | Yes |
App icon | <ya-unit-app-icon /> | No | Yes |
Element | HTML tag | Required ad element | Required mobile app ad element |
---|---|---|---|
The “Ad” label and the age restriction label. | <ya-unit-category /> | Yes | Yes |
Menu icon | <ya-unit-kebab /> | Yes | Yes |
Ad title | <ya-unit-title /> | Yes | No |
Domain | <ya-unit-domain /> | Yes | No |
Price | <ya-unit-price /> | No | Yes |
App name | <ya-unit-app-name /> | No | Yes |
App icon | <ya-unit-app-icon /> | No | Yes |
CSS class styles
grid-row
— Grid row.grid-item
— Grid cell.grid
— Grid.ya-units-slider
— Overall slider appearance.ya-slider-item
— Card inside the slider.unit-wrapper
— Ad space.unit-image
— Image or video used in the ad.
You can also create your own CSS classes and customize their styles.
Ad block design
- HTML
-
<ya-units-grid sizes="(max-width: 1024px) 2x2, (max-width: 600px) 2x1, ${grid_rows}x${grid_columns}">
Here is how grids are going to be matched to different screen sizes in this example:- A 2 × 1 grid will be displayed on screens less than 600 pixels wide.
- A 2 × 2 grid will be displayed on screens between 601 and 1024 pixels wide.
- Screens wider than 1025 pixels will display a grid based on the values set in the Grid size fields on the General tab.
- CSS
-
.grid-row { margin-top: 10px; /* vertical distance between cells — 10 pixels */ } .grid-item { margin-left: 20px; /* horizontal distance between cells — 20 pixels */ } .grid { border: 1px solid #000; /* border around the grid: thickness — 1 pixel, border type — solid, color — black */ }
- The
left
value sets scrolling to the left. The scroll button will be placed before the ads in the slider. - The
right
value determines scrolling to the right. The scroll button will be placed after the ads in the slider. - HTML
-
<div class="wrapper"> <ya-units-grid cols="${grid_columns}" rows="${grid_rows}"> ... </ya-units-grid> </div>
- CSS
-
.wrapper { background: #fff; /* background color — white */ padding: 10px; /* margins inside the border, all sides — 10 pixels */ margin: 5px; /* margins outside the border, all sides — 5 pixels */ border: 2px solid #000; /* border: thickness — 1 pixel, border type — solid, color — black */ border-radius: 6px; /* round the border's corners after 6 pixels */ }
- HTML
- Original header style:
<div class="desc"><ya-unit-desc /></div>
After limiting the number of displayed rows to two:<ya-clamp lines="2" class="desc"><ya-unit-desc /></ya-clamp>
Or<div class="desc"><ya-clamp lines="2"><ya-unit-desc /></ya-clamp></div>
- CSS
-
.headline { font-family: Helvetica, sans-serif; /* font */ font-size: 18px; /* font size — 18 pixels */ font-weight: bold; /* font thickness (weight) — bold */ font-style: italic; /* font style — italics */ line-height: 24px; /* line spacing — 24 pixels */ letter-spacing: 1px; /* character spacing — 1 pixel*/ text-decoration: underline; /* text decoration — underlined */ text-transform: uppercase; /* text case — all uppercase */ text-align: right; /* text alignment — right */ color: #373e44; /* text color — dark gray */ background: #fff; /* background color — white */ } .category { color: #093; /* text color — green */ font-size: 12px; /* font size — 12 pixels */ text-transform: uppercase; /* text case — all uppercase */ }
- CSS
-
.headline { padding-top: 10px; /* top margin — 10 pixels */ padding-right: 10px; /* right margin — 10 pixels */ padding-bottom: 10px; /* bottom margin — 10 pixels */ padding-left: 10px; /* left margin — 10 pixels */ }
- CSS
-
.headline { border: 1px solid #000; /* border: thickness — 1 pixel, border type — solid, color — black */ }
- CSS
-
.unit-wrapper.unit-without-image { background: #fff; /* background color — white */ border: 1px solid #666; /* border: thickness — 1 pixel, border type — solid, color — gray */ padding: 5px; /* margins outside the border — 5 pixels */ border-radius: 6px; /* round the border's corners after 6 pixels */ }
- CSS
-
.unit-wrapper.unit-without-image { background: #fff; /* background color — white */ border: 1px solid #666; /* border: thickness — 1 pixel, border type — solid, color — gray */ padding: 5px; /* margins outside the border — 5 pixels */ border-radius: 6px; /* round the border's corners after 6 pixels */}
Blocks with native design may have the appearance of a grid of a specific size or of a slider (a horizontal scrollable ad feed). The grid is rendered by <ya-units-grid />
while the slider is rendered by <ya-units-slider />
. You can't use both of these elements within the same template.
The <ya-units-grid>
element is used to draw the grid based on parameters specified in the Grid size fields. You can only change the grid size using these fields.
sizes.
parameter. The ${grid_columns}x${grid_rows}
valuables must be listed last. For example:grid
, grid-row
, and grid-item
. For example:<ya-units-grid>
element is configured to display a 2 × 2 grid for this screen size instead, then only 4 out of 10 loaded ads will be displayed. The opposite is also possible: if you have a 5 × 2 grid while the number of ads is set to 2 × 2, then the block will display six empty cells.<ya-units-slider />
element.<div class="block">
<div class="headline">See also</div>
<ya-units-slider>
<div class="unit">
<ya-unit-kebab />
<div class="image">
<ya-unit-image ratio="0.5" />
</div>
<div class="body">
<div class="title">
<ya-unit-title />
</div>
<div class="meta">
<span class="category">
<ya-unit-category />
</span>
<span class="date">
<ya-unit-date />
</span>
</div>
</div>
</div>
</ya-units-slider>
<div class="block-label">
<div class="label">Yandex recommendations</div>
</div>
</div>
The slider design can be customized in CSS using the classes ya-units-slider
(overall slider appearance) and ya-slider-item
(a specific card within the slider):.ya-units-slider {
width: 95vw;
}
.ya-slider-item:not(:first-child) {
margin-left: 1em;
}
<ya-units-slider>
and add the element <ya-slider-button>
. The scroll direction is indicated with the direction
attribute:<ya-slider-button>
includes an element with the ya-clickable
class, then scrolling will be triggered once the element is clicked on. If there is no such element, scrolling is performed by clicking on the button itself.<ya-slider-button direction="left">Back to top</ya-slider-button>
<ya-units-slider />
receives the classes ya-slider-leftmost
or ya-slider-rightmost
respectively.wrapper
) and set up parameters for that class in CSS.If you want to limit the number of rows displayed in the element, wrap the element you need in the <ya-clamp>
tag.
You can use the unit-wrapper
class to configure the background color or border for each cell. For example:
<unit-wrapper.unit-without-image>
class. For example:You can dynamically change your ad design to fit different site sections or visual themes (such as light or dark themes). To do this, add the darkTheme: true
parameter to the embed code, for example:
<script>
(yaads = window.yaads || []).push({
id: "123456-7",
render: "div",
darkTheme: true
});
</script>
When the code is called, the <ya-units-grid>
or <ya-units-slider>
root elements will receive the ya-theme-dark
or ya-theme-light
classes:
<ya-units-grid cols="1" rows="1"> <!-- when calling the code, classes are added to the root element -->
<div class="image"> <ya-unit-image ratio="1" />
</div>
</ya-units-grid>
Each ad unit can store one design layout with two color themes. To do this, go to the Code tab in the CSS settings and set the desired properties using these classes.
.ya-theme-dark {
background-color: black;
}
.ya-theme-light {
background-color: white;
}
The ad menu will also change depending on the theme. We don't recommend using media queries
for your ad designs, because this method won't let the menu change to match the theme changes.
additionalClasses
and nativeAdditionalClasses
parameters to make ads fit the website design. However, they will no longer be supported in the future.Design of individual ad elements
- Menu icon in the ad
-
The user can hide or report the ad using the
menu icon. The menu icon is added to the upper-right corner of the ad.
In the HTML template, the
<ya-unit-kebab />
element sets the configuration of the menu icon. This element must be located directly inside<ya-units-grid />
or<ya-units-slider />
.Edit the menu iconThe default menu icon is white with a semi-transparent sublayer. For rendering on a white background, you can change the icon color to black and remove the sublayer: to do this, use theya-unit-kebab_dark
class.
You can set any other color for the icon using the<ya-unit-kebab class="ya-unit-kebab_dark" />
backgroundColor
parameter:<ya-unit-kebab backgroundColor="#000000"/>
- Image or video used in the ad
-
You can add an image or video to the template using the
<ya-unit-image>
element. If you receive a video from the advertiser via the<ya-unit-image>
tag, it will be displayed in the ad. If there is no video, a picture will be displayed instead.You can use this to:- Set the aspect ratio using the
ratio
parameter (sets the height to width ratio). - Enable adaptive aspect ratio for ad units with adaptive height using the
ratio="adaptive"
parameter. The image or video will be embedded without any restrictions and will take up at least 180 pixels but no more than 60% of the visible browser window area (without scrolling). - Limit adaptive images and videos by height by setting a limit on the pixel count or the % of the visible browser window area. To do this, use the
max-height
parameter (example:max-height="140"
ormax-height="40vh"
). - Specify the path to a placeholder image (used in ad units if your ad doesn't have any images to display) with the
src
parameter. - Fit a picture or video into a specified area without cropping by using the
variant="contain"
attribute (example:<ya-unit-image ratio="0.5625" variant="contain" />
).
- Advertiser information
-
You can add advertiser info to your ads:
<ya-unit-logo disabledSubstitution="all" />
— Excludes both the favicon and the image. The logo is immediately replaced with a placeholder<ya-unit-logo disabledSubstitution="favicon" />
— Excludes the favicon: the logo is replaced with an image, or a placeholder if no image is found.<ya-unit-logo disabledSubstitution="image" />
— Excludes the images: the logo is replaced with a favicon or a placeholder if no favicon is found.
The website's faviconYou can add a favicon using the
<ya-unit-favicon />
element.The favicon has a fixed size that can be set with the
size
parameter. Acceptable sizes: 32 × 32 and 120 × 120 pixels. The default size is 32 × 32.If the favicon can't be displayed, you can display the ad image instead. To do this, specify the
allowImageFallback
attribute.<ya-unit-favicon size="32" allowImageFallback></ya-unit-favicon>
LogoYou can add the advertiser's logo to be displayed on your block's ads using the
<ya-unit-logo />
element.For cases where the ad doesn't have a logo, set a placeholder image in the
src
parameter. The placeholder image has zero height by default.<ya-unit-logo src="https://example.com/image/image.png" />
If the ad doesn't have a logo, it's replaced with other elements in the following order: favicon — image — placeholder. You can change this order in thedisabledSubstitution
parameter:SitelinksYou can add sitelinks using the
<ya-unit-sitelinks />
element. An ad can display up to 8 links at a time, but you can limit their number via thelimit
parameter.<ya-unit-sitelinks limit="2" />
Physical addressAdded using the
<ya-unit-address />
element. - Callouts
-
You can add callouts using the element
<ya-unit-callouts />
.Callouts list the advantages of a certain product or service, inform users of special offers, and describe the advantages of partnering with a specific advertiser.
The advertiser can add multiple callouts to a single ad. The number of callouts can be limited using the
limit
parameter. Callouts are not clickable. - Action button
-
You can add an action button to your ad that will act as the ad link for the user. To do this, add the element
<ya-unit-direct-button />
.The text on the button is chosen by the advertiser in Yandex Direct. To make this text appear during ad rendering, specify a special value
{BUTTON_CAPTION}
inside<ya-unit-direct-button />
, such as:<ya-unit-direct-button><div>{BUTTON_CAPTION}</div></ya-unit-direct-button>
The user's browser will render the element as
<div />
:<div class="ya-unit-direct-button"><div>Get discount</div></div>
Mobile app ad design
Mobile app ads have their own set of elements:
- Required ad elements
- App nameAdded using the element
<ya-unit-app-name />
.App iconThe app icon is handled by the element<ya-unit-app-icon />
. The icon's aspect ratio is 1:1. You can also specify a placeholder image in case your ad doesn't have an icon, such as<ya-unit-app-icon src="https://someurl" />
.Price (with the currency symbol)Added using the<ya-unit-price />
element. - Additional elements
- App ratingAdded using the element
<ya-unit-rating />
. Must be between 0 and 5. Looks like five gray star outlines, some of which are filled in yellow. The number of filled-in stars corresponds to the app's rating. Fractions are also supported (for example, a rating of 3.5 is displayed as 3.5 yellow stars).To display the rating using the shortened format, use the parameter
isShort
:<ya-unit-rating isShort />
. The rating will then be displayed as one yellow star with the rating itself as a number next to it.App action buttonLooks like a button with text, such as “Install” or “Download”. Added via the<ya-unit-mobile-app-button />
element rendered as<div />
with the specified text in the browser.Total number of ratings in the app ratingAdded using the element<ya-unit-review-count />
. We recommend using this element together with the app rating.
When rendering mobile app ads, the ad elements are assigned the .ya-unit-item-rmp
class, which you can use to customize the design of similar ads in CSS.
Statistics
To view a report on native design impressions for an ad unit, expand its card menu and click Statistics.