DoubleClick Studio ClickTag after using Swiffy

Question

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!

Yo, have u ever figure it out? – Keo Strife Mar 17 '15 at 21:13 — Keo Strife, Mar 17 '15 at 21:13

350D · Answer 1 · 2015-07-01T22:14:10.277

6

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

edited Jul 01 '15 at 22:14

answered Jul 01 '15 at 22:02

350D

11,135
5
36
49

1

Not sure if this worked alright with the old enabler code, but with the current version of enabler ( in time of writing ), the `Enabler.exit('Exit');` and `window.open(window.clickTag);` inside your `exitHandler` function clashes and resulted in opening 2 new tabs. Getting rid of `window.open(window.clickTag);` and just using `Enabler.exit('Exit');` seem to solve the problem ( this is tested in Doubleclick Studio with the clickTag defined by Studio. not inside the script ) – kevinMario Sep 08 '15 at 17:51
1

@kevinMario ^ I believe this is correct, as far as I know the Enabler.exit should take care of the previously needed clickTag stuff, so those are redundant. In my digging for info on this, I cannot find any current documentation for the window.clickTag stuff at all in ANY of Google's docs, but am seeing the Enabler.js instructions following the Enabler.exit('exit name') structure for sure. – fastasleep Sep 12 '15 at 01:15
@fastasleep yup, I also forgot to mention that because the ad opened 2 new tabs at the same time ( one is empty and one is the specified clickTag url ) , the creative ended up getting blocked by some adblocker / popupblocker - so this is very detrimental to your campaign's progress. I've answered [another thread with an updated version of this code](http://stackoverflow.com/questions/32363888/exit-url-on-converted-swf-with-swiffy/) that has been tested and is working fine with DCS / DFP – kevinMario Sep 16 '15 at 08:15
keep in mind that QA team will be rejected that if you use window.open for rich media creatives. – Lucas Matos Feb 16 '16 at 20:07
@LucasMatos Thank you for this tip! Any suggestions to update the post? – 350D Feb 16 '16 at 21:05
Yes, there is 2 types of Ads rich media and Standard Ads, for rich media it is required to use the Enabler, for Standard Ads it is required to use the clicktag (window.open), you cannot use both. if you want to integrate both types in the same Ad it is required to use GWD (Google Web Designer ) instead. – Lucas Matos Feb 18 '16 at 03:56
Add an exit using Google Web Designer https://support.google.com/richmedia/answer/6073073?hl=en – Lucas Matos Feb 18 '16 at 04:14
in GWD (Google Web designer) the code generated is different, is like this: `gwd.actions.gwdDoubleclick.exit('gwd-ad', 'myExit', 'http://www.google.com', true, true); ` – Lucas Matos Feb 18 '16 at 21:37
@LucasMatos here is the documentation for HTML5 Exit — https://support.google.com/richmedia/answer/2672517 – 350D Feb 19 '16 at 14:59

MagRat · Answer 2 · 2015-09-22T18:40:05.760

3

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.

edited Sep 22 '15 at 18:40

answered Apr 21 '15 at 19:46

MagRat

308
7
23

2

`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.` That's not the case now — you can write your own code with a text editor, or use Adobe Edge Animate — [see here](https://support.google.com/richmedia/answer/2672542?vid=1-635776123601081518-1301142788). The rest above is correct I believe. – fastasleep Sep 12 '15 at 00:43
Thanks. You are correct, handwritten code and Edge Animate are supported. – MagRat Sep 13 '15 at 04:52
Hi @MagRat and @fastasleep, do you know if the element ID absolutely MUST be named `bg-exit` (in the DIV and where it's called via `getElementById(...)`) or does that not matter as long they match? Also, does the `Enabler.exit(...)` string parameter matter how it's called? I've mostly seen "Background Exit" like MagRat used here, but some other answers on here simply use "Exit". Do you know anything about this? – chamberlainpi Sep 29 '15 at 12:23
HI @bigp, it is my understanding that as long as they match you can call the **bg-exit** what ever you like. `getElementByID(...)` is simply referencing the ID of the element so as long as they match your fine. Regarding the `Enabler.exit(...)` I use **Background Exit** but you should be able to use whatever you like here as well, and it should show up in the reporting that way too. So where you have multiple exits you will name each of them uniquely **background exit**, **call to action**, **video-exit** are some of the names I use for reporting. – MagRat Sep 29 '15 at 19:21

score 2 · Answer 3 · answered Sep 01 '15 at 12:24

2

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

answered Sep 01 '15 at 12:24

Anton Roslov

798
4
15

score 0 · Answer 4 · answered Apr 05 '15 at 18:29

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

DoubleClick Studio ClickTag after using Swiffy

4 Answers4

Linked