Table of Contents
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.
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
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:
<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>
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:
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:
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
After insertion the code should look similar to the example below:
<title>Untitled</title> <script src="//ad.adverticum.net/scripts/goa-helper.js"></script> <!--Adobe Edge Runtime-->
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.xthe 5th step should be done in the bannerName_edge.js, while the 6th step should be done inthe bannerName_edgeActions.js. - In case of
6.x.xall modifications should be made in thebannerName_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:
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:
<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
After this, our code will look similar to this:
<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>
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.:
<img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
We have to ensure that our code refers to files in it's own directory
<img is="gwd-image" source="pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
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.
<a id="clickTAG" href="" target="">Click...</a> <script> (function(){ var cT = document.getElementById('clickTAG'); cT.href = goa.clickTAG; cT.target = goa.clickTARGET; })(); </script>
If we would like to use javascript:
window.open(goa.clickTAG, '_blank');
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