Types of ad tags

The ad tag needs to be installed on your site just once. After you do that, you can manage your ad campaigns and banners via the Adfox interface.

Asynchronous ad tags for placements with nondimensional banner types

The context.js library is a universal ad loader that updates automatically.

We've combined several libraries for different tag types into one and hosted it on our server, which means 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 tags.

An asynchronous ad tag allows the page to continue loading while waiting for a response from the Adfox server. Adfox loads the result of the request (a banner or placeholder) concurrently with the page loading — as if in a separate window (iframe). Then it uploads the data to the page, even when the page 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 serving.
  "errors": [...] //if the “data” object is empty, the “status” parameter of the “errors” object contains 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 ad 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.

<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 allow loading different sets of banners on different site versions, we developed the adaptive ad tag.

In an adaptive tag, you list the site versions where it needs to make a banner request — this way, you can match different sets of ad placements to different site versions without making excess ad requests.

Adaptive tag features:

• It analyzes the screen size and determines whether the layout is for a desktop, tablet, or mobile device.
• Placements may differ for different layout versions.
• New banner sets can be loaded when the user zooms in or out on a site page.

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

<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 a site with adaptive layout

Managing banner requests

By default, ad requests are made on ad tag execution. You can control when the request is sent:

• For the request to occur when the banner gets into the user's view area, add the lazyLoad: true parameter to bannerOptions.

• For the request to occur before the banner gets into the user's view area, set these lazyload parameter values:

  • fetchMargin: Distance to the banner as a percentage of the screen height (for example, 200 is two screens) that will trigger the request.
  • mobileScaling: Multiplier of the fetchMargin variable value for mobile versions. It can be 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
      }
    })
  })
</script>

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

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

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

XML code

For placements created with XML banner types, links for getting XML codes are generated in the Adfox interface.

Example of a link for getting XML code:

https://yandex.com/ads/adfox/166283/getCode?p1=xxx&p2=xxx

Links are added to the app or player, and the Adfox server returns banner codes in response to the request.

Ad tags for placement on AMP pages

You can use Adfox to place ads on sites that support the AMP technology.

When you get the tag in the Adfox interface, the Code type option will be automatically selected in the AMP field. Make sure to specify the Block width and Block height parameter values.

Contact support

Send an email