Differences

This shows you the differences between two versions of the page.

--- creatives:ehtml-conv-en [2015/10/02 17:01] – created avarga
+++ creatives:ehtml-conv-en [2020/07/15 11:44] (current) – removed dtakacs
@@ Line 1: / Line 1: @@
-====== 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]]
-===== 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.
-{{ :conversion:screen_shot_2015-08-18_at_5.13.24_pm.png?nolink&600 |}}
-**2.** Click on the "UPLOAD" button to upload the file.
-{{ :conversion:screen_shot_2015-08-18_at_5.13.12_pm.png?nolink&600 |}}
-**3.** Following the successful conversion save the generated HTML file by clicking on the "VIEW CONVERSION" with right mouse button.
-{{ :conversion:screen_shot_2015-08-18_at_5.13.49_pm.png?nolink&600 |}}
-===== 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:
-<code html>
-<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3/runtime.js"></script>
-</code>
-:!: **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:
-<code html>
-    <script>
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
-          swiffyobject, {});
-      stage.start();
-    </script>
-</code>
-**3.** Insert the following code line before the snippet above:
-<code html>
-<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-</code>
-After which our code will look something like this:
-<code html>
-    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-    <script>
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
-          swiffyobject, {});
-      stage.start();
-    </script>
-</code>
-**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:
-<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.** 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.
-<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]]
-----