AdsNG Developer Wiki

User Tools

Site Tools

You are here: start » conversion-eng
Trace:
conversion-eng:start

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision Both sides next revision
conversion-eng:start [2015/10/02 16:59]
avarga 		conversion-eng:start [2015/10/06 15:16]
avarga
Line 1: Line 1:
 +====== Introduction ======
 +
 :!: **Important!** :!: **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.** **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 ====== ====== Conversion and upload of Flash banners with Swiffy ======
Line 11: Line 17:
 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: 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:
  
-[[https://support.adverticum.net/index.php?/Sales/Knowledgebase/Article/View/433/0/guide-to-creating-banners-for-adverticum-adserver]]+[[http://dev.adverticum.com/creatives:flash-en]]
  
 ===== Conversion steps ===== ===== Conversion steps =====
Line 27: Line 33:
 ===== Modifying the converted file for matching the Adverticum AdServer’s specification ===== ===== Modifying the converted file for matching the Adverticum AdServer’s specification =====
  
-:!: **Attention, if the creative was converted with Swiffy 7.x.x, or greater, there is no need to modification!**+:!: **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: This can be check this at the beginning of the source code by searching for the ''swiffy/**v7.3**'' expression:
Line 37: Line 43:
 </code> </code>
  
-Otherwise 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.+:!: **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++). **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:+ 
 +**2.** Search the following part, near the end of the code:
  
 <code html> <code html>
     <script>     <script>
 +      
       var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),       var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
           swiffyobject, {});           swiffyobject, {});
 +      
       stage.start();       stage.start();
     </script>     </script>
Line 54: Line 62:
  
  
-**3.** Insert the following code line before the ''stage.start();'' object:+**3.** Insert the following code line before the snippet above:
  
 <code html> <code html>
-stage.setFlashVars(location.search.split('?')[1]);+<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
 </code> </code>
  
-After that the code needs to be similar to this one:+After which our code will look something like this:
  
 <code html> <code html>
 +    <script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
     <script>     <script>
  
Line 68: Line 77:
           swiffyobject, {});           swiffyobject, {});
  
-      stage.setFlashVars(location.search.split('?')[1]); 
       stage.start();       stage.start();
     </script>     </script>
Line 74: Line 82:
  
 **4.** Save the file. **4.** Save the file.
 +
  
 ===== Uploading the banner to AdServer ===== ===== 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> 
 +<!--Adobe Edge Runtime--> 
 +</code>
  
-===== Conversion of the banner ===== +**4.** Open the banner’s ''.js'' file in a text/code editor (e.g. Notepad++).
- +
-**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++).+
  
 :!: ** Important!** :!: ** Important!**
   * It is possible that more .js files belong to the banner if it was created with different Edge-versions   * 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''.   * 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/'' ''images/''
Line 136: Line 144:
 </code> </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'' ''window.open''
Line 151: Line 159:
  
 <code javascript> <code javascript>
-decodeURIComponent(location.search.split('?')[1].split('=')[1])+goa.clickTAG
 </code> </code>
  
Line 158: Line 166:
 <code javascript> <code javascript>
 /*...*/ "click",function(sym,e){ /*...*/ "click",function(sym,e){
-    window.open(decodeURIComponent(location.search.split('?')[1].split('=')[1]),"_blank");+    window.open(goa.clickTAG,"_blank");
 }); });
 </code> </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 ===== ===== 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. +
 ---- ----
  
Line 194: Line 187:
 [[https://www.google.com/webdesigner/]] [[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]]
  
 ===== Converting the banner ===== ===== Converting the banner =====
Line 204: Line 197:
 **2.** Open the given ''.html'' file with a text/code editor (e.g. Notepad++). **2.** Open the given ''.html'' file with a text/code editor (e.g. Notepad++).
  
-**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> <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> </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> <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> </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: +**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.
- +
-<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).+
  
 In case of modifying Image banner’s URL eg.: In case of modifying Image banner’s URL eg.:
Line 324: Line 220:
 </code> </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> <code html>
-<img is="gwd-image" source="[file: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> </code>
  
-**6.** For managing clicks there are more solutions. If we use ''<a>'' tag, it should contain ''<href>'' value ''[cthref]''.+**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> <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> </code>
  
-In case of handling click with javascript:+If we would like to use javascript:
  
 <code javascript> <code javascript>
-window.open('[cthref]', '_blank');+window.open(goa.clickTAG, '_blank');
 </code> </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]]
  
 ---- ----
conversion-eng/start.txt · Last modified: 2017/05/03 17:47 by dczipperer

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki