Adserver Developer Wiki

User Tools

Site Tools

You are here: start » creatives » ehtml-en
Trace: • ehtml-en
creatives:ehtml-en

Table of Contents

Creating and managing banners for the easyHTML template

Introduction

The easyHTML template is a Markup tamplate, which is ment to make managing HTML banners easier. This template also utilizes <iframe> to show the banner in, but managing this is a lot quicker. This holds benefits for both the management of the creative, and developing it.

Creating the banner

Introduction

The easyHTML template is such a tool int the Adverticum AdServer, that helps converting and managing the HTML/HTML5 banners. When developing such a banner, we should prepair, that the banner will be placed in an iframe, and it has to be able to utilize the recieved GET variables.

To help in this, we provide a javascript, that should be included in the <head>, which does parse the mentioned variables, and registers the necessary functions. This tool is called goa-helper.js, and on the usage, please refer to the guide after the restrictions.

Restrictions

1. By using the above mentioned tool, there are protected names, which can be changed except for goa.

  • goa
  • closeFunction
  • openFunction
  • hideFunction

In case the banner recieves measure points, the name of those will be also protected, along the scheme beneath, This should be checked with the campaign manager!

  • [name]_fire

For example if it's called bubble:

  • bubble_fire

2. The banner cannot use a folder system! Each file has to be in the same directory as the main .html. 

<img src="images/myImage.png" />

So the above wil have to be changed to this: 

<img src="myImage.png" />

3. All files have to have unique names, related to the banner, because they will be copied in the same folder as the other banners running in the same campaign.

4. All file size has to be under 300KB!

Prepare for serving

We have to prepare for the fact, that our banner will be served in an iframe. This document will not contain anything other then what we insert, so we have to make sure that CSS margins, paddings, etc. are reseted, and hide the scroll bars in certain cases.

For this, we recommend using the snippet below, but other properties might be needed in some banner structures. This should be placed before any other CSS, to avoid overwriting of other CSS properties the banner needs. 

<style>
    body {
        margin: 0;
        padding: 0;
        border: none;
 
        overflow: hidden;
    }
</style>

Including goa-helper.js

To include goa-helper.js, just paste the following code in the <head> of the banner. All the functions and references to goa has to be after this script. 

<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>

Checking open start request

Certain display modules (MultiExpand, Billboard, Sidekick, Slider) can be set to start in open state. This is handled by the Goa3 script. It is signaled to the banners, and can be checked like so: 

if (goa.openNow === 'true') {
/*...*/
}

In this if statement comes the code that should be called if the banner opens. For example resizing the content, or playing ceratin animations, that should be done if opened.

Handling clicks in case of one URL

To handle basic clickthrough, we need to read goa.clickTAG, and apply it in the prefered manner. This also has aliases:

  • goa.clickTAG
  • goa.clickTag
  • goa.cthref

Adminunkon beállítható, hogy a landing page hol nyíljon meg pl. _self vagy _blank, amit a goa.clickTARGET változóban adunk át. Alternatív nevei:

Tha target window to load the CT URL can be set on our admin site, eg.: _self or _blank, which can be read from goa.clickTARGET. Available with aliases:

  • goa.clickTARGET
  • goa.clickTarget

HTML example

<a id="clickTAG" href="" target="">CT</a>
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG');
        cT.href = goa.clickTAG;
        cT.target = goa.clickTARGET;
    })();
</script>

JS example

<div id="clickTAG"></div>
<script>
    document.getElementById('clickTAG').onclick = function () {
        window.open(goa.clickTAG, goa.clickTARGET);
    }
</script>

Handling clicks in case of multiple URLs

Handling multiple CT URLs shoud not be done through goa.clickTAG. We have the option to set custom variables, thorugh adding extra parameters when uploding to our servers.

We have to attach a JSON object, for the campaign manager to include while uploading the banner. In this we have to use the awaited names of the links as keys, and the URL itself as the value. Attaching it as a separate file with the extension of .txt is recommended. For example:

:!: It is essential that the JSON does not contain broken lines, just a single one. To minify it, there are several free online tools available, for example: http://www.willpeavy.com/minifier/

:!: Further neccesity is that the both the keys and values are written in double quotes. To check the validity of the object, we can use the following site: http://jsonlint.com/ 

{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}

While displayment, the link will be available by getting the properties form the goa object we define in this JSON.

HTML example

<a id="clickTAG0" href="" target="">CT</a>
<script>
    (function(){
 
        var cT = document.getElementById('clickTAG0');
        cT.href = goa.clickTAG0;
        cT.target = goa.clickTARGET;
    })();
</script>

JS example

Managing the second URL: 

<div id="clickTAG1"></div>
<script>
    document.getElementById('clickTAG1').onclick = function () {
        window.open(goa.clickTAG1, goa.clickTARGET);
    }
</script>

Handling the functions

The goa-helper.js registers several functions under the window namespace. these are usualy open and close functions, and in case of Slider display, hideing function is registered. the name of these functions are set in the GET variables. These can be modified by overwriting them in the extra parameters JSON. 

{"closeFUNCTION": "myCloseName", "openFUNCTION": "myOpenName", "hideFUNCTION": "myHideName"}

On the topic of available functions of display modules:
http://dev.adverticum.com/creatives:html-en#using_display_module_functions

Close

Default value is closeFunction, and can be retrieved from:

  • goa.closeFUNCTION
  • goa.closeFunction

HTML example

By using the default value: 

<div onclick="closeFunction();">OPEN</div>

JS examaple

By using the default value: 

<div id="closeButton"></div>
<script>
    document.getElementById('closeButton').onclick = closeFunction;
</script>

Or using the dynamic method: 

<div id="closeButton"></div>
<script>
    document.getElementById('closeButton').onclick = window[goa.closeFUNCTION];
</script>

Open

The default value is: openFunction, and can be retrieved from:

  • goa.openFUNCTION
  • goa.openFunction

HTML example

By using the default value: 

<div onclick="openFunction();">OPEN</div>

JS example

By using the default value: 

<div id="openButton"></div>
<script>
    document.getElementById('openButton').onclick = openFunction;
</script>

Or with the dynamic method: 

<div id="openButton"></div>
<script>
    document.getElementById('openButton').onclick = window[goa.openFUNCTION];
</script>

Hide

This is only needed in case of developing for the Slider display's secondary, sidekick banner, which can hide itself. Using the closeing function would remove the main creative which could lead to errors.

The default value is hideFunction, and can be retrieved from:

  • goa.hideFUNCTION
  • goa.hideFunction

HTML example

By using the default value: 

<div onclick="hideFunction();">HIDE</div>

JS example

By using the default value: 

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = hideFunction;
</script>

By using the dynamic method: 

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = window[goa.hideFUNCTION];
</script>

Using the measures provided

If the creative has measures available, the name of the measure is passed buy the template. These names are used to register functions by the goa-helper for the banner to use. So if the banner recieves a measure called bubbles, then the generated function name will be bubble_fire.

HTML example

<div onclick="bubbles_fire();">HIDE</div>

JS example

<div id="hideButton"></div>
<script>
    document.getElementById('hideButton').onclick = bubbles_fire;
</script>

Uplodaing the banner

General

  1. To upload the banner create a Markup banner.
  2. Name the banner.
  3. Set banner dimensions. :!: It is crucial to set the right banner size, as will be used to display it in!
  4. Choose the Templates tab.
  5. Choose easyHTML Banner from the template drop down menu.
  6. Set Banner file by choosing the .html from the drop down. If not uploaded yet, use the + signed button to add files.

Adding extra parameters to the banner

There is the option to add extra parameters, like multiple CT URLs for the banner. These are needed to be pasted in the Extra parameters text box, in the manner below. This object has to come with the banner, provided by the developer. 

{"clickTAG0": "//missinglink.adverticum.net/", "clickTAG1": "//check.adverticum.net/"}

This will be recieved by the tamplate and passed to the banner. If there is a need for extra parameters, please consult the developer to use the proper variable names.

:!: Attention! This example won't measure clicks, it's just a sample, or if we want to use 3rd party measure links. To measure clicks please use the example below. In the example the two parameters are clickTAG0 and clickTAG1. These provide multiple CT URLs fot the banner. - Click Source tab. - Click Add new URL button under the list of URLs. - Create URLs according to the recieved extra parameters. :!: Attention! All URLs are measured as CT.**

  1. Take a note of the URL's ID or name.
  2. Click the Template tab, and insert intoExtra parameters box the recieved object modified this way:
{"clickTAG0": "[url:100000]", "clickTAG1": "[url:200000]"}

:!: It very important to use double quotes both on the key and value.

When done in reality, the numbers will be the URL IDs.

creatives/ehtml-en.txt · Last modified: 2015/12/08 14:48 by avarga