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!
DoubleClick Studio ClickTag after using Swiffy
Asked Answered
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;
}
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 ) –
Johns @Johns ^ 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. –
Indecisive
@Indecisive 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 that has been tested and is working fine with DCS / DFP –
Johns
keep in mind that QA team will be rejected that if you use window.open for rich media creatives. –
Retrench
@LucasMatos Thank you for this tip! Any suggestions to update the post? –
Runt
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. –
Retrench
Add an exit using Google Web Designer support.google.com/richmedia/answer/6073073?hl=en –
Retrench
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); –
Retrench @LucasMatos here is the documentation for HTML5 Exit — support.google.com/richmedia/answer/2672517 –
Runt
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.
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. The rest above is correct I believe. –
Indecisive Thanks. You are correct, handwritten code and Edge Animate are supported. –
Navigator
Hi @Navigator 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? –
Aquinas 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. –
Navigator 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().
© 2022 - 2024 — McMap. All rights reserved.