Howto: Deploying Hype animations to DoubleClick Studio

I’m running into a similar issue – My publishers want me to embed a Click macro (%%CLICK_URL_UNESC%%) – My banner is fairly straight forward and the publisher hasn’t mentioned anything about needing an HTML5 exit. Rather they keep saying they need the macro. Can I just create a rectangle and assign a click event to it and put the macro as the url?

Hi Thomas:

Please add this function to the <head> of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector:

function clickURLTriggered() {
  window.open('%%CLICK_URL_UNESC%%',
  '_blank' // <- This could be _self to open in the same window.
);
} 

This variable would be replaced with the actual URL on document load by the enabler you use and will open the URL in a new window.

In Hype, you can run this function ‘On Click’ for the element you choose:

clickURLTriggered();

How would you append a variable to the end of the URL exit? DC has the Enabler.exitQueryString(id, opt_queryString); call, but I can’t seem to get it to work.

Hi,

As of Oct 2015, your ‘Create an Exit’ solution is no longer recognized in DFP or DCS.

When using the following function, we are able to specify and click-through to the target URL during preview, but Google still doesn’t count it as an exit, thus preventing ad upload:

function bgExitHandler(e) {
  Enabler.exitOverride('Background Exit', 'http://www.permanent-url.com');
}

document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);

Please let me know if I can provide further insight.

After much troubleshooting we did find a solution, we posted that solution here, specifically Jon’s response marked ‘solution.’ Hope that helps!

Also, below is the basic clickTag functionality we mainly use for more simple ads requiring only one tag:

Inside head tag paste the following script and specify target URL:

<head>
<script type="text/javascript"> var clickTag = "http://www.YOUR-URL.com";</script>
</head>

After exporting from Hype, in a code text editor (such as Dreamweaver or Sublime Text), around the main div tag paste the following a href:

<a href="javascript:window.open(window.clickTag)">
MAIN DIV
</a>
5 Likes

Thanks for posting your solution, Alex. I’ve updated the post above with this simplified example and the multiple exit example. Thanks @jonathan.larson!

Hey guys,
I’m a designer (not really familiar with functions) who have been creating Flash banners since forever, trying to take a smooth turn to H5, but I’m having quite a hard time following all this information about exits!

What is the difference between clickTags and exits? If my banners have to be iAB compliant as well as for Double-Click + AdWords, what would be the best practice?

I’m posting here 300x250_test4.zip (161.0 KB) a quite simple ad I did and I was wondering if someone could fix it and resend so I can finally understand where to put what!

And maybe you could add this banner as a template in the “Seeking Ad platform templates” thread? I would be glad to help others!

Thanks for your help!

1 Like

Hi @KargoGrafik

OK. I'll try to make a few things clear.

I'm assuming (because you mentioned that you created Flash banners) that you understand the 'clickTag' reference. Basically, this enables the advertisers to track the click throughs and from where they came. So, you have a banner, you click it, it takes you somewhere but records which site you clicked it on. (Apologies if it sounds like I'm stating the obvious)

Now, an 'exit' is kind of what it implies. Example, you have a banner, it has multiple pages through some kind of animation and you have a way to click on it to go to wherever it needs to go. But, you have many ways to click on it, like on page 1, 4, 6 etc. These are your 'exits' so using the Enabler script you can easily add these 'exits' to your banner.

I'll have a look at this and post back with possible solutions.

Edit Ok, after a quick look I've changed your document.

• In the Head HTML I have included the functions for 2 exits.
• In the document scene I have placed the calls for these exits inside the innerHTML of 2 objects: The 'Click' object which is covering the whole advert and the 'button'.

Here I've placed a call to the respective function on click. They both have ID's "bg-exit-1" and "bg-exit-2" respectively.

300x250_test4vDBear.hype.zip (89.9 KB)

Good idea.

Great! Thank you @DBear for your answer! I was not that far from understanding which is a good thing!

But i still wonder, if I need to track those exits on DFP, I would give them a URL with a tracking code instead of using the clickTag function?

But iAB recommends to use clickTags on Ad servers, so in the html exported file, I would wrap the main div in a anchor tag? and remove the exits?

ex. :

 <script>
    var clickArea = document.getElementById("clickArea");
   clickArea.href = clickTag;
</script>


<a href="http://google.com" id="clickArea" target="_blank">
	<div id="300x250test4vdbear_hype_container"></div>
</a>

