Exit URL on converted swf with swiffy

I tried to add an exit URL and metrics from doubleclick studio from a converted swf with swiffy to the HTML5 file. Could anyone tell me what the most efficient way is to do this? What would the code look like in the HTML5 creative? Where in the code to add best? What tags to use? The code swiffy generates looks like a mess to me.

<!doctype html>
<html>
  <head>

   <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script>
   <link rel="stylesheet" type="text/css" href="exit.css">
   <script src="exit.js"></script>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Swiffy Output</title>
    <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>

    <script>
      swiffyobject = {"as3":true,"frameRate":25,"frameCount":342,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":1800,"xmax":19400},"fileSize":52767,"v":"7.3.0","internedStrings":["::::::6Y:","::::: <<shortend from here>>

  </script>
    <style>html, body {width: 100%; height: 100%}</style>
  </head>
  <body style="margin: 0; overflow: hidden">

    <div id="swiffycontainer" style="width: 970px; height: 90px">
    </div>

    <script>

      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});

      stage.start();
    </script>
  </body>
</html>

This is an add-on / improvement to this answer.

So you will have a few files in your HTML5 folder ( that you'll package into a zip to upload to Doubleclick Studio at the end of the build process )

index.html
styles.css
backupimage ( *.gif / *.jpg )
ajax-loader.gif ( I use this as a placeholder when elements are still loading )
object.js ( where the converted Swiffy code will be )
script.js ( where the magic happens )

The backupimage is the image you should show just in case the Creative doesn't load, and the ajax-loader.gif is available widely online. So we'll focus on the other 4 files.

index.html

<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>[ Creative Name ]</title>
        <meta name="ad.size" content="width=300,height=250">

        <link rel="stylesheet" type="text/css" href="styles.css" media="all">

        <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

        <!-- Make sure that this is the most recent runtime.js from the Swiffy Conversion file -->
        <script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script>
        <script src="object.js"></script>
        <script src="script.js"></script>
    </head>

    <body>
        <div id="swiffycontainer" class="loading"></div>
        <div id="bg-exit"></div>
    </body>
</html>

styles.css

* {
    border:0;
    padding:0;
    margin:0;
}

body, html {
    width:100%;
    height:100%;
    overflow:hidden;
    background:#fff;

    width:100%;
    height:100%;

    position:relative;
}

#bg-exit {
    position:absolute;
    z-index:999999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    cursor: pointer;
}

#swiffycontainer {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
    overflow:hidden;
}

#swiffycontainer.loading {
    background: url("ajax-loader.gif") center center no-repeat;
}

objects.js

Copy whatever the output from the swiffy conversion and paste into the {} as shown below

var swiffyobject = {
"as3":false,"frameRate":24,"frameCount":114,"backgroundColor":-1,"frameSize":{" .... blah blah blah blah }]
};

scripts.js

var stage;
var clickTag;

if (!Enabler.isInitialized()) {
    Enabler.addEventListener(
        studio.events.StudioEvent.INIT,
        enablerInitialized
    );
} else {
    enablerInitialized();
}

function enablerInitialized() {
    if (!Enabler.isVisible()) {
        Enabler.addEventListener(
            studio.events.StudioEvent.VISIBLE,
            adVisible
        );
    } else {
        adVisible();
    }

}

function adVisible() {
    document.getElementById('swiffycontainer').className = "";
    document.getElementById('bg-exit').addEventListener('click', exitHandler, false);

    stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
    stage.start();
}

function exitHandler(e) {
    Enabler.exit('Exit');
}

Doing the above works for me and all of my creatives using the above code have been approved by Google's QA and are now being trafficked - so I'm pretty confident with my answer - although again, this is just an improvement from this answer.

Recommended topics

Hot tags