VIDEO BANNERS DOCUMENTATION

Adsolutions / Documentation  / VIDEO BANNERS DOCUMENTATION

VIDEO BANNERS DOCUMENTATION

The templates are made as basic as possible so you have a simple starting point to begin building your creative. A

The template consists of the following assets:

  • index.html
  • style.css

index.html
The html is fairly basic. In the <head> It links to a .css file. And it tells us the ad size. And it includes the core library:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="ad.size" content="width=300,height=250">
	<script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>
	<link rel="stylesheet" type="text/css" href="main.css">
	<title></title>
</head>

The body contains a background div and a standard html video player with an ID. You can add your own sources and change the controls etc.

<body>
	<div id="background">
		<video id="videoPlayer" autoplay controls>
  			<source src="video.mp4" type="video/mp4">
  			<source src="video.webm" type="video/webm">
			Your browser does not support the video tag.
		</video>
	</div>

Underneath the divs you’ll find a small Javascript. Which we will explain line by further underneath. The code is wrapped within the init() function. This function is called when our library is ready.

The highlighted lines show we look for an element with ID videoPlayer (the ID of the video element) and the next highlighted line we tell the library to register this element as the video player. This way we can measure the VAST video events and report on them.

<script>
	// JavaScript Document
	function init() {
		var vid = document.getElementById("videoPlayer"); 
		var background = document.getElementById("background");
		/////Adds VAST reporting/////
		ADTECH.registerVideoPlayer(vid);
		///// Set your desired click name plus cick URL: ADTECH.click("yourname","yourURL"); /////	
		background.onclick = function(e){
        	ADTECH.click("cta", "http://www.adsolutions.com");
		};         
	}
	ADTECH.ready(init);
	</script>
</body>

Underneath (see the higlighted lines) the the click is implemented. You can change the URL here. Or designate it to a different element or add multiple clickable elements.

<script>
	// JavaScript Document
	function init() {
		var vid = document.getElementById("videoPlayer"); 
		var background = document.getElementById("background");
		/////Adds VAST reporting/////
		ADTECH.registerVideoPlayer(vid);
		///// Set your desired click name plus cick URL: ADTECH.click("yourname","yourURL"); /////	
		background.onclick = function(e){
        	ADTECH.click("cta", "http://www.adsolutions.com");
		};         
	}
	ADTECH.ready(init);
	</script>
</body>

The click is syntax is like so: ADTECH.click(‘Click Name‘, ‘your CLICK URL‘);

Click Name is used in the reports to distinguish which click through button was clicked on. You don’t have to enter the URL if you don’t know it yet. We can handle it for you if you send the URL or redirect later on.

SUPPORT
During the design phase we can provide you with a preview URL so you can see the work in action and make changes to your design accordingly. Send us the source files and fonts to [email protected] (WeTransfer preferred)

Final creative or requests for a preview can be send to [email protected]

Also read the GENERAL DOCUMENTATION fur further reference on building HTML5 ads.