Click Tracking in Flash Creatives Converted to HTML5

Agencies or advertisers may send you a Flash (.swf) creative. These types of creatives don’t run on all browser platforms by default, so you may want to convert the Flash creative into an HTML5 creative.

You can convert the Flash file on your own using the Swiffy tool and upload the HTML5 output to CxenseDisplay. Despite the extra work, that advantage is you’ll have just one hosted creative (HTML5) that is supported more widely on a variety of device types, including mobile.

In this example, we’re converting a Flash creative into HTML5 using Swiffy. We will then add the creative in CxenseDisplay. CxenseDisplay handles this type of HTML5 creatives like any HTML creative. However, when you convert Flash to HTML5, you’ll need to manually insert the click-tracking.

Follow these steps:
  1. Make sure the Flash creative you have been provided supports a clickTag variable.
  2. Go to the Swiffy tool.
  3. Select the Flash (.swf) file to convert to HTML5.
  4. Once the conversion is complete, right-click View conversion to download the new HTML5 transcoded creative. The transcoded file is a “self-contained” HTML file, which contains all the required code and assets needed to playback any animations.
  5. If the conversion fails, or the converted creative doesn’t look right, stop here and alert your agency that the creative cannot be converted to HTML5.
  6. In CxenseDisplay, follow the usual trafficking flow. When adding the creative, select HTML creative as the type. Click “Paste your own HTML” and paste the content of the HTML file in the text box.
  7. To have the creative track clicks and then redirect to the destination URL, you need to modify the Swiffy code by adding an additional line of code - stage.setFlashVars(“clickTAG=EASLink=[destination_url]”); - as below. Make sure you add the add the line exactly before stage.start(), usually found in the very bottom of the creative code. (And replace [destination_url] with the correct landing URL)
  8. Flash variables are case-sensitive. If the Flash creative expects a different clickTAG case format (e.g. clickTag, clicktag, or CLICKTAG), you should change the variable case accordingly. If you don’t define the clickTAG case properly, clicks won’t be tracked correctly, and the creative won’t redirect to the correct destination URL.
  9. Save the creative.
  10. Test the creative in “view creative” to make sure you end up on the correct destination URL.
[...]
  <div id="swiffycontainer" style="width: 160px; height: 600px"></div>
  <script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
        swiffyobject, {});
    stage.setFlashVars("clickTAG=EASLink=[destination_url]");         
    stage.start();
  </script>
</body>
Cxense © 2012 | Support