Ad tag types

  1. Asynchronous ad tags for placements with nondimensional banner types
  2. XML ad tag
  3. Ad tags to place on AMP and Turbo pages
  4. Deprecated ad tags

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

  1. Adfox server response format
  2. Asynchronous ad tag
  3. Adaptive ad tag
  4. Managing banner requests

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.

Attention. 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 default banner selected for impressions.
  "errors": [...] //if the data object is empty, the errors object's status parameter will contain the HTTP request status code.
}

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 in pixels for the tablet version. Default value: 830.
  • phoneWidth: The maximum width in pixels for the phone version. Default value: 480.
  • isAutoReloads: Manage banner responses when resizing the browser window without refreshing the page. If true, the banner is removed and re-loaded from the server. If false (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 the bannerOptions.
  • 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 the fetchMargin 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.com/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.

Deprecated ad tags

Note. Some banner templates and Adfox modules only work based on code types that use the context.js library. We recommend replacing the codes on the site to use all the Adfox features available.
Synchronous ad tag

A synchronous ad tag is generated for Standard banner types that are deprecated and some Adfox features are not supported for this code.

We recommend switching all synchronous placements to asynchronous ad tags. For more information, please contact support.

Example of a synchronous ad tag

Asynchronous ad tag

An asynchronous ad tag that requires connecting additional libraries to the site is an outdated code version and we recommend that you replace it with an asynchronous ad tag that doesn't require connecting individual libraries.

Example of an asynchronous ad tag (obsolete version with library connection):

Asynchronous ad tag with scroll check

The ad code with scroll check is usually used on placements in the second and lower screens.

By default, a banner request is only sent when the placement with this ad code falls into the site user's view area on the screen.

Example of an asynchronous code with scroll check
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    Ya.adfoxCode.createScroll({
      ownerId: 208087,
      containerId: 'adfox',
      params: {
        pt: 'b',
        p1: 'bsoji'
      }
    })
  })
</script>
Example of an asynchronous ad code with scroll check (version with library connection)
Adaptive code with scroll check

The ad code with scroll check is usually used on placements in the second and lower screens.

By default, a banner request is only sent when the placement with this ad code falls into the site user's view area on the screen.

Example of an adaptive code with scroll check
<div id="adfox"></div>
<script>
  window.yaContextCb.push(()=>{
    // banner only for desktop and tablet 
    Ya.adfoxCode.createScroll({
      ownerId: 168627,
      containerId: 'adfox',
      params: {
        pp: 'g',
        ps: 'bnfx',
        p2: 'evbi'
      }
    },
    ['desktop', 'tablet'], // states
    {
      tabletWidth: 1000,
      phoneWidth: 300,
      isAutoReloads: false
    })
  })
</script>

Contact support