HTML5 Ad Banners for AdRoll

#HTML5 Ads for AdRoll.com
I am creating HTML5 web banner ads for use with an ad service called AdRoll.com. They have a set of ‘HTML5 Creative Guidelines’. I am unclear how to satisfy one of the main requirements using Hype 3.5.2 on Mac OSX 10.10.5.
##ClickTag Variable
From the Guidelines…


Declare the clickTag variable
Example…
<script type='text/javascript'>var clickTag ='http://www.adroll.com';</script>


This clickTag variable must be passed as a parameter to any window.open event inside the ad, usually assigned to the JavaScript onclick event of a div element…
<div id="clickArea" style="width: 300px; height: 250px" onclick="window.open(clickTag ,'_blank');">

##How in Hype?
I exported my Hype document. I opened the exported HTML file and added the ‘clickTag’ variable script into the ‘head’ section. But when I went to add the ID to the Div of my button, I found that there was no reference to that in the HTML file? As I’m sure everyone here knows, the exported HTML file is very light. It only references a Javascript file in the exported ‘HypeResources’ folder.

So how do I add the Div ID and parameters?

Seems like you’re almost there.

First, you’ll add that script you included in the <head> area of your document:

Next, assign a JavaScript function to your element which will be clicked. Use the ‘Mouse Click’ action:

You would then insert this within the new function:

There’s no need to set a ID on an element, but if Adroll requires it, you could select your clickable element, switch to the Identity Inspector, and set the Unique Element ID for the element.

1 Like

Thanks a bunch Daniel! I had found your other post (Creating an HTML5 Advertisement in Tumult Hype) about HTML5 Ads and had followed the instructions in that one, but it appears that AdRoll wants it differently.

##Previous Post
In your other post the the variable AND clickURL function were both added to the ‘head’ section. Then the button element had a new, single line Javascript that called that clickURL function.

##This Post Reply
In the answer to my post here, you still state that the variable should go in the head, but this time the clickURL function should NOT be added to the ‘head’ section. INSTEAD a ‘New Javascript function’ (windowOpen) should be added to the button element.

This makes more sense to me and is closer to what the AdRoll guideline seemed to suggest. Thanks for that clarification!

I don’t know if the element ID is required, it’s in the guidelines, so I will presume that it is. Thanks for showing me that too!

##Hype Pro
Kind of unrelated to this post, but I am wondering if doing these ad banners is something that the Pro version would help. I have about 20 ad banners to process. I’m currently using Hype 3.5.2. It looks like Hype Pro allows me to do something I’ve wanted to do with Hype for awhile - choose which scenes to export. The ads fall into three basic content groups of 7 sizes each. I would like to create just three Hype documents and export 7 ‘individual’ scenes with their own individual HTML and HypeResources folders, specific to each scene export. In other words, Hype1/Scene1 export would have a HypeResources folder that ONLY contains the resources for that scene.

Is that something that Hype Pro supports, or am I understanding that wrong?

Thanks again for your help!

Yup -- Advanced Export allows you to export scenes separately. This writes out separate HTML files which all pull from the contents of your Head for each export.

1 Like

I just submitted our first HTML5 ads to AdRoll. Everything was fine with the code (thanks for the help with that!) but the file size is too large. The requirement is 150k or less for the entire HTML + Resources zipped file! The JS file alone is 95k and a file called ‘PIE.htc’ (?) is 41k. That leaves 14k for actual ad content?!?

What can I do to shrink the entire Hype package? I have reduced the images in the ad as much as I can. The ad is 160x600.

The existing HTML5 ads were created by our ad agency and they met the requirement. I just don’t know what tools they use or how they did it.

Any help/advice would be appreciated!

Apologies for the delay in getting back to you -- there some bandwidth-saving recommendations here: