Placements are entities representing “real-estate spaces” on screen, i.e. HTML elements into which we render ads. Placement entities connect channels to custom placements on any site utilizing CSS selectors and allow customization of the placement’s behavior when showing AniView Aniview instream or outstream players.

Placement Element

The player is created on an element id specified by placementConfig.position:

<div id="aniplayer"></div>

Placement Configuration

The configuration of the placement is a configuration object with properties that instruct the placement on how to handle the placement element and render the correct ad.

...

var placementConfig = {
    publisherId:      '[Publisher_ID]',
    channelId:        '[Channel_ID]', 
    ref1:             '',
    width:            300,
    height:           250,
    errorLimit:       5,
    position :        'aniplayer'
  };

Placement Javascript

The player code is located at https://player.aniview.com/script/webm/aniview-displayads.js

Placement Instantiation

myPlacement = new avDisplay(placementConfig);
myPlacement.play();

Putting it all together

<div id="aniplayer"></div>
<script type="text/javascript" id="aniviewJS">
(function()
{
  var myPlacement;
  var placementConfig = {
    publisherId:      '[Publisher_ID]',
    channelId:        '[Channel_ID]', 
    ref1:             '',
    width:            300,
    height:           250,
    errorLimit:       5,
    position :        'aniplayer'
  };
  
  (new Image).src = "https://track1.aniview.com/track?pid="+placementConfig.publisherId+"&cid="+placementConfig.channelId+"&e=playerLoaded"+"&cb="+Date.now();
  var placementUrl = 'https://player.aniview.com/script/webm/aniview-displayads.js'+'?v=1&type=s&pid='+placementConfig.publisherId;  
  function downloadScript(src,adData) {
    var scp = document.createElement('script');
	scp.src = src;
	scp.onload = function() {
		myPlacement = new avDisplay(placementConfig);
		myPlacement.play();
    };
	document.getElementsByTagName('head')[0].appendChild(scp);
  };
  downloadScript(placementUrl,placementConfig);  
})();
</script>

placementConfig Configuration Options

Placement API

avDisplay(placementConfig)

Instantiate the placement object with the placementConfig configuration.

start()

Start/resume the placement instance, including ad flow.

stop()

Stop the placement, including ad flow.

close() / destroy()

Close the placement and stop its functionality completely.

getWidth()

Returns the player width in pixels

getHeight()

Returns the player height in pixels

on(evt, func, context)

Register an event listener for placement events

hasNext()

Returns whether we have a ready ad to render for this placement.

show()

Shows the placement, resuming it and the ad flow (no re-construction).

hide()

Hides the placement, stopping it and the ad flow (no destruction).

startInRead()

Applies in-read appearance to the placement.

startInFloat(FloatingConfig)

Applies floating appearance to the placement, as specific in FloatingConfig:

startInSticky(StickyConfig)

Applies floating appearance to the placement, as specific in StickyConfig:

resetAppearance()

...

width

Returns the placement width in pixels.

height

Returns the placement height in pixels.

hasLoadedAd

Returns whether we have a ready ad to render for this placement.

adWidth

Returns the ad width in pixels inside the placement.

adHeight

Returns the ad height in pixels inside the placement.

next()

Start/resume the placement instance, including ad flow.

stop()

Stop the placement, including ad flow.

showAd()

Shows the ad inside the placement.

hideAd()

Hides the ad inside the placement.

on(evt, func)

Register an event listener for placement events.

destroy()

Close the placement and stop its functionality completely.

Placement Events

The player on() function can be used to subscribe to events. Multiple listeners can be set for each event

...

The supported events are:

{
  "asid": "Ad source id",
  "clickThrough": "Ad click url if available",
  "videoUrl": "Url of media file if available",
  "mt": "Media type, vast or vpaid",
  "tagInfo" : {
    "url": "Actual ad source meta data, template of url",
    "bidCpm": Actual bid cpm (prebid, rtb) or floor if vast/platform link,
    "pubCpm": Publisher CPM after rev share,
    "floorCpm": floor price used
    "bidCode": "Bidder code from prebid",
    "vast": Array of vast chain
  }
}

Sample Events

Player Initialized Event

The player is initialized on the inventory event

player.on("Inventory", function(){
  //Player is initialized
});

Impression Event

player.on("AdImpression", function(){
  //Ad impression occured
});

Identify when the Player Finished Calls

An AdError event is called every time a set of calls to the waterfall finished without impression or when at least one limit of the player configuration is reached (maxRun, maxImp, errorLimit)

...

player.on("AdError", function(res){
  if(res && res.errorlimit) {
    //Player stopped 
  }
});

Placement Behavior

The player support advanced behaviors such as In Article, Floating, Sticky and many customizations.

...

In order to activate the template, its is required to wrap the player element in additional elements and call the startTemplate API passing the element of the parent of the player position element

Template Position Wrapper

The player position (<div id="aniplayer_aniviewJS562811134">) is wrapped with an aniBox div and another wrapper

...

The player is created inside the position div with a unique id

Starting Template

In order to start running a template with the below configuration options, it is required to call startTemplate passing the element of the parent of the position passed in position. In this case it will be the aniBox element

player.startTemplate(document.getElementById(placementConfig.position).parentNode)

Templates Configuration

The templates configuration ads additional configurations to placementConfig

Those configurations are used only if startTemplate is called