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

For example:

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

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.

requestBids()

Allows manually request bids if the refresh strategy is “none”.

renderAd()

Allows manually render the next winning bid’s HTML if the refresh strategy is “none”.

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

In addition, callback on functions are supported to the events

Note: With vpaid ad sources, the player relies on events triggered by the vpaid. In some cases, some events are not supported by vpaids so those events might not be called sometimes.

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)

When the player finished calls and will not continue anymore, it calls AdError event and passes an errorlimit parameter

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

Placement Behavior

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

Aniview provides a tool for managing templates configuration. this section describes the configuration flags available for templates configuration

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

<div style="width: 100%; margin: 0px auto; max-width: 640px;">
  <div id="aniBox" style="height: 1px;">
    <div id="aniplayer_aniviewJS562811134">
    </div>
  </div>
</div>

The player template generator automatically build this structure

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

Templates Configuration

The templates configuration ads additional configurations to placementConfig.