[email protected]
mobile logo

BILLBOARD DOCUMENTATION

Adsolutions / Documentation  / BILLBOARD DOCUMENTATION

BILLBOARD DOCUMENTATION

The template is made as basic as possible so you have a simple starting point to begin building your creative.

The template consists of the following assets:

  • index.html
  • code.js
  • style.css

index.html

The html is fairly basic. It links the .css and .js files. And it contains a video player and expand and close buttons. And it includes the core library:

<!doctype html>
<html>

<head>
	<meta name="ad.size" content="width=970,height=250">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="http://onecreative.aol.com/ads/jsapi/ADTECH.js"></script>
	<script type="text/javascript" src="code.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 content here.

<body>
	<div id="background" class="expanded">
		<div id="videoContainer">
			<video id="videoPlayer" poster="images/video.jpg" preload="auto" controls>
				<source src="video.mp4" type="video/mp4"/>
				<source src="video.webmsd.webm" type="video/webm"/>
			</video>
			<div id="playButton" class="button">
			</div>
		</div>
		<div id="closeButton" class="button"></div>
		<div id="expandButton" class="button hide"></div>
	</div>
</body>

code.js

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.

// JavaScript Document
function init() {
	var vid = document.getElementById("videoPlayer");
	var playButton = document.getElementById('playButton');
	var background = document.getElementById("background");
	var expandButton = document.getElementById('expandButton');
	var contracted = false;
	var isPlaying = false;

//------------------------------------------------------------------------
	vid.muted = true;

	/////Adds VAST reporting/////
	ADTECH.registerVideoPlayer(vid);

Next a function that controls what happens when the playButton is clicked.

	playButton.onclick = function (e) {
		vid.style.opacity = 1;
		vid.play();
		isPlaying = true;
		playButton.style.display = 'none';
	};

Then a function that controls what should occur when the video finishes playback:

/////Defines what should occur when the video finishes/////
	vid.onended = function () {
		vid.style.opacity = 0;
    playButton.style.display = 'block';
	};

Then the closeButton function. This function controls what happens when the closeButton is clicked. The highlighted line is mandatory and is there to tell our system we need to contract the iframe in which the ad is rendered.

closeButton.onclick = function (e) {
		///// Contract Event shown in reporting /////
		ADTECH.contract();
		if (isPlaying) {
			vid.pause();
		}
		contracted = true;
		/////Add any elements that should be hidden in the contracted state of the add/////
		var elm = [playButton, closeButton, videoContainer];
		for (i = 0; i < elm.length; i++) {
			if (elm[i].className.match(/(?:^|\s)hide(?!\S)/) === null) {
				elm[i].className += " hide";
			}
		}
		document.getElementById("background").className = " contracted";
		expandButton.style.display = "block";
	};

Within this function a variable called elm is declared. elm is an array. Every element that is added in this array is going to be hidden when the closeButton is clicked. Feel free to add your own elements to this array.

		/////Add any elements that should be hidden in the contracted state of the add/////
		var elm = [playButton, closeButton, videoContainer];

Next the expandButton function which handles what should happen when the ad expands (show/hide elements, start video, call ADTECH.expand). The highlighted line is mandatory and is there to tell our system we need to expand the iframe in which the ad is rendered.

expandButton.onclick = function(e){
  if(contracted){  
	///// Expand Event shown in reporting /////
    ADTECH.expand();
	///// Add any elements that should be visible in the expanded state /////
    var expC = [vid, playButton, closeButton, videoContainer,muteButton];
    for(i = 0; i < expC.length; i++){
      if ( expC[i].className.match(/(?:^|\s)hide(?!\S)/)){
        expC[i].className = expC[i].className.replace(/(?:^|\s)hide(?!\S)/, "");   
      }    
    }   
  }
    
  expandButton.style.display = "none";
  background.className = " expanded";
  contracted = false;
  if(isPlaying){
    vid.play();
  }

Within this function a variable called expC is declared. expC is an array. Every element that is added in this array is going to be shown when the expandButton is clicked (assuming it has class=”hide” beforehand) . Feel free to add your own elements to this array.

///// Add any elements that should be visible in the expanded state /////
			var expC = [vid, playButton, closeButton, videoContainer];

The code.js file is also the spot where the click is implemented. You can change the URL in this file. Or designate it to a different element or add multiple clickable elements.

///// Set your desired click name plus cick URL: 
	background.onclick = function (e) {
		e = e || window.event; var obj = e.target || e.srcElement;
		if (!contracted && obj.className.indexOf("button") == -1) {
			ADTECH.click("expanded", "http://www.adsolutions.com");
		}
	};
}
ADTECH.ready(init);

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.