AdsNG Developer Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Introduction ======

:!: **Important!**

**These guides are adequate only for the actual program versions which are available at this documentation’s publication time. These tools are developing continuously so the guides could become outdated with the appearance of a new version. If these conversions may not work, please write us at** [[support@adverticum.com]]** e-mail address.**

This guide provides help to achieve compliance with the specifications of the easeHTML Banner template. To review the full specification please follow this link: [[http://dev.adverticum.com/creatives:ehtml]]

Below we collected suggestions to help modify the output code of some of the more commonly used editors and converters, with product specific steps.

===== Uploading and modifying banners created with Adobe Anime CC =====

=== 1.) Open the .html file in a text editor (e.g. Notepad++) ===

=== 2.) Adding the goa-helper.js ===

For starting the goa-helper.js, just insert the following line in the <head> tag of the banner. Every function which refer to these variables need to be placed after it.

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

=== 3.) Creating the click handling ===

For handling the clicks, the goa.clickTAG variable needs to be read and use in the following way.
The <a> tag makes clickable the interface which is located between the opening and closing part. If we would like to make the creative clickable, the opening (<a>) tag has to be invoked the beginning of the wrapper which includes the creative, and the ending tag (</a>) has to be invoked at the end.

For example:
<code html>
<a id="clickTAG" href="" target="">
	<div id="animation_container" ... >
		<!-- The HTML code of the banner -->	
	</div>
</a>

<!--The click handling script -->

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

===== Uploading the banner to AdServer =====

Banners modified this way can be uploaded with the uploading steps for easyHTML:
 [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]
----

====== Conversion and upload Adobe Edge codes ======

The Adobe Edge is an image editor software which can be used to HTML5 banners. More information is available here:

[[https://creative.adobe.com/products/animate]]

To be able to run the banner as a HTML banner with the right references and clicks, there are some modifications to be done in the code. The conversion steps and the uploading method will be detailed hereinafter. About the requirements of the easyHTML banners please visit this link:

[[http://dev.adverticum.com/creatives:ehtml-en]]

===== Conversion of the banner =====

**1.** Creatives generated in Adobe Edge usually order the linked files into folders. As a first step, move all files to the same folder which contains the ''.html'' file.

**2.** Open the banner’s ''.html'' file in a text/code editor (e.g. Notepad++).

**3.** Search the following expression ''<!--Adobe Edge Runtime-->'' in the banners ''<head>'' tag and insert the following line before it:

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

After insertion the code should look similar to the example below:

<code html>

    <title>Untitled</title>
    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
<!--Adobe Edge Runtime-->
</code>

**4.** Open the banner’s ''.js'' file in a text/code editor (e.g. Notepad++).

:!: ** Important!**
  * It is possible that more .js files belong to the banner if it was created with different Edge-versions
  * In case of ''5.x.x'' the **5th** step should be done in the bannerName_edge.js, while the **6th** step should be done in ''the bannerName_edgeActions.js''.
  * In case of ''6.x.x'' all modifications should be made in the ''bannerName_edge.js''.

**5.** Search the following expression:

''images/''

Here are the following folder-references as an example (we've only display the part of the code that's relevant):

<code javascript>
/*...*/ ;var im='images/',aud='media/',vid='media/',js='js/',fonts= /*...*/
</code>

These references should be replaced to empty ''string'' in order to have the similar code line which we show hereinafter. With this step the banner will find the images in its folder and not in their previous folder:

<code javascript>
/*...*/ ;var im='',aud='',vid='',js='',fonts= /*...*/
</code>

**6.** To manage the clicks the following expression should be found:

''window.open''

Here are the following references as an example (again, we've only display the part of the code that's relevant):

<code javascript>
/*...*/ "click",function(sym,e){
    window.open("http://adverticum.com","_blank");
});
</code>

In order to avoid the insertion of the landing page into the code, the following code line should be used instead of the given link:

<code javascript>
goa.clickTAG
</code>

After the changes the code should be the following:

<code javascript>
/*...*/ "click",function(sym,e){
    window.open(goa.clickTAG,"_blank");
});
</code>

:!: It is important that the ''"_blank"'' expression should be after the URL because without that the landing page will not be opened in a new window.

**7.** If the banner needs to control displays with the open or close functions, please use the examples from the documetation below on the open/close/remove buttons:

[[http://dev.adverticum.com/creatives:ehtml-en#handling_the_functions]]
===== Uploading the banner to AdServer =====

Banners modified this way can be uploaded with the uploading steps for easyHTML:
 [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]
----

====== Conversion and upload of banners with Google Web Designer ======

Google Web Designer [GWD for short] is a free HMTL editor which is available in the following link:

[[https://www.google.com/webdesigner/]]

It is easy to convert banners with GWD to easyHTML banners. The conversion steps and the uploading method will be detailed hereinafter. About the requirements of the easyHTML banners, please refer to this documentation:

[[http://dev.adverticum.com/creatives:ehtml-en]]

===== Converting the banner =====

**1.** Open the folder of the published banner.

**2.** Open the given ''.html'' file with a text/code editor (e.g. Notepad++).

**3.** Search for the ''<head/>'' closing tag, and insert the following line before it:

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

After this, our code will look similar to this:

<code html>
    <script data-source="gwddoubleclick_min.js" data-version="1.9" data-exports-type="gwd-doubleclick" type="text/javascript" src="gwddoubleclick_min.js"></script>
    <script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script>
    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
</head>
</code>

**4.** Modify the file's path name where it is necessary because the banner uses relative URL in the code (e.g. image, CSS and external js references). These are usually images, CSS and javascript files, which should be in the folder as ''.html'' file.

In case of modifying Image banner’s URL eg.:

<code html>
<img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
</code>

We have to ensure that our code refers to files in it's own directory

<code html>
<img is="gwd-image" source="pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
</code>

**5.** We can choose from several ways of handling clicks. For example if we use an ''<a>'' tag, the ''href'' attribute of that tag should be obtained from the ''goa'' object, from the ''goa.clickTAG'' variable.

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

If we would like to use javascript:

<code javascript>
window.open(goa.clickTAG, '_blank');
</code>

**5.** If the banner is needed to handle displays, for the opening and closing functions should be applied per the specification below:

[[http://dev.adverticum.com/creatives:ehtml-en#handling_the_functions]]
===== Uploading the banner to AdServer =====

Banners modified this way can be uploaded with the uploading steps for easyHTML:
 [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]

----
AdsNG Developer Wiki

User Tools

Site Tools

Page Tools
