Creating an HTML5 Advertisement in Tumult Hype


#1

Just starting out with ad banner production? Read this first.

The file used in the document above can be downloaded here: Master File.zip (1.3 MB)

Ad Network-specific Scripts

Place enabling scripts supplied by your advertising network in 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. These will load first.

Defining an Exit, or Click Tag

This variable allows you to use a variable (also known as a Macro or Click Tag) supplied by your ad network in your Hype document. This could look like %%CLICK_URL_UNESC%% if you’re using DFP, but it varies. To define a click tag, add the following (after replacing your variable) into the head of the document:

<script type="text/javascript">
function clickURL() {
  window.open('%%CLICK_URL_UNESC%%',
  '_blank' // <- Use _self here to open in the same window. 
  );
}
</script>

That code assumes your click tag, or macro, is %%CLICK_URL_UNESC%%. You can then run this in response to a ‘click’ action anywhere in your document. To link it to a button, select the button, and have it trigger a New JavaScript. In the Javascript, add the following line:

 clickURL();

You can use multiple clickURL functions by incrementing their name with a number.

Time (and bandwidth saving) tips

In Tumult Hype Professional, these settings are recommended when exporting an advertisement using Advanced Export:

  • If you uncheck ‘Support Internet Explorer 6-9’, the PIE.htc and Blank.gif files will not be exported, saving you precious bytes.
  • The ‘Inline data file+loader’ option will inline the animation functions, but the HYPE-###.thin.min.js and any resources will still be output in the resources folder.
  • A zip file containing a minimal document exported with these settings will be 28KB, and even smaller when accessed via a server that supports gzip.
  • The settings above produce the following: (Exported HTML + File/Folder Structure) for a blank document.

More resources:


Advertising Banner Production: Start here
{clickurl} macro for tracking Hype banner clicks in ReviveAdserver
HTML5 Ad Banners for AdRoll
HTML5 Ad Banners for AdRoll
Transitioning to Hype, some questions!
Howto: Deploying Hype animations to DoubleClick Studio
#2

(christopher) #3

Have you tried uploading this banner to doubleclick studio?
I tried it and the first error is images can’t have @ in the name.
I had no luck getting it to work.


#4

This is likely a new restriction. Thanks for the report! In my test there were no issues uploading this to the studio. The @2x images are generated as a part of image optimization, so unchecking ‘Automatically optimize when exporting’ when you have an image selected in the library will resolve this issue. Make sure your images are the correct resolution of course.


#5

@sirhclluk Thanks for reporting this – I can confirm that the @ symbol is now not supported. (Updating our documentation on Double Click to work around this) We may adjust Hype’s export process to insulate against this error.