Exit Url On Converted Swf With Swiffy

December 27, 2023 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

<htmllang="en-US"><head><metacharset="UTF-8"><title>[ Creative Name ]</title><metaname="ad.size"content="width=300,height=250"><linktype="text/css"href="styles.css"media="all"><scripttype="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 --><scripttype="text/javascript"src="https://www.gstatic.com/swiffy/v7.3.0/runtime.js"></script><scriptsrc="object.js"></script><scriptsrc="script.js"></script></head><body><divid="swiffycontainer"class="loading"></div><divid="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();
}

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

}

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

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

functionexitHandler(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 School

Exit Url On Converted Swf With Swiffy

Solution 1:

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