Ad tag types
You should install the ad tag on the site once and then use the Adfox interface to manage your advertising campaigns and banners.
Note
We do not recommend that you make changes to the ad tag as this may disrupt its performance.
Asynchronous ad tags for placements with nondimensional banner types
The context.js library is a universal ad loader with automatic updates.
We've combined several libraries for different ad tag types into one and placed it on our server so that you always have access to the latest stable version of the library.
Add the loader code once to the head of a page:
<script>window.yaContextCb = window.yaContextCb || []</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>
Be sure to remove the library link from the ad tags.
Alert
We do not recommend downloading the library and installing it from your own server. If you do so, you won't receive centralized library updates, which may cause errors when running the code.
Asynchronous ad tag does not block the loading of a page while waiting for a response from the Adfox server. Adfox, in its turn, loads the result of the request (a banner or placeholder) concurrently with the page loading, as if in a separate window (iframe), and only then uploads the data to the page, even when it is fully generated and loaded.
Adfox server response format
The Adfox server returns a response to a banner request in JSON format.
The JSON response contains multiple objects:
{
"jsonapi":{...}, //the version and protocol used.
"meta": {...}, //the page session and request number.
"data": [...], //information about the banner (banner template, all banner parameters with values) or the backup ad selected for impressions.
"errors": [...] //if the “data” object is empty, the “errors” object's “status” parameter will contain the HTTP request status code.
}
Some variables in the response can be base64 encoded. To decode the received value manually, use the encoder page.
Asynchronous ad tag
Manage banner responses:
Ya.adfoxCode.create(bannerOptions);
The bannerOptions are as follows:
ownerId
: The client's account ID.containerId
: The ID of the element that contains the banner.params
: The block with the banner request parameters.
Example of an asynchronous ad tag
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
Ya.adfoxCode.create({
ownerId: 208087,
containerId: 'adfox',
params: {
pt: 'b',
p1: 'bsoji'
}
})
})
</script>
Adaptive ad tag
Adaptive sites have a stable HTML layout with CSS styles to help display it on different screen resolutions. An adaptive layout makes the site easy to view on various devices: mobile phones, tablets, and desktops.
To load different sets of banners for different versions, we developed an adaptive ad tag.
In the adaptive ad tag, you need to list the site versions where it should make a banner request, which enables you to configure different sets of ad placements for different site versions without unnecessary code requests.
Adaptive ad tag features:
- It determines what is considered a layout for a desktop, a tablet, or a smartphone based on the size of the screen.
- A set of placements may differ for different layout versions.
- When scaling a site page, new sets of banners can be loaded.
Manage ad responses:
Ya.adfoxCode.createAdaptive(bannerOptions, bannerStates, [adaptiveOptions]);
The bannerOptions are as follows:
ownerId
: The client's account ID.containerId
: The ID of the element that contains the banner.params
: The block with the banner request parameters.
bannerStates (there must be at least one site version):
desktop
: Load a banner if the laptop and computer site version is open.tablet
: Load a banner if the tablet site version is open.phone
: Load a banner if the mobile/smartphone site version is open.
adaptiveOptions:
tabletWidth
: The maximum width for the tablet version in pixels. Default value:830
.phoneWidth
: The maximum width for the phone version in pixels. Default value:480
.isAutoReloads
: Manage banner responses when resizing the browser window without refreshing the page. Iftrue
, the banner is removed and re-loaded from the server. Iffalse
(by default), the banner is hidden but not removed from the layout, and when the original size is restored, the user sees the same banner.
Adaptive ad tag example
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
// banner only for desktop and tablet
Ya.adfoxCode.createAdaptive({
ownerId: 168627,
containerId: 'adfox',
params: {
pp: 'g',
ps: 'bnfx',
p2: 'evbi'
}
},
['desktop', 'tablet'], // states
{
tabletWidth: 1000,
phoneWidth: 300,
isAutoReloads: false
})
})
</script>
Example of a banner placement on adaptive sites
Managing banner requests
By default, advertising requests are made when ad tags are executed. You can control when the request is sent:
-
For the request to occur when the banner falls into the user's view area, add the
lazyLoad: true
parameter to thebannerOptions
. -
For the request to occur before the banner hits the user's view area, set these
lazyLoad
parameter values:fetchMargin
: The distance to the banner from which the request will start as a percentage of the screen height (for example, 200 is two screens).mobileScaling
: Multiplier of thefetchMargin
variable value for mobile versions of devices. It can be a fraction.
Asynchronous ad tag example (mobileScaling is an integer)
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
Ya.adfoxCode.create({
ownerId: 208087,
containerId: 'adfox',
params: {
pt: 'b',
p1: 'bsoji'
},
lazyLoad: {
fetchMargin: 200,
mobileScaling: 2
}
})
})
</script>
Asynchronous ad tag example (mobileScaling is a fractional number)
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
Ya.adfoxCode.create({
ownerId: 208087,
containerId: 'adfox',
params: {
pt: 'b',
p1: 'bsoji'
},
lazyLoad: {
fetchMargin: 200,
mobileScaling: 2.5
}
})
})
</script>
Example of adaptive ad tag (mobileScaling is an integer)
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
// banner only for desktop and tablet
Ya.adfoxCode.createAdaptive({
ownerId: 168627,
containerId: 'adfox',
params: {
pp: 'g',
ps: 'bnfx',
p2: 'evbi'
},
lazyLoad: {
fetchMargin: 200,
mobileScaling: 2
}
},
['desktop', 'tablet'], // states
{
tabletWidth: 1000,
phoneWidth: 300,
isAutoReloads: false
})
})
</script>
Example of adaptive ad tag (mobileScaling is a fractional number)
<div id="adfox"></div>
<script>
window.yaContextCb.push(()=>{
// banner only for desktop and tablet
Ya.adfoxCode.createAdaptive({
ownerId: 168627,
containerId: 'adfox',
params: {
pp: 'g',
ps: 'bnfx',
p2: 'evbi'
},
lazyLoad: {
fetchMargin: 200,
mobileScaling: 2.5
}
},
['desktop', 'tablet'], // states
{
tabletWidth: 1000,
phoneWidth: 300,
isAutoReloads: false
})
})
</script>
Note
Codes with scroll check support lazyLoad
, though the createScroll
method is considered obsolete. For the code to work effectively, we recommend switching to asynchronous or adaptive code and adding the lazyLoad
parameter with the necessary values to the new code.
XML ad tag
For sites created with XML banner types, links to get XML ad tags are generated in the Adfox interface.
Example of a link to get an XML ad tag:
https://ads.adfox.ru/166283/getCode?pp=g&ps=cgdy&p2=ewap&pfc=a&pfb=a&plp=a&pli=a&pop=a
The link is embedded in an app or player and the Adfox server returns the banner XML code in response to the request.
Ad tags to place on AMP and Turbo pages
You can place ads using Adfox on sites that support AMP technology and Turbo pages.
When getting the ad tag, the interface automatically suggests a Code type suitable for the placement:
- Asynchronous: For turbo pages.
- AMP: For AMP pages. Be sure to specify the Width and Height parameter values.