Differences

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

--- conversion-eng:start [2015/09/04 11:23] – created avarga
+++ conversion-eng:start [2017/05/03 17:47] (current) – dczipperer
@@ Line 1: / Line 1: @@
+====== Introduction ======
 :!: **Important!**
-**These guides are adequate only for the actual programversions 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.**
+**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.**
-====== Conversion and upload of Flash banners with Swiffy ======
+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.
-Swiffy is a free Google product which is able to convert most Flash creatives to HTML. This service is available here:
+===== Uploading and modifying banners created with Adobe Anime CC =====
-[[https://developers.google.com/swiffy/convert/upload]]
+=== 1.) Open the .html file in a text editor (e.g. Notepad++) ===
-The following documentation means a great help for managing the conversion of embedded Flash-based banners. For a perfect implementation those creatives are needed which agreed the suggestions in the Banner Creation Guide:
+=== 2.) Adding the goa-helper.js ===
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/433/0/guide-to-creating-banners-for-adverticum-adserver]]
+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.
-===== 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 =====
-The saved HTML file is not ready to the adserving yet so some modifications are necessary in the code. The changes will make it possible to give the clickTAG and clickTARGET variables to the banner. It does not matter, if the creative does not use the last mentioned variable.
-**1.** Open the saved file in a text/code editor (e.g. Notepad++).
-**2.** Search the following part in the last section of the code:
 <code html>
-    <script>
+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
-          swiffyobject, {});
-      stage.start();
-    </script>
 </code>
+=== 3.) Creating the click handling ===
-**3.** Insert the following code line before the ''stage.start();'' object:
+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>
-stage.setFlashVars(location.search.split('?')[1]);
+<a id="clickTAG" href="" target="">
-</code>
+	<div id="animation_container" ... >
+		<!-- The HTML code of the banner -->
+	</div>
+</a>
-After that the code needs to be similar to this one:
+<!--The click handling script -->
-<code html>
+<script>
-    <script>
+    (function(){
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
+        var cT = document.getElementById('clickTAG');
-          swiffyobject, {});
+        cT.href = goa.clickTAG;
+        cT.target = goa.clickTARGET;
-      stage.setFlashVars(location.search.split('?')[1]);
+    })();
-      stage.start();
+</script>
-    </script>
 </code>
-**4.** Save the file.
 ===== Uploading the banner to AdServer =====
-To run the converted banners we need to use HTML banner. Regarding the uploading process of HTML banners there is a guide in our Knowledgebase:
+Banners modified this way can be uploaded with the uploading steps for easyHTML:
+ [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]
+----
-https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/127/2/html-banner-ltrehozsa
+====== Conversion and upload Adobe Edge codes ======
-The main difference between the common banner and the HTML banner is that here we do not use the content of the HTML banner as a source – instead of that the following code line should be inserted. In our example the filename is ''embedded_250x250_03.html'' and its size is ''250px'' x ''250px''.
+The Adobe Edge is an image editor software which can be used to HTML5 banners. More information is available here:
-<code html>
+[[https://creative.adobe.com/products/animate]]
-<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 250px; height: 250px; border: none;"></iframe>
-</code>
-**1.** All banners’ file name and the size should be modified in the code. If our banner’s name is ''example-banner.html'' and its size is ''728px'' x ''90px'', the above detailed code line should be modified as you can see in the following example:
+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:
-<code html>
+[[http://dev.adverticum.com/creatives:ehtml-en]]
-<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]&clickTARGET=[target]" style="width: 728px; height: 90px; border: none;"></iframe>
-</code>
-**2.** As a next step, the modified HTML file should be uploaded in the banner’s file list by clicking on the "Add File” button.
+===== Conversion of the banner =====
-**3.** After that click on the "Save” button.
+**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++).
-====== Conversion and upload Adobe Edge codes ======
+**3.** Search the following expression ''<!--Adobe Edge Runtime-->'' in the banners ''<head>'' tag and insert the following line before it:
-The Adobe Edge is an image editor software which can be used to HTML5 banners. More information is available here:
+<code html>
+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
+</code>
-[[https://creative.adobe.com/products/animate]]
+After insertion the code should look similar to the example below:
-To be able to run the banner as a HTML banner with the right references and clicks there are some modifications needed in the code. The conversion steps and the uploading method will be detailed hereinafter. About the requirements of the HTML5 banners (Markup banner’s requirements are irrelevant here) more information are available in our Knowledgebase:
+<code html>
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/404/0/html5-banner-creation-guide]]
+    <title>Untitled</title>
+    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-===== Conversion of the banner =====
+<!--Adobe Edge Runtime-->
+</code>
-**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 ''.js'' file in a text/code editor (e.g. Notepad++).
+**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 **3rd** step should be done in the bannerName_edge.js, while the **4th** step should be done in ''the bannerName_edgeActions.js''.
+  * 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''.
-**3.** Search the following expression:
+**5.** Search the following expression:
 ''images/''
@@ Line 127: / Line 106: @@
 </code>
-**4.** To manage the clicks the following expression should be found:
+**6.** To manage the clicks the following expression should be found:
 ''window.open''
@@ Line 142: / Line 121: @@
 <code javascript>
-decodeURIComponent(location.search.split('?')[1].split('=')[1])
+goa.clickTAG
 </code>
@@ Line 149: / Line 128: @@
 <code javascript>
 /*...*/ "click",function(sym,e){
-    window.open(decodeURIComponent(location.search.split('?')[1].split('=')[1]),"_blank");
+    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.
+:!: 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 =====
-To run the converted banners we need to use HTML banner. Regarding the uploading process of HTML banners there is a guide in our Knowledgebase:
+Banners modified this way can be uploaded with the uploading steps for easyHTML:
+ [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/404/0/html5-banner-creation-guide]]
-The main difference between the common banner and the HTML banner is that here we do not use the content of the HTML banner as a source – instead of that the following code line should be inserted. In our example the filename is ''embedded_250x250_03.html'' and its size is ''250px'' x ''250px''.
-<code html>
-<iframe src="[file:embedded_250x250_03.html]?clickTAG=[cthref.e]" style="width: 250px; height: 250px; border: none;"></iframe>
-</code>
-**1.** All banners’ file name and size should be modified in the code. If our banner’s name is ''example-banner.html'' and its size is ''728px'' x ''90px'', the above detailed code line should be modified as you can see in the following example:
-<code html>
-<iframe src="[file:example-banner.html]?clickTAG=[cthref.e]" style="width: 728px; height: 90px; border: none;"></iframe>
-</code>
-**2.** As a next step, all files should be uploaded in the banner’s file list by clicking on the „Add file” button.
-**3.** After that click on the „Save” button.
 ----
-====== Google Web Designerrel készült bannerek átalakítása és felvétele ======
+====== 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:
@@ Line 185: / Line 149: @@
 [[https://www.google.com/webdesigner/]]
-It is easy to convert banners with GWD to Adverticum-compatible HTML banners.  The conversion steps and the uploading method will be detailed hereinafter. About the requirements of the HTML5 banners (Markup banner’s requirements are irrelevant here) more information are available in our Knowledgebas:
+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:
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/395/0/html5-banner-keszitesi-utmutato]]
+[[http://dev.adverticum.com/creatives:ehtml-en]]
-===== A banner átalakítása =====
+===== Converting the banner =====
 **1.** Open the folder of the published banner.
@@ Line 195: / Line 159: @@
 **2.** Open the given ''.html'' file with a text/code editor (e.g. Notepad++).
-**3.** 3.	The source code of HTML banner will be inserted into the ''<body>'' tag so the banner’s code should contain only the most important valid (which are also in the <body> tag valid) elements. The unnecessary elements are usually the ''<!DOCTYPE>'', ''<html>'', ''<head>'', ''<body>'' and ''<meta>'' tags. The last element should not be deleted compulsorily but the browser will leave it out of consideration because they are only relevant in the ''<head>'' tag according to the standard. If ''<meta>'' tags are needed, they can remain in the code.
+**3.** Search for the ''<head/>'' closing tag, and insert the following line before it:
-Our code will be the following at the start period:
 <code html>
-<!DOCTYPE html>
+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-<html>
-<head data-gwd-animation-mode="quickMode">
-  <link href="gwdimage_style.css" data-version="1.4" data-exports-type="gwd-image" rel="stylesheet">
-  <link href="gwddoubleclick_style.css" data-version="1.9" data-exports-type="gwd-doubleclick" rel="stylesheet">
-  <link href="gwdpagedeck_style.css" data-version="1.5" data-exports-type="gwd-pagedeck" rel="stylesheet">
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
-  <meta name="generator" content="Google Web Designer 1.3.2.0521">
-  <meta name="template" content="Banner 2.2.0">
-  <meta name="environment" content="gwd-doubleclick">
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style type="text/css" id="gwd-lightbox-style">
-    !The stylesheet...
-  </style>
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
-  <script data-source="gwdpagedeck_min.js" data-version="1.5" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
-  <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
-  <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>
-</head>
-<body>
-  <gwd-doubleclick id="gwd-ad" polite-load="">
-    <gwd-metric-configuration></gwd-metric-configuration>
-    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
-      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px">
-        <div class="gwd-page-content gwd-page-size">
-          <img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
-        </div>
-      </div>
-    </div>
-  </gwd-doubleclick>
-  <script type="text/javascript" id="gwd-init-code">
-    // The script...
-  </script>
-</body>
-</html>
 </code>
-After deleting the unnecessary elements the code will be modified as in the following example:
+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>
-  <link href="gwdimage_style.css" data-version="1.4" data-exports-type="gwd-image" rel="stylesheet">
+    <script data-source="gwdimage_min.js" data-version="1.4" data-exports-type="gwd-image" type="text/javascript" src="gwdimage_min.js"></script>
-  <link href="gwddoubleclick_style.css" data-version="1.9" data-exports-type="gwd-doubleclick" rel="stylesheet">
+    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-  <link href="gwdpagedeck_style.css" data-version="1.5" data-exports-type="gwd-pagedeck" rel="stylesheet">
+</head>
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
-  <style type="text/css" id="gwd-lightbox-style">
-    !The stylesheet...
-  </style>
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
-  <script data-source="gwdpagedeck_min.js" data-version="1.5" data-exports-type="gwd-pagedeck" type="text/javascript" src="gwdpagedeck_min.js"></script>
-  <script data-source="https://s0.2mdn.net/ads/studio/Enabler.js" data-exports-type="gwd-doubleclick" type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
-  <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>
-  <gwd-doubleclick id="gwd-ad" polite-load="">
-    <gwd-metric-configuration></gwd-metric-configuration>
-    <div is="gwd-pagedeck" class="gwd-page-container" id="pagedeck">
-      <div is="gwd-page" id="page1" class="gwd-page-wrapper gwd-page-size gwd-lightbox" data-gwd-width="300px" data-gwd-height="250px">
-        <div class="gwd-page-content gwd-page-size">
-          <img is="gwd-image" source="assets/pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
-        </div>
-      </div>
-    </div>
-  </gwd-doubleclick>
-  <script type="text/javascript" id="gwd-init-code">
-    // The script...
-  </script>
-</code>
-**4.** If the banner’s code is bigger than 63KB after these changes, it is useful to write the code’s ''<style>'' tag content into an other CSS file. Our code’s this part is the following in normal case:
-<code html>
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
-  <style type="text/css" id="gwd-lightbox-style">
-    html, body {
-      width: 100%;
-      height: 100%;
-      margin: 0px;
-    }
-    !The rest of the stylesheet...
-  </style>
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
-</code>
-For this operation create a file (e.g. ''example-style.css''). According the above mentioned sample-code the new file contains the total ''<style>'' tag content:
-<code css>
-    html, body {
-      width: 100%;
-      height: 100%;
-      margin: 0px;
-    }
-    !The rest of the style sheet...
-</code>
-In our original HTML file the ''<style>'' tag should be replaced to ''<link>'' tag which will change the code according to the followings:
-<code html>
-  <script data-source="custom.elements.min.js" type="text/javascript" src="custom.elements.min.js"></script>
-  <link href="example-style.css" rel="stylesheet">
-  <script data-source="gwdpage_min.js" data-version="1.2" data-exports-type="gwd-page" type="text/javascript" src="gwdpage_min.js"></script>
 </code>
-**5.** Modify the files’ pathname where it is necessary because the banner uses relative URL in the code (e.g. image, CSS and external js references).
+**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.:
@@ Line 315: / Line 182: @@
 </code>
-This should be replaced to AdServer variables:
+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">
+<img is="gwd-image" source="pingvin.png" id="gwd-image_1" class="gwd-img-zjez gwd-gen-l5pfgwdanimation">
 </code>
-**6.** For managing clicks there are more solutions. If we use ''<a>'' tag, it should contain ''<href>'' value ''[cthref]''.
+**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 href="[cthref]">Click...</a>
+<a id="clickTAG" href="" target="">Click...</a>
+<script>
+    (function(){
+        var cT = document.getElementById('clickTAG');
+        cT.href = goa.clickTAG;
+        cT.target = goa.clickTARGET;
+    })();
+</script>
 </code>
-In case of handling click with javascript:
+If we would like to use javascript:
 <code javascript>
-window.open('[cthref]', '_blank');
+window.open(goa.clickTAG, '_blank');
 </code>
-===== A banner felvétele az AdServerbe =====
+**5.** If the banner is needed to handle displays, for the opening and closing functions should be applied per the specification below:
-Banner could be uploaded as usual. We need a HTML banner. As its source code we should use the HTML source code which was created with GWD and converted according to the above mentioned modifications. After that the necessary JS, CSS and image files should be uploaded. More information about the HTML banners in general are available in the following link:
+[[http://dev.adverticum.com/creatives:ehtml-en#handling_the_functions]]
+===== Uploading the banner to AdServer =====
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/404/0/html5-banner-creation-guide]]
+Banners modified this way can be uploaded with the uploading steps for easyHTML:
+ [[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]
 ----