Howto: Deploying Hype animations to DoubleClick Studio

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.

Hello,
I’ve been trying to figure this out over over the past week for Google DFP.
It’s too difficult for code newbies.

I’m willing to pay for someone to help walk me through successfully adding my ad to DFP.

Please let me know if you’re interested.

around the main div tag paste the following a href:

Please specify what you mean by around the main div tag? Does that mean within it, above it or below it?
Thanks

Hi,

By “around the main div tag,” I mean the first div under <body>. You should place the <a href> directly above the first <div> and the </a> directly below the </div>. Minimal example below:

 <body>
      <a href="javascript:window.open(window.clickTag)">
           <div>
           </div>
      </a>
 </body>
</html>

Does that help clarify?

1 Like

Hi guys. I’ve deployed a few ads to DC with no trouble, and using minimal code. I’ve just run into an ad that I need to do a polite load on.

I’ve tried using the code above, but Im not sure Im doing it right. Do I need to paste bits of that in different parts of my document? Im after the simplest solution : )

My hype files is here:

Ta

I just want to add clicktag

Missing click tag check
expand_more
No click tag was detected within this file. You must include at least one click tag in your HTML file in order to set a click-through URL for your creative. Reach out to the creative developer to resolve this issue by adding a click tag to the creative.

Visit the Help Center for more information about click tag implementation.

More details:

What shall I do? I am complete n00b and cant even understand code.

Much appreciete for all the help

1 Like

There's a new system in Hype called Export Scripts that might help - I go into a bit more detail in this post:

Thank you I didnt know about that. I managed to make clicktag as javascript file when clicking on rectangle that covers the whole banner

The javascript contains this code:

	javascript:window.open(window.clickTag);

Then HeadHTML:

<script type="text/javascript">
var clickTag = "http://myadressthatIcantshowhere.com"; </script>

Now they want Doubleclick banners so I used the script. Then validated everything looked fin except

Crawlability check failure
We were unable to crawl this url. Visit the help center for more information about crawl errors.
More details:
Source: Invalid URL ()

No url! Where can I edit my URL when exporting to doubleclick?

I got my URL in clicktag on my invisible rectangle that covers the whole banner, that is not enough apprently

EDIT I had a deadline and recently learned the program so I couldnt read your description properly. SOLVED IT and read your answer properly document - clicktag ID and put the adress there now the validation worked. Fingers crossed that it works when they upload it.

Glad you got it working. Specifically the Crawlability check failure looks more like it is an invalid URL then your setup was wrong.

So if I have an “initial scene” (Logo and solid background) and my main scene/ ad.
The polite loading JS will call the initial scene and then on scene load run the main timeline, is that the gist of polite loading?
Is there a way I can tell the initial load size?
Cheers,

You can view the full size of the content transferred in Chrome’s Dev tools in the ‘Network’ tab:

For your case, you would probably want to run the polite loader so that it resumes the timeline of the main scene, which then starts your ad. Your first scene with a logo and solid background could then have a Timeline Action after a half second which starts scene two where the meat of your content is.

‘Polite’ essentially means that other content on the page has loaded, the ad is actually visible, and it is safe to start any movement. I think the default behavior is to not play the ad unless it is visible, so it might be that you just want to use the function on Line 63: https://gist.github.com/themorgantown/444210114bd7a42f25c1fffc74f9a21a#file-politeloader-doubleclick-js-L63

This is essentially this code: https://support.google.com/richmedia/answer/2672554?hl=en. You can place Hype-specific functions within that code as along as you are running this function ‘On Scene Load’.

<script>
if (!Enabler.isInitialized()) {
  Enabler.addEventListener(
    studio.events.StudioEvent.INIT,
    enablerInitialized);
} else {
   enablerInitialized();
}
function enablerInitialized() {
  // Enabler initialized.
  // Ads are rendered offscreen in mobile apps so animation should wait for
  // the visible event. These are simulated with delays in the local
  // environment.
  if (!Enabler.isVisible()) {
    Enabler.addEventListener(
      studio.events.StudioEvent.VISIBLE,
      adVisible);
  } else {
     adVisible();
  }
}
function adVisible() {
  // Ad is now visible, start a timeline or Jump to the Next scene here... 
}
</script>