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:

You can use the SDK with any other player.

Please contact us at [email protected] 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

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 [email protected] . Our team will take a look at the player and will do their best to set up the SDK.

Last updated 2 months ago