Creating and configuring units
See also
To create a native unit, open and click Add native unit. This will open a step-by-step widget builder.
- Step 1. General
-
Select a content site to display the unit on from the list, and enter a Block name.
- Step 2. Design
-
Customize the appearance of your native unit using the preview area to check the result.
- Autoscaling — the size of the test container is automatically selected to fully fit into the ad unit designer field;
- Actual size — the length and width of the test container are they same as you manually set in pixels;
- Fit to width (height) — the test container is displayed so that your width (height) fits to the designer field, with the height (width) changed proportionally.
Preview areaThe preview area is a test container. To see how your unit will look on the desktop or mobile version of the site, specify its width and height in pixels on top of the text container. For the mobile version of the site, you can evaluate how the unit will look on different devices, with the horizontal or vertical screen orientation.
You can scale your preview area, but you will only see changes if the test container fails to fit into the designer field. The scale settings don't affect the unit you're creating and are only for convenience. Select the appropriate option from the drop down menu:
- Block parameters
-
A unit is a grid, with cells containing ad spaces. The grid size is determined by the number of cells along its width and height, with a minimum size of 1 x 1 and a maximum size of 5 × 5. Set the Grid size so it fits the container of your website, keeping in mind the container's size and location.
- Design customization
-
You can create a native unit the same way you create native designs in RTB units.
You can use HTML and CSS to customize your unit's appearance. If you don't have any HTML/CSS coding experience, you can select a preset Design template from the list instead.
If you're familiar with HTML and CSS, you can open the Code tab and edit the template however you like. You can use the HTML window to see how your unit is structured. The CSS window lets you see various possible styles you can apply.
- Step 3. Strategy
-
Choose an ad traffic management strategy.
Embedding the widget
To embed a unit on the site, go to and click Get code next to the desired unit. The ad code consists of two parts: the YAN loader code and the ad unit code.
- Loader code
-
Used for preloading ads.
Embed the loader code on all the pages of the site where you plan to display ads. Copy the code to the clipboard and paste it at the beginning of the page between the
<head>and</head>tags.The loader code is only embedded on the page once and is used to call all Yandex Advertising Network ad units.
- Ad unit code
-
Used to display a specific ad unit on the page.
Copy the code to the clipboard and paste it into the HTML code of your site between the
<body>and</body>tags in the place where the ad unit is to be displayed. If you add it to another place, ads may display incorrectly.When embedding the code, make sure that:
- the ad unit code for the units that should be displayed first is inserted as early as possible;
- the embed code isn't placed in a hidden DOM node or iframe;
- the ad on the page isn't blocked by other units and elements;
- there are no errors related to the ad code in the browser console.
Please keep in mind that when copying code, your text editor might truncate or wrap long strings, which might cause the JavaScript code to run incorrectly. Make sure the code does not get modified during copying. The Copy button is the best way to copy the code.
Editing the unit
All parameters set during unit creation (aside from the content site) can be changed at any time. To do this, find the desired unit in the list and click Edit.
