User Tools

Site Tools


creatives:ehtml-conv-en

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.

Conversion and upload of Flash banners with Swiffy

Swiffy is a free Google product which is able to convert most Flash creatives to HTML. This service is available here:

https://developers.google.com/swiffy/convert/upload

The following documentation means a great help for managing the conversion of embedded Flash-based banners. For a perfect implementation creatives are needed to comply with Flash Banner Creation Guide:

http://dev.adverticum.com/creatives:flash-en

Conversion steps

1. Choose the needed file by clicking on the “Choose file” button and accept the terms and conditions by clicking on the given checkbox.

2. Click on the “UPLOAD” button to upload the file.

3. Following the successful conversion save the generated HTML file by clicking on the “VIEW CONVERSION” with right mouse button.

Modifying the converted file for matching the Adverticum AdServer’s specification

:!: Attention, this guide is ment for banners converted with Swiffy 7.x.x, or greater.

This can be check this at the beginning of the source code by searching for the swiffy/v7.3 expression:

<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3/runtime.js"></script>

:!: Attention, the steps below are only necessary is the banner uses open/close functions, otherwise it's already servable with the easyHTML Banenr template: http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner

1. Open the saved file in a text/code editor (e.g. Notepad++).

2. Search the following part, near the end of the code:

    <script>
 
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
 
      stage.start();
    </script>

3. Insert the following code line before the snippet above:

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

After which our code will look something like this:

    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
    <script>
 
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});
 
      stage.start();
    </script>

4. Save the file.

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:

<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.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 <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. Kattintások kezeléséhez, több megoldás is rendelkezésünkre áll. Ha például <a> tagot használunk, akkor annak értékét a goa objektumból kell kiolvasnunk a goa-clickTAG változóból.

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


You could leave a comment if you were logged in.
creatives/ehtml-conv-en.txt · Last modified: 2015/10/06 15:15 by avarga