DoubleClick Studio ClickTag after using Swiffy

I've converted a AS2 flash file into HTML5 using Swiffy. I'm also using DoubleClick Studio for the Ad. I was wondering how i get a clicktag on the ad so it shows up in DoubleClick Studio under Events, and i can edit the Destination URL.

Thanks!

The solution is very simple. Take a look on my example. Destination url can be updated in DB Studio.

HTML:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Banner</title>
    <meta name="ad.size" content="width=300,height=250">
    <link rel="stylesheet" type="text/css" href="styles.css" media="all">
    <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
    <script src="https://www.gstatic.com/swiffy/v7.2.0/runtime.js"></script>
    <script src="object.js"></script>
    <script src="script.js"></script>
    <script type="text/javascript">
        var clickTag = "http://www.example.com";
    </script>
</head>
<body>
    <div id="swiffycontainer"></div>
    <div id="bg-exit"></div>
</body>
</html>

script.js:

var stage;
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('bg-exit').addEventListener('click', exitHandler, false);
    stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject, {});
    stage.start();
}
function exitHandler(e) {
    Enabler.exit('Exit');
    window.open(window.clickTag);
}

object.js:

var swiffyobject = {YOUR_SWIFFTY_OBJECT_HERE};

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;
}

Unfortunately the only tools Google's DoubleClick Studio allows for HTML5 banner ad authoring is Google Web Designer. See the "Studio Tips" section of the documentation.

UPDATE: Adobe Edge Animate and hand coded ads are now supported.

UPDATE: I have tried this and it DID allow me to control the exit url from within DoubleClick Studio and it did track the exit in the output console.

Open the HTML file you get when you Export as HTML5 (Swiffy) Add the Studio Enabler to the head of the document

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

Wrap your <div id="swiffycontainer"> with a <div id="bg-exit"> EX:

<div id="bg-exit">
<div id="swiffycontainer"></div>
<div>

Add the following CSS styles to make the required transparent button

#bg-exit {
  background-color: rgba(255,255,255,0);
  cursor: pointer;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}

Then add the following script to add the required Exit. This needs to be at the bottom of the document.

<script>
function bgExitHandler(e) {
  Enabler.exit('Background Exit');
}

document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>

All of the code above is found in the documentation just continue to follow the next steps. There are additional options you can include like pageLoadHandler however this will allow you to accomplish your goal of being able to edit the URL from within studio.

Since it was just copy paste this isn't too bad of a work around and I'm sure you could create a code snippet to speed things up a bit.

Try

...
stage.setFlashVars("clickTAG=%%CLICK_URL_ESC%%%%DEST_URL%%");
stage.start();
...

within <script> section

See https://support.google.com/dfp_premium/answer/6263155?hl=en

The only way around this (at least from what I have found) is to first load the DoubleClick HTML API (https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html), then either ....

Make the whole Swiffy Object clickable from within HTML/JS using JavaScript, and calling Enabler.exit() when the user clicks the ad
Use ExternalInterface to call JavaScript methods from within Flash/Swiffy. Then create a JavaScript method that in-turns calls Enabler.exit().

来源：https://stackoverflow.com/questions/29022085/doubleclick-studio-clicktag-after-using-swiffy

标签

flash

google-swiffy