Miscellaneous

The implementation of the Adhese ad tags

Once you have mapped the structure of your inventory and created the appropriate positions, it is time to create and implement the ad tags. Ad tags are the foundation of our technology. They allow us to deliver and measure targeted campaigns.

How to get started with Adhese

Load the following piece of JavaScript code in the <head> of the page:
```
<script type="text/javascript" src="adhese.min.js"></script>
```

Provide a local function that returns the content identification:

<script type="text/javascript">
    function getLocation() {
    return "_demo_test_";
    }
</script>

Initialize the Adhese instance:

varadhese = newAdhese();
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 builder is blocked 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 that matches the requested format, and then make a call to 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 make a request first and visualise the response later. The implementing client is responsible for correct reporting.

The JSON or JSONP implementation method allows all ads to be bundled into a single request and the creative to be visualised in the right place. With this method, it is easy to take into account the moment when the creative has a real change to be seen, better known as viewability or in-view. This implementation method is the most suitable and favourable 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 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 puts the ads in 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 and convenient 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.

Load the JavaScript file:

<script type="text/javascript" src="adhese-vast.js"></script>

Create an AdheseVastWrapper object:
```
var wrapper = newAdheseVastWrapper();
```
Register a listener for the ADS_LOADED event fired by AdheseVastWrapperThe first parameter is the event name, and the second is the name of your callback function. This function will be called when the wrapper is ready to handle your ad request.
```
wrapper.addEventListener("ADS_LOADED", yourCallBackFunction);
```
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"]);
```
Once the request is finished, AdheseVastWrapper will fire the ADS_LOADED event, and your callback function will 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 the IAB SafeFrame standard where possible. Adhese supports SafeFrame by default. To turn it off, initialize your Adhese instance with the safeframe option set to false.

var adhese = newAdhese();
adhese.init({ debug: true, account: "demo", location: getLocation, safeframe: false });

Campaign targeting

Targeting makes it possible to optimise the performance of your campaigns by tailoring the delivery to the profile of your audience – where relevancy is key. During the implementation process of your Adhese account, you will need to consider which variables or parameters you would like to use for targeting purposes. You can add additional parameters to your account at any time.

A request can have targeting parameters at three different levels:

as a parameter in the request itself,
as a value in the cookie, or
as a value at the server (identification will happen through a unique key or session).

A request can combine the above three methods.

See Targeting for the different targeting techniques.

Remember that the unique identification of visitors and the storage of personal and other data are subject to national, European and international legislation. It is the exclusive responsibility of the publisher to comply with the law and adequately inform the user of his rights. Adhese can help and advise publishers here. More on user privacy is available in the GDPR section of the documentation.

System-wide over-delivery

An over-delivery percentage can be configured. For instance, if set at 2%, each campaign will deliver 2% more than the initially booked volume of impressions. An over-delivery percentage is applied to prevent minimal under-delivery of third-party ads in the event of reporting discrepancies

Don't hesitate to contact support if you want to increase or decrease your system-wide over-delivery percentage.

How to deal with responsive web pages?

The increasing use of various devices such as smartphones, phablets, tablets, and laptops highlights the importance for publishers and advertisers to adopt a responsive strategy.

The design of a responsive website adjusts to the size of the device's browser screen. In contrast, the website's content's readability or interface's usability is not compromised.

The technology of Adhese can deliver the same creative across multiple devices. You only need to determine the display resolution in which the creative dimensions will adequately fit. An ad will only be displayed (and counted as an impression) if the ad request is sent from a device that can guarantee the correct delivery of the ad. So, you don't need to create a booking or upload a creative for each different kind of device, manufacturer or browser you'd like to target. However, advertisers can still deliver an optimised creative for each device they want to target separately.