Voice Ads SDK (Mobile web)

Voice Ads SDK for mobile web

Embedding

Download the SDK from HERE

It is required to add the script xman.min.js on a page to embed.

Please note that our SDK is built for Google Chrome browser on Android OS mobile devices.

Integration Example:

<script type="text/javascript" src="xman.min.js"></script>
<script type="text/javascript">
   new AdMan.Manager({
     playerId: "<Player id>",
     playerType: "<Player type>",
     country: "Server_name",
     admanId: "Advertising identifier",
     voice: {
       mobile: true
     }  
     protocol: "https://",
   });
</script>

AdMan ID should be sent as an object with the following attributes:

• siteID - Site ID (Required, must be supplied by support team)

• playerID - player ID for corresponding site (optional)

Usage Example:

new AdMan.Manager({
    ...
    country: "GLOBAL",
    admanId: 1981,
    protocol: "https://",
		voice: {
       mobile: true
     } 
    ...
});

We use 1981 for testing purposes only. The value for a country will be different for different publishers.

Please ask our representatives for your value. Please, do not change the value during the initial integration.

Supported Players:

The list of players supported by default:

• AdMan.PlayerType.TAG_AUDIO
• AdMan.PlayerType.JPLAYER
• AdMan.PlayerType.JWPLAYER_5
• AdMan.PlayerType.JWPLAYER_6

You can use the SDK with any other player.

Please contact us at [e-mail] in case of issues and we will do our best to troubleshoot.

Usage Example:

new AdMan.Manager({
   ...
   playerId: "jquery_jplayer_1",
   playerType: AdMan.PlayerType.JPLAYER,
   country: "GLOBAL",
   admanId: 1981,
   protocol: "https://",
	 voice: {
       mobile: true
     } 
   ...
 });

Displaying a banner

To display a banner the parameter banner is used, which defines the element to embed a banner and its dimensions.

Usage Example:

<script type="text/javascript">
   new AdMan.Manager({
     ...
     banner: {
       id: "banner_container",
       width: 640,
       height: 640
     }
     ...
   });
 </script>

It is possible to set up a banner more precisely via the overlay system.

Overlay system

The script allows the display of a banner and an ad data via the overlay system. The overlay parameter receives an array of elements with the following fields:

Field	Description
id	an overlay id
target	a jQuery selector of the element to embed the overlay into
mode	overlay embedding mode

Possible overlay modes

Name	Description
AdMan.Overlay.Mode.REPLACE	the overlay replaces the element
AdMan.Overlay.Mode.BEFORE	the overlay is embedded before the element
AdMan.Overlay.Mode.AFTER	the overlay is embedded after the element
AdMan.Overlay.Mode.PREPEND	the overlay is embedded into beginning of the element
AdMan.Overlay.Mode.APPEND	the overlay is embedded into the end of the element

Overlay Animation

Name	Description
AdMan.Overlay.Animate.OPACITY
AdMan.Overlay.Animate.SLIDE
AdMan.Overlay.Animate.BLUR

Overlay Parameters

Name	Description
default
content	HTML code of an overlay
src	URL to overlay content
showOn	an array of events initializing overlay showing, by default ["adStarted"]
closeOn	an array of events initializing overlay hiding, by default []

Classes of overlay elements

Class name	Description
instreamatic-banner	a banner is added to the element
b[width]x[height]	is used with instreamatic-banner and allows the choice from the following banner dimensions: b728x90 b468x60 b300x250 b240x400 b200x300 b160x160 b128x128 b640x640
instreamatic-left	playback remaining time is set to the element
instreamatic-close	the element is used to close the overlay, the attribute "data-delay" is used to set the time after which the element will be disabled in seconds

Usage Example:

new AdMan.Manager({
    ...
    overlay: [
      //banner
      {
        target: ".a1"
        showOn: ["adStarted"], closeOn: [],
        mode: AdMan.Overlay.Mode.REPLACE,
        animate: AdMan.Overlay.Mode.OPACITY,
        content:
          "<div>" +
            "<div class='instreamatic-banner b640x640'></div>" +
            "<div class='instreamatic-close' data-delay='10'></div>" +
          "</div>"
      
      
    ...
  });

Ad Events

The following events can be generated:

Event Name	Description
adLoad	an ad request is sent
adNone	there is no ad for the user
adReady	the ad is ready to play
adStarted	the ad playback is started
adCompleted	the ad playback is finished

Usage Example:

new AdMan.Manager({
   ...
   events: {
     adLoad: function() {},
     adReady: function(section) {},
     adStarted: function() {},
     adCompleted: function() {},
     adNone: function() {}
   }
   ...
 });

Ad Playback

You can initiate playback by calling the start() method of AdManager. Please see the example below:

<button class="play_button">Play<button>
  <div id="banner_container"><div>
  <script type="text/javascript" src="xman.min.js"></script>
  <script type="text/javascript">
   var adman = new AdMan.Manager({
   country: "GLOBAL",
   admanId: 1981,
   protocol: "https://",
	 voice: {
       mobile: true
     }, 
      banner: {
        id: "banner_container",
        width: 728,
        height: 90
      },
      events: {
        adNone: function() {
          // start player
          // $("#player").play();
        },
        adCompleted: function() {
          // start player
          // $("#player").play();
        }
      }
    });
  $(".play_button").click(function() {
      adman.start();
    });
  </script>

If you need help with integration, please send us the link to the page with your player to [e-mail] . Our team will take a look at the player and will do their best to set up the SDK.