Double Click Studio lets you upload a zip file containing your exported Tumult Hype document and it just works. Double Click for Publishers works a bit differently – it unfortunately does not allow you to upload image assets that your Hype document can load.
The below walkthrough demonstrates how to prep your document for DFP.
Add a clickthrough URL 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.
<script type="text/javascript">
// Escaped click macro: Insert the escaped click macro to track clicks if your code snippet contains special characters
// (e.g. '&', '?', '%') in its clickthrough URL.
var clickTag = "%%CLICK_URL_UNESC%%"; </script>
</script>
Select an item that will be clicked, and add a new Action that runs the following JavaScript function ‘On Mouse Click’
window.open(window.clickTag)
Export your Tumult Hype document to your desktop using the Advanced Export feature. See the image below for recommended settings (sorry, IE!)
Once you export this, you’ll have a index.html file, and a folder containing all your resources. Upload the entire folder to a webhost that supports SSL (and lets you load content with https://example.com links)
You’ll need to modify your index.html file so that the relative reference to your generated JavaScript file:
<div id="default_hype_container" style="margin:auto;position:relative;width:468px;height:60px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="Default.hyperesources/default_hype_generated_script.js123"></script>
</div>
… instead has a direct URL to the URL of the JS file on the web. So, something like:
<div id="default_hype_container" style="margin:auto;position:relative;width:468px;height:60px;overflow:hidden;">
<script type="text/javascript" charset="utf-8" src="https://yourCDN.com/folder/Default.hyperesources/default_hype_generated_script.js123"></script>
</div>
Save the .html file and load it in a browser to test it. Clicking the URL won’t work since you have a Macro in place of the URL. If that works, you now have an HTML snippet you can use with DFP. Select either ‘custom’ or ‘Third Party’ when uploading a creative, and upload this index.html file. (Or just drag the .html file into the New Creative upload area). This index.html file will in turn load the generated JS file, and any assets you have in the same directory.
Here is a sample .html file which loads resources from an S3 URL: index.html.zip (1.3 KB). And here is that document’s Hype document with clicktags all setup: dfp-test.hype.zip (185.6 KB)
Note: In Advanced Export, the option for ‘Use external Runtime URL’ is a bit redundant – you are free to use a separate URL for your HYPE.js runtime files, but there’s also no problem simply unchecking that.