Skip to end of metadata
Go to start of metadata

After the mapping of your inventory's structure and creation of the accompanying positions, it is time to create and implement the Adhese ad tags. Ad tags are the basis of our technology and allow us to deliver and measure targeted campaigns.

How to get started with Adhese

  1. Load the following piece of JavaScript code in the <head> of the page:

    <script type="text/javascript" src="adhese.min.js"></script>
  2. Provide a local function that returns the content identification:

    <script type="text/javascript">
        function getLocation() {
            return "_demo_test_";
        }
    </script>
  3. Initialize the Adhese instance:

    var adhese = new Adhese();
    adhese.init({debug:true, account:"demo", location: getLocation });
    // value of the account attribute can be found in your Adhese subscription information or through our support portal.

Implementation of the Adhese ad tag

Legacy requests

Legacy requests are implemented as a script fragment inside the <div> container where they will be visualized. The client executes the request and inserts the response in the <div> container with a document.write statement. However, this implementation method is not recommended if you want to take advantage of viewable tracking and forecasting. It also has performance drawbacks, as the client's document build up will block while requesting an online ad.

For each ad you want to serve on a web page, you should create a <div> container with a unique id value that is the same as the requested format and then make a call to a the adhese.tag function.

<div id="leaderboard">
	<script type="text/javascript" charset="utf-8">
        var ad = adhese.tag("leaderboard", {write:true});
	</script>
</div>

Asynchronous JSON and JSONP requests

Asynchronous requests allow you to perform a request first and visualize the response later. The implementing client is responsible for correct reporting.

The implementation method with JSON or JSONP makes it possible to bundle all advertisements in one request and visualize the creative in the right place. With this method it is easy to take into account the moment when the creative has a true change to be seen, better known as viewability. This implementation method is the most suitable and favorable method to use in a responsive environment.

A tracker URL that is passed in the response should be requested when visualizing the ad. The code can be built with an extra AJAX request handler. If you plan to implement in a client that is already capable of performing asynchronous requests, you can omit this part of the SDK from the dist file by running 'make noajax'.

The next piece of code is a basic ad tag that tells the client to continue loading everything else on the page while it waits for the leaderboard ad creative request. This ad tag needs to be pasted between the HTML <body> tags, in the position where you want the leaderboard ad to be served.

adhese.tag("leaderboard", {async:true;});

If the client has to request data from a different domain than your own, you’ll need to implement the next JavaScript tag:

<script src="http://ads.adhese.com/ad/jsonp/callback/sl_homepage_-leadboard/sl_homepage_-banner/sl_homepage_-skyscraper"></script>

The above script also allows you to simultaneously load all your ad creatives at once: the leaderboard, banner and skyscraper ad. Next to this code, you still need a code that put the ads at the right position.

Video integration with VAST

The Adhese Vast JS library is meant to ease the integration of VAST ads in video players. It contains cross-domain safe methods for requesting ads from your Adhese account as well as convenience methods for playing and tracking video ads. It is however not a player on its own and it does not insert anything in the DOM.

  1. Load the JavaScript file:

    <script type="text/javascript" src="adhese-vast.js"></script>
  2. Create an AdheseVastWrapper object:

    var wrapper = new AdheseVastWrapper();
  3. Register a listener for the ADS_LOADED event fired by AdheseVastWrapper. The first parameter is the event name, the second is the name of your callback function. This function will be called when the wrapper is ready handling your ad request.

    wrapper.addEventListener("ADS_LOADED", yourCallBackFunction);
    
  4. Initiate a request for ads passing the host of your Adhese account and the sloth path and target parameters you wish to request.

    wrapper.requestAds("http://ads.demo.adhese.com", "_test_", ["preroll","postroll"]);
    
  5. Once the request is finished,  AdheseVastWrapper will fire the ADS_LOADED event and your callback function wil be called. From then on you can access several properties of the wrapper object to get info on the ads.

This is a complete example:

<html>
<head>
	<script type="text/javascript" src="dist/adhese-vast.min.js"></script>
</head>
<body>

<!-- create a player and info pane container -->
<h1 id="info"></h1>
<div id="player"></div>

<script type="text/javascript">

// just for completing the example, the content that will be shown after the example ad
var actualContentSrc = "http://media.w3.org/2010/05/bunny/movie.mp4";

// get reference to the container elements
var playerContainer = document.getElementById("player");
var infoContainer = document.getElementById("info");

var a = new AdheseVastWrapper(true);
a.init();
a.addEventListener("ADS_LOADED", adsAreLoaded);
a.requestAds("http://ads.demo.adhese.com", "_sdk_example_", ["preroll"]);

function adsAreLoaded() {
	console.log("adsAreLoaded")

	// if has preroll, show it
	if (a.hasAd("preroll")) {
		// display duration
		infoContainer.innerHTML = "ad takes " + a.getDuration("preroll") + " time, stay tuned";

		// create source element for video
		var adSrc = document.createElement("source");
		adSrc.src = a.getMediafile("preroll","video/mp4");
		adSrc.type = "video/mp4";

	    // create desired video element
		var adPlayer = document.createElement("video");

	    adPlayer.width = 640;
	    adPlayer.height = 480;
	    adPlayer.autoplay = "true";

	    // if using a flash based player: make sure adPlayer is a reference to the flash object and allowScripAccess is true
	    // event names will be different in flash as well, depending on how video playback is implemented

		// attach to timeupdate event for passing the currentTime, this allows adhese to track the actual viewing of the ad
		adPlayer.addEventListener("timeupdate", function() { a.timeupdate("preroll", adPlayer.currentTime); }, true);
		// clicks on video player should be sent to adhese for handling and reporting
		adPlayer.addEventListener("click", function() { a.clicked("preroll", adPlayer.currentTime); }, true);
		// when playing has ended, tell and adhese and than continue to showing content
		adPlayer.addEventListener("ended", function() { a.ended("preroll", adPlayer.currentTime); showActualContentAfterPreroll(); }, true);

		//add the source to the video element
		adPlayer.appendChild(adSrc);

		// ad the video element to the player container
		playerContainer.appendChild(adPlayer);
	}

}

function showActualContentAfterPreroll() {
	// here comes the code to start your content after the ad
	infoContainer.innerHTML = "Feature film starting. Enjoy!";
	playerContainer.innerHTML = '<video id="video" controls="" autoplay="" width="640" height="480" preload="none" poster="http://media.w3.org/2010/05/bunny/poster.png"><source id="mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4"><source id="ogv" src="http://media.w3.org/2010/05/bunny/movie.ogv" type="video/ogg"></video>';
}

</script>
</body>
</html>

IAB Safeframe

Adhese recommends the use of IAB SafeFrame standard where possible. Adhese supports SafeFrame by default. To turn off, initialize your Adhese instance with the safeframe option set to false.

var adhese = new Adhese();
adhese.init({debug:true, account:"demo", location: getLocation, safeframe: false });
  • No labels