And I would have to create a version of the banner for each ad servers or websites, according to their specific needs?

Thanks again!

Hi @KargoGrafik

I must admit I haven’t worked on any banners. I’m just following the logic. Saying that I’ve just read up on DCM’s (Double-click Campaign Manager) “How to prepare HTML5 assets”

Basically in your case it look like you want an “exit” using the button at the end of your animation? *This is an assumption.

In this case you would just add a simple piece of code in the Head HTML:

<script>
var clickTag = "YOUR URL";
</script>

then whichever elements you want to use as an exit click you would just create a “New Function…” and call it whatever you want and then place this code inside:

window.open(window.clickTag);

The Enabler way of doing things is for more than one “Tag” and to be honest I’m not entirely confident as to when and why you would use it. As a person who has never created or used banners I would have to say I’m no expert but the logic seems sound.

Edit Having looked at this a bit more at google support, if you use the Enabler script you don’t need to use a “clickTag” URL. It’s simply another way of creating exits and will be ok for DoubleClick. So if you want to create more “Exits” then use the Enabler way in the example.

In Summary, I would use the steps I’ve just outlined. If it doesn’t work then perhaps as suggested above placing this code around the div that is created after export should be the solution.

<a href="javascript:window.open(window.clickTag)">
<div id="whatever_hype_container" style.....
</a>

I hope this helps.

1 Like

I have a button (image) at the bottom of each slide. I placed the

var clickTag = “YOUR URL”;

in the header and created an onClick function

function clickTagGoogleDCM {
window.open(window.clickTag);
}
I load into the DoubleClick Campaign Manager HTML5 Validator and all is well. No errors and success message for tracking when I click the button. I tested this from hype in the browser and it works with no problems.
My problem is in hype reflect. When I test this on my iphone the button does nothing.
Can anyone shed any light on this.
thanks in advance

I recommend testing your clicks only after posting on a server. My guess is that double click throws an error when loading the files from a local server. Hype reflect loads from the local area network.

Hi there,

My team received assets from a client who used Tumult Hype to create their ads. Each zipped file (for the two sizes sent) contains the following:

  • Main .html file
  • Accompanying folder (…hyperesources) which contains:
    • 16 image files
    • …_hype_generated_script.js
    • HYPE-526.full.min.js
    • HYPE-526.thin.min.js
    • iframe-iri.html & iframe-iri-1.html (both referenced in the xyz_hype_generated_script.js file)
    • PIE.htc
    • AE96C4-restorable.plist

We’ve had no luck using DFP’s HTML5 Creative Upload Tool with this format, but have with others (GWD, Edge etc.) We’ve created .zip files that contain the .html and accompanying folder prior to uploading and are getting the following error: “We encountered an error while processing the creative bundle. Please ensure that the bundle is a zip archive and contains at least one HTML snippet and one asset in the archive.”

We’ve tried adding the hype_generated_script.js inline to the main .html file but no luck.

Wondering if anyone has had any luck using the tool with Hype files that are similar to this format?

Are you able to privately share the ZIP file with me? If so, click ‘private message’ here).

You may want to adjust the path of the export so that there is no hype resources folder – you can move everything to the same folder. You would just need to adjust the reference of the JS file within the main .html file. I haven’t heard of this specific issue but that may be something to try.

The above guide is for Double Click Studio – it will not work (at this time) for Double Click for Publishers. Here’s a guide for Double Click for Publishers.

If you are creating with DCS and you want to share your creative with a DFP account, follow these instructions.

Hi,

I need to deploy in DoubleClick an expand creative.

Where I have to put the Google enabler (expand/collapse) in my Hype document. Maybe someone made it or try something that work. The only reference I got is a Adobe Edge Animate document that work great but doesn’t look like Tumult Hype at all…

Thanks for reply !!! :slight_smile:

Here's an example document:

Thanks a lot Daniel !

Hi there, this is my first go at using Hype for HTML5 display ads and unsurprisingly, I am running into a snag. When I run my .zip files through the DoubleClick Validator and it give an error about not accepting the PIE.htc file. I see that in “advanced export” you can disable the IE 6-9 compatibility, but I don’t have the option in my version. I am guessing it is because I don’t have the pro version of Hype? Is just removing the file from my resources folder good enough to do the trick or is there a better workaround?

Thanks for the help!

Yes -- you can remove blank.gif and PIE.htc. These are used by IE 6-9 to better handle transparent PNGs.