Exit URL On Converted Swf With Swiffy

July 29, 2022 Post a Comment

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?

Solution 1:

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  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.

Html5 Lite

Exit URL On Converted Swf With Swiffy

Solution 1:

Post a Comment for "Exit URL On Converted Swf With Swiffy"