Video ads offer a rich experience and engagement for your audience. Customize master tags to serve outstream video ads such as Video Wall or Baseboard.
Video Wall is a full screen video format for desktop non-responsive sites. Once the page is loaded, the banner pushes the whole page content down, and starts showing a video. Users can scroll down to hide the video ad or they can click the close button to hide the video. This format has only three action buttons on the ad itself: a call-to-action (CTA) button, a skip ad button, and a sound toggle. The video sound is muted by default.
Some benefits of Video Wall are:
-
Highly engaging Video format
-
Renders inside publishers' content
-
The same tag can be used on multiple placements
Technical requirements:
-
Generate a custom tag by entering several lines of JavaScript code as in the standard Adform tags process.
-
The publisher must then integrate the tag into their website.
-
Add a poster image to show before the video starts playing.
-
Define the video scale. The default video player dimension ratio is 16:9. However, for a video to scale well, provide the correct video scale.
-
If you wish, you can edit the position and appearance of action buttons with custom CSS.
Video Wall is designed to work with friendly iframes.
Test tag
Publishers can use these tags to run actual campaigns.
Tag example:
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/videowall.js"
data-vast-id="11136859">
</script>
<div>
Production/Live tag
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/videowall.js"
data-pmp-id="*****">
</script>
<div>
***** - PMP in-stream placement master tag ID. When creating in-stream placement in the PMP, assign a video that has MP4 and WEBM as required file types.
-
data-pmp-id - PMP master tag ID.
-
data-vast-id - (OR) VAST tag BN (either PMP or VAST must be defined to show the ad).
-
data-cut-corners : string 'false'. Scale the video so corners might be invisible. The default value is "False".
-
data-pause-threshold: string. Values from 0.1 to 1, percentage where to pause video on scroll. Default is 0.3.
-
data-cta-image : string. URL or base64 encoded image for custom CTA button.
Note
The image size will be capped to 280x70
-
data-skip-image : string. URL or base64 encoded image for custom skip button.
Note
The image size will be capped to 280x70.
-
data-query-append: string. Can add single or several query string parameters. If more than one parameter is added it has to be separated with ampersand (&). For example:
data-query-append="ParamName1=ParamValue1&ParamName2=ParamValue2”Note
It only works with
data-pmp-id.
Example of tag with additional parameters:
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/videowall.js"
data-pmp-id="5386383"
data-pause-threshold="0.5"
data-cta-image="//:www.link-to-cta-img.com"
data-query-append="schain=1.0,1!exchange1.com,1234,1">
</script>
</div>
Baseboard Ad video format is for desktop and tablet environments. Once the VAST tag is loaded, the banner is rendered either from PMP inventory or directly from VAST. You can customize the width of the banner, and the height will be auto-adjusted based on the original video's aspect ratio. The video sound can be turned on and off by hovering over the banner or by clicking on the mute icon.
Some benefits of Baseboard ads are:
-
Highly engaging video format.
-
Renders on top of publishers' content and is attached to the bottom of the browser window.
-
The same tag can be used on multiple placements.
Technical specifications:
-
HTML5 based video player.
-
The base banner format is Video In-stream.
-
Video Ad is delivered using VAST.
Test Tag
Publishers can use these tags to run actual campaigns.
Tag example:
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/floorad.js"
data-vast-id="11136859">
</script>
<div>
Production/Live Tag
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/floorad.js"
data-pmp-id="*****">
</script>
<div>
***** - PMP In-Stream Placement Master Tag ID. When creating In-Stream placement in the PMP you should assign a creative that has MP4 and WEBM as required file types.
Note
If the banner will run on mobile placements, an MPG video must be assigned to an in-stream banner for autoplay functionality to work on mobile devices.
-
data-pmp-id - PMP master tag ID.
-
data-vast-id - (OR) VAST tag BN (either PMP or VAST must be defined to show the ad).
-
data-custom-width : string. Insert either a fixed width in pixels (for example, 600px) or percentage of screen (for example, 50%). The minimum banner width is 320px.
-
data-custom-expanded-width - string. Insert either a fixed width in pixels (for example, 600px) or a percentage of the banner size (for example, 200% means that expanded banner will be 2x bigger than collapsed). Expanded width must be greater than its collapsed value.
-
data-expand-delay : string. The delay for expand function in banner once user hovers on the banner. Define the parameter in seconds (for example, 2s or 2). The minimum delay is 0s (negative numbers can't be used).
-
data-collapse-delay : string. The delay for collapse function in banner once user hovers off the banner. Parameter should be defined in seconds (for example, 2s or 2). The minimum delay is 0s (negative numbers can't be used).
-
data-unmute-delay : string. The delay for unmute function in banner once viewer hovers on the banner. Parameter should be defined in seconds (for example, 2s or 2). The minimum delay is 0s (negative numbers can't be used.
-
data-query-append: string. Can add single or several query string parameters. If more than one parameter is added it has to be separated with ampersand (&). For example:
data-query-append="ParamName1=ParamValue1&ParamName2=ParamValue2”Note
It only works with
data-pmp-id.
Example of a tag with additional parameters:
<div id="adform-outstream" style="height:0;overflow:hidden;">
<script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/floorad.js"
data-pmp-id="5386383"
data-query-append="schain=1.0,1!exchange1.com,1234,1">
</script>
</div>
For outstream, add key-values or keywords manually. For example:
<div id="adform-outstream" style="height:0;overflow:hidden;"> 2 <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js" 3 data-pmp-id="xxxxxx&mkw=example"> 4 </script> 5</div>
You can use data-vast-url structure to add a URL parameter on outstream. For example:
<div id="adform-outstream" style="height:0;overflow:hidden;"> 2 <script language="javascript" src="//s1.adform.net/banners/scripts/video/outstream/inview.js" 3 data-vast-url="https://adx.adform.net/adx/?mid=xxxxxx&url=domain.com"> 4 </script> 5</div>
"Smart Insert" feature can be used when a publisher doesn't have a specific placement that an out-stream ad could be rendered into.
Configuration example
Insertion in between elements:
<script>
(function(window, document) {
window.ADFSlot = function() {
var el = document.querySelectorAll('#entr-content > p');
var insertion = 'near-fold'; // possible methods: 'near-fold' and 'middle'
return {
paragraphs: el,
insertion: insertion
};
}
})(window, document);
</script>
Insertion as element child:
<script>
(function(window, document) {
window.ADFSlot = function() {
var el = document.getElementById('selector')
return {
paragraphs: el
};
}
})(window, document);
</script>
-
ADFSlot: A global method should return paragraphs of an article and insertion type.
-
paragraphs: Should use CSS selector syntax in
querySelectorAllmethod. -
insertion: If this parameter is empty, then a specific element should be passed to paragraphs where the ad will be rendered.
-
middle property in the insertion parameter means the ad will try to render in the middle of an article.
-
near-fold property in the insertion parameter will make the ad render as close to the fold as possible.
"Smart insert" example:
Main div holding text is #articleText. This element consists of p elements:
Configuration
<script>
(function(window, document) {
window.ADFSlot = function() {
var doc = window.top.document;
var el = doc.querySelectorAll('#articleText > p');
var insertion = 'near-fold'; // or 'middle'
return {
paragraphs: el,
insertion: insertion
};
}
})(window, document);
</script>