Integration guide

Help
/
Web monetization
/
Integration guide

Integration guide

Integration of advertising blocks on the site
Integration of code for the InPage block

Integration of advertising blocks on the site

Integrate the codes of myTarget advertising blocks on the website.

For direct integration you need to copy the js-code from the ad unit settings:

Sample JS-code to set up the ad unit


<script async src="https://ad.mail.ru/static/ads-async.js"></script>
<ins class="mrg-tag" style="display:inline-block;width:300px;height:250px" data-ad-client="ad-917436" data-ad-slot="917436"></ins>  
<script>(MRGtag = window.MRGtag || []).push({})</script>

and place in the HTML of the site between the tags <body> and </body>, where the advertisement should be displayed.

To integrate via AdFox's Header Bidding, use the instructions.

Integration of code for the InPage block

The ad player code can be placed using two methods:

basic;
advanced.

Basic method

This method provides short loading code, but only supports one player per page and does not provide the ability to use callbacks and debug mode. Insert the code before the closing body tag.

An example of download code using the base method:


<script async src="https://ad.mail.ru/static/vk-adman.js?slot=11133888&container=.main-content"></script>

In the above code, there are two parameters (parameters and their values are specified in the src attribute after the question mark and separated by the & symbol):

slot - the identifier of the slot from which the player will receive ads. Each slot corresponds to one spot for displaying ads on the site page. In the example above the ID is 11133888. The concrete value of this parameter should be obtained in the advertising account. The remuneration for displaying ads is accrued to the owner of the slot from which the ads were received. Incorrect slot indication can result both to the ad not being displayed and not being rewarded for the ad display. Multiple advertising spots can be displayed on one page and a unique slot should be assigned to each of them. If you need to connect two or more ad slots on one page, use the advanced method of inserting a player code.
container - identifier of the element (css selector) of html markup where the player will be placed. In the example above the player is placed into a markup element (div, span, main, section, article, etc.) which is assigned the class main-content (class="main-content").

A dot in front of main-content will search for elements with the specified class.

A # character instead of a dot ( container=#main-content ) will search for a specific element with the specified identifier (id="main-content").

If the specified container has many paragraphs, the player is placed between the paragraphs as close as possible to the middle of the container's contents. If the container is empty (designated space for the player), the player will be placed directly in it.

The slot parameter is required, while the container parameter can be omitted. In this case the following code can be used to connect the player:


<script async src="https://ad.mail.ru/static/vk-adman.js?slot=11133888"></script>

If the container parameter is missing, the page is searched for a container with the identifier adman-ads and, if found, the player is placed in it. An example of configuring an empty div container with the identifier adman-ads:


<div id="adman-ads"></div>

If the container parameter is omitted and no container with the identifier adman-ads is found, the player is not initialized.

Advanced method

Using the advanced method of loading player code allows you to place more than one ad player on the page, use debug mode and callbacks, and specify other parameters (see description below). Loading code should be placed before closing body tag.

Example code for loading player using advanced method:


<script type="text/javascript">
  (function (a, b, c, d, e, f, g, h) {
    g = b.createElement(c);
    g.src = d;
    g.async = !0;
    h = b.getElementsByTagName(c)[0];
    h.parentNode.insertBefore(g, h);   
    const func = function () {
      this.push(Array.prototype.slice.apply(arguments));
    }
    for (let i = f.length; i--;)
      a[e[i]] = func.bind(a[f[i]] = []);
   }) (window, document, "script", "https://ad.mail.ru/static/vk-adman.js", ["AdManPlayer", "AdManSDK"], ["_AdManPlayerInit", "_AdManSDKInit"]);
</script>
 
<script>
  AdManPlayer({
    container: 'main-content', // player container css selector (mandatory)
    slot: 11133888,
    onError: () => {
      // collback when an error occurs (optional)
    }
  })
 </script>

For slot and container parameters, as well as their values, the provisions given in the description of the basic player code loading method above fully apply.

In order to test the player's location, debug mode must be enabled during initialization by specifying debug: true and passing the visit parameter, which has the content of the response from the ad server.


<script>
  AdManPlayer({
    container: '.post_text', // css-selector for article content (required)
    slot: '[Individual site slot]',
    debug: true,
    visit: {
      [...sample response]
    },
    onError: () => {
      // callback on error occurrence (optional)
    }
  })
</script>

After you test the player's location and video display, debug mode should be disabled by removing debug: true and removing visit: ...

Multiple player calls on one page

If multiple code calls on one page are planned, you don't need to copy the first part of the code, another call to the player will be enough.

Player configuration

A description of the player options available in advanced mode:

container
string | string[]
css selector or array of selectors of the element where the player should be placed. It can point to the parent block with paragraphs (when embedded in the body of the article), or to a specific empty block (if it is important to put the player exactly in the specified place).

offset
number
The desired indentation in the article as a percentage, where the player will be inserted. The algorithm will select the space between the paragraphs following the first visible screen.
Default: 50

slot
string
The individual slot number of the site. Use this option to show all campaigns to which a site is connected.

debug
boolean
Allows you to show the test creatives passed in the visit parameter
Default: false

visit
object
Parameter where the player gets the test creativity when using debug:true

params
object
example: params: { preview: 4 },
Adds query string parameters to the slot query

iframe
boolean
Wraps the player in an iframe (since the player communicates with the creatives loader via window.postMessage, there may be a situation where this communication will be broken. In such cases it's worth trying to enable this option).

controls
object | boolean
example: controls: { progressBar: true, skip: true, volume: true, cta: true, replay: true }
controls: false
Enables/disables the standard player controls. Defaults to true
Consists of progressBar, skip, volume, cta, replay

Callbacks

onReady
function
Triggers when the player is ready to play.

onError
function
Triggers if the video didn't load for some reason, including when there is no creative to show. The function passes an argument with an error text.

onStarted
function
Triggers at the first start of the video.

onPlayed
function
Triggers during video playback.

onPaused
function
Triggers when video playback is paused (SDK).

onClosed
function
Triggers when a video block (SDK) is closed.

onCompleted
function
Triggers if the user has watched the entire video.

onClicked
function
Triggers if the user has clicked on the link.

onSkipped
function
Triggers if the user clicked "Skip Video".

Example:


  AdManPlayer({
     container:'.post',
     slot: '690',
     onError: (e) => {
       console.log('AdMan error:', e)
     },
      onReady: () => {
       console.log('AdMan ready')
     },
      onClicked: () => {
       console.log('AdMan clicked')
     },
      onCompleted: () => {
       console.log('AdMan completed')
     },
        
   })

Was this article helpful?