Cedato Ad Units Portfolio – Ad Player – Implementation Guide

Cedato Support -

Cedato’s Out-Stream Ad Units Portfolio provides an easy way to use and customize Cedato smart video player. The portfolio offers a framework for rapidly deploying a customized native video advertising experiences and innovative ways to engage with viewers, maximizing inventory supply, engagement and results.

In-content video ads are placed within standard web page content and articles or within a list of content items (“In Feed”). Engagement can be further enhanced by initiating sound or additional actions upon mouse-hover.

The Ad Player appears immediately on the webpage when it is loaded however the video ad or content are paused until 50% (by default but can be adjusted) of the players expected height is in the viewable screen. 

Implementing an Ad Player ad unit:

  1. Setup an HTML Player Supply item on the Cedato Dashboard. Customize the parameters of the player:
    1. Assigned demand items
    2. Content
    3. Settings:
      1. Allow Sound – Play sound on the unit by default
      2. Rotation – if you wish the unit to play few pieces in a row
      3. Auto Play – Recommended to be checked (on)
      4. Control bar- if you wish to enable the default control bar on the unit
    4. Tag - Optionally set default side (later on can be overridden by code)
    5. Restrictions and Callbacks – as appropriate – optional

For further details on a Cedato HTML Player Dashboard configuration, please refer to our Helpdesk.

Ad Player Unit starts in accordance with the parameters defined in the dashboard but can be overridden via Player API upon calling the Unit.

  • Copy the Supply ID of the HTML Player. E.g. 1053904959
  • Copy and paste the following code to the appropriate place on the page:

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

     <script>

       document.addEventListener('cedatoAdUnitReady', function() {

         CEDATO.InContent({

          player: {

             playerId: 1053904959, // Mandatory - replace with your own Supply ID

             protocol: 'http:', // Optional, set to http/https according to the secure setting of your website. If                                          no setting is applied we detect the protocol.

             domain: 'yourdomain.com', // Set the domain the player is running on. This domain will be                                                               passed to the Demand

             servingDomain: 'algovid.com', // Leave as-is or change to your Cedato Serving domain

             extraParams: '', // Leave as-is

           },

           position: 'ads', // Parameters that define the size and position of the player

           control: {

              closeButton: true,  // true/false to set close button on/off

              soundOnHover: true, // true/false to set if sound is played on hover

              playOnVisibility: 50, // % set the player visibility threshold to turn the ad-unit visible

              pauseOnVisibility: 25, // % set the player visibility threshold to pause the player

              pauseOnHiddenTab: true, // true/false to pause the player when tab is hidden

           },

         });

       });

     </script>

     <script async src="http://c.algovid.com/player/ad-units.2.0.js"></script>

 

That’s it. You are good to go!

 

Q&A

Q: How can I change the ad-unit size?

A:

Replace the line

             position: 'ads',

with the following code and define the player size measurements as required:

             position: {

              container: 'ads',

              width: 300, // Defines the width of the player

              height: 250, // Defines the height of the player

              ratio: 0.6, // Defines the ratio between the player’s width and height

              },

Note that you can remove any of the lines above as appropriate. 

“container” - contains id, selector or element that links the player with some definite location on the web page. This parameter is mandatory and should contain either of:

  • ‘ads’ - element id, that represents a location on a web page,
  • ‘p #ads’ - CSS selector, that represents a location on a web page,
  • document.getElementById(‘ads’) - element, that represents a location on a web page.

If no size parameters are defined, they are calculated automatically - based on the container element width and the default ratio. In order to define the player size explicitly, the following options should be used:

  • set ‘width’ and ‘height’ - the player has the defined values,

 position: {

              width: 300, // Defines the width of the player

              height: 250, // Defines the height of the player

              },

  • set ‘width’ and ‘ratio’ - the player has the defined width, the height is calculated according to the defined ratio,

position: {

              width: 300, // Defines the width of the player

              ratio: 0.6, // Defines the ratio between the player’s width and height

              },

  • set ‘width’ only - player has the defined width, the height is calculated according to the default ratio.

 position: {

              container: 'ads',

              width: 300, // Defines the width of the player

              },

Q: How does the Ad Player unit differs from In-Content Unit?

A: 

  • The Ad Player Unit appears in the defined position of the web page immediately when the webpage is loaded, the video ad or the content does not start playing until 50% of the players expected height is visible on-screen.
  • The In-Content Unit is not visible until 50% of its expected height is in the screen and can be configured to get hidden once it finishes playing.

Q: How can I customize the close button?

A: Customizing the close button is easily done by changing the #ads .__cedato_close_button class, setting it to the shape, size and location that meets your design. For example, this is an example of an alternate close button code to be added. Please make sure to add the button url or Base64 below.

<style>
#ads .__cedato_close_button {
width: 24px;
height: 24px;
background: THIS IS WHERE YOU PLACE YOUR ALTERNATE BUTTON IMAGE (URL/BASE64);
background-position: -8px -8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-size: 0px;
border: none;
padding: 0;
margin: 0;
}
</style>

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.