Skip to main content

The implementation of the Adhese ad tags

This information refers to the old Adhese SDK, for current information on setting up the inventory and slots, see: Typescript SDK

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

  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:

    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.

IAB Safeframe

Adhese used to support 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 });

Safeframe used to be on by default, but this is no longer the case with the new SDK and doesn't need to be disabled anymore when using the Typescript SDK.

No Comments
Back to top