All geek questions in one place

DoubleClick Studio ClickTag After Using Swiffy

I converted the AS2 file to HTML5 using Swiffy. I also use DoubleClick Studio for ads. I was wondering how I get an ad click, so it appears in DoubleClick Studio in the "Events" section, and I can edit the destination URL.

Thanks!

+6
source share
4 answers

The solution is very simple. Take a look at 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; }
+6
source

Unfortunately, the only tools that Google DoubleClick Studio allows for creating HTML5 banner ads are Google Web Designer . See the "Tips for Studios" section of the documentation .

UPDATE : Adobe Ange and manual coding animations are now supported.

UPDATE I tried this and I let me control the output URL from DoubleClick Studio and it tracked the output in the output console.

Open the HTML file that you get when Export as HTML5 (Swiffy) Add Studio Enabler at the beginning of the document

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

Wrap <div id="swiffycontainer"> with <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 output. This should 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 above codes are in the documentation to continue the next steps. There are additional options that you can enable, such as pageLoadHandler, but this will allow you to complete your task of editing the URL from the studio.

Since it was just a copy, this is not so bad for work, and I'm sure you could create a piece of code to speed things up a bit.

+3
source

Try

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

in the <script> section

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

+2
source

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

  • Make the whole Swiffy Object available for use in HTML / JS using JavaScript and call Enabler.exit () when the user clicks on the ad

  • Use ExternalInterface to call JavaScript methods from Flash / Swiffy. Then create a JavaScript method that calls Enabler.exit ().

0
source

Source: https://habr.com/ru/post/983724/

More articles:


All Articles