====== 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 tag of the banner. Every function which refer to these variables need to be placed after it.
=== 3.) Creating the click handling ===
For handling the clicks, the goa.clickTAG variable needs to be read and use in the following way.
The 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 () tag has to be invoked the beginning of the wrapper which includes the creative, and the ending tag () has to be invoked at the end.
For example:
===== 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 '''' in the banners '''' tag and insert the following line before it:
After insertion the code should look similar to the example below:
Untitled
**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):
/*...*/ ;var im='images/',aud='media/',vid='media/',js='js/',fonts= /*...*/
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:
/*...*/ ;var im='',aud='',vid='',js='',fonts= /*...*/
**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):
/*...*/ "click",function(sym,e){
window.open("http://adverticum.com","_blank");
});
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:
goa.clickTAG
After the changes the code should be the following:
/*...*/ "click",function(sym,e){
window.open(goa.clickTAG,"_blank");
});
:!: 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 '' '' closing tag, and insert the following line before it: