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.

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.

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

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.

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

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

Contact support

Send an email