Differences

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

--- conversion-eng:start [2016/04/13 13:53]
akokas [Converting the banner]
+++ conversion-eng:start [2017/05/03 17:47]
dczipperer
@@ Line 9: / Line 9: @@
 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 ======
+===== Uploading and modifying banners created with Adobe Anime CC =====
-Swiffy is a free Google product which is able to convert most Flash creatives to HTML. This service is available here:
+=== 1.) Open the .html file in a text editor (e.g. Notepad++) ===
-[[https://developers.google.com/swiffy/convert/upload]]
+=== 2.) Adding the goa-helper.js ===
-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:
+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.
-[[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.
-{{ :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 src="//ad.adverticum.net/scripts/goa-helper.js"></script>
-<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:
+=== 3.) Creating the click handling ===
-[[http://dev.adverticum.com/creatives:ehtml-en#uplodaing_the_banner]]**
-**1.** Open the saved file in a text/code editor (e.g. Notepad++).
+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.
-**2.** Search the following part, near the end of the code:
+For example:
 <code html>
-    <script>
+<a id="clickTAG" href="" target="">
+	<div id="animation_container" ... >
-      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
+		<!-- The HTML code of the banner -->
-          swiffyobject, {});
+	</div>
+</a>
-      stage.start();
-    </script>
-</code>
+<!--The click handling script -->
-**3.** Insert the following code line before the snippet above:
+<script>
+    (function(){
-<code html>
-<script src="//ad.adverticum.net/scripts/goa-helper.js"></script>
+        var cT = document.getElementById('clickTAG');
+        cT.href = goa.clickTAG;
+        cT.target = goa.clickTARGET;
+    })();
+</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 =====

AdsNG Developer Wiki

User Tools

Site Tools

Differences

Page Tools