Cedato Ad Units Portfolio – In Content – 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”). An auto-play video ad is smoothly displayed as the user scrolls through the page on desktop or mobile, responsively adapting its size to the actual viewing screen and proportions. Engagement can be further enhanced by initiating sound or additional actions upon mouse-hover.

In-content ads (also referred as “In-Text”, “In-Read”, “In-Feed”, etc) are highly effective for increasing inventory by dynamically creating video ad placements over existing non-video content, yielding highly viewable and valuable video supply.

The In-Content Unit is not visible until 50% (by default but can be adjusted) of its expected height is in the viewable screen and can be configured to get hidden once it finishes playing.

Implementing an In-Content 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.

In-Content 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

              closeOnAdEnd: true, // true/false to set if ad unit will close on end of ad

              closeOnContentEnd: false, // true/false to set if ad unit will close on end of content

              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: Why doesn't the unit open?

A: The unit resizes and starts playing upon a scroll user event. Hence the page should enable a scrolling operation by the user. Also, pay attention that the unit will require enough space on the screen to grow into. E.g. if placing the unit as the last item on the page, leave enough space for the unit below to grow into.

Q: Why doesn't the unit close after Ad ends?

A: Make sure to disable the Rotation option under Supply > Settings > Rotation, to be able to apply the function 'closeOnAdEnd: true'.

Q: Why doesn't the unit close after Content ends?

A: Make sure to disable the box 'Loop content' under Supply > Content, to be able to apply the function 'closeOnContentEnd: true'.

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

1 Comments

  • 1
    Avatar
    Nimrod Goldberg
    1. Use https if its a secured site
    2. Don't use the ' ' in the player ID row
    3. The entire code needs to be in between contents - it can't be at the end of the page
    4. The page you are putting the code it has to be scroll-able
    5. if you don't put any content and the demand didn't response you will not see anything
    6. If you want the window to close after the ad was played - please make sure rotation is unchecked under player setting.
    Edited by Nimrod Goldberg
Please sign in to leave a comment.