How to launch Adobe Animate CC HTML5 ads on DoubleClick for Publishers (DFP)

With detailed explanation, code examples and demo files

(Article updated on 2016.06.13)

Update 2018.01.11:
Both Adobe Animate and DoubleClick for Publishers moved quite forward after the article was written more than 1,5 years ago:
a) Adobe Animate now allows to build HTML5 animate with “flat” file structure (without /images folder, setting ican be found in the “Publish settings”)
b) Adobe Animate also already has quite nice Publishing Templates engine that you can use to Publish animation with the required Template that is prepared according to the provided specs
c) DoubleClick for Publishers (DFP) allows to upload HTML5 banners packed into .zip files directly to the platform and banners work quite properly out of the box.

So the article below is becoming a bit old and not very much relevant as such problems and solutions may be not needed in the future. Anyway, we are leaving this article here, because it may be used as the reference on the solving HTML5 banners and ad platform upload problems.

Need help with HTML5 banners design and animation? We will be glad to help!

tl;dr

Move files from sub folders to the main directory and modify file paths in .html and .js files accordingly; assign variables (IMG1, IMG2 …) to images in .js files manifest with settings and move variables with defitnitions to the .html file; add clickTag; add ad.size meta tag; add images preloader and modify a bit of JS code.

As you all now Flash is becoming less and less relevant for web (it was never relevant for mobile). So we need to use new tools to make banners and animations. One tool we started using recently for building HTML5 ads is Adobe Animate CC.

Adobe Animate CC is more like re-branding of Adobe Flash Professional CC, just with new features that will help you to convert your Flash animations to HTML5 or simply build new HTML5 animations for web and mobile.

In this case we’ve build HTML5 banners for the client using Adobe Animate CC and a bit later client told us that ads will be published through DoubleClick for Publishers (or DFP). We created really great ads, but completely incompatible with DFP…

We would like to share what where the problems and how we solved them.

DoubleClick for Publishers HTML5 ads requirements

There is already information written by DFP, best practices and even tools for adding HTML5 ads to the DFP. Here let’s focus on the some main things you need to know about HTML5 banners while using DFP for their trafficking:

1. DFP supports only ads that have “flat” structure. So all banner files need to be in the same one folder.
   You cannot use subfolders (you cannot place your JPG,PNG,JS files in /images/ or /js/ folders etc.).
2. Ad-ops will need to rewrite/replace paths to images with variables while adding banners (creatives) to the DFP, so all image paths should be defined in the main HTML code of the banner.
3. You can not have links to the external files or libraries in your ads (like some animation JavaScript libraries on CDN etc.).
4. Ads need to have clickTag parameter defined properly for click tracking purposes.
5. Every HTML file needs to have ad.size meta tag defined properly

Of course there are more specifications you need to comply, like frames per second, maximum animation duration, ad weight etc. But we really hope that you’ve build really great ad and other specs are not the problem.

Adobe Animate CC HTML5 published ads file structure

Well it is not ads or banners structure, more like default file structure for the Animate CC published files. After you Publish your banner, you should have something like this:

Adobe Animate CC published FLA file structure

Images are placed inside “images” folder, “libs” folder contains important for you animation .js libraries, and you have to files with settings in the main directory — .html and .js

Keep in mind, that you need to modify Publish settings of your .fla file to get file structure as in the picture above. Here are Publish settings we used:

Important Publish settings here are:

• Basic tab: Export Image assets to some folder (images/)
• Basic tab: Export CreateJS assets to some folder (libs/)
• Advanced tab: do not use Hosted libraries

Modification of Adobe Animate CC HTML5 banners to make them compatible with DFP

Let’s assume you have files as described above. Now you can close your Animate CC, because you will need to modify some HTML and JS code.

1. You need modify you banner so it has “flat structure” (no subfolders)
To do this just move all files from the folders “images” and “libs” to the main directory of your banner ad and change paths to your files inside .html and .js files.
In our case we needed to modify paths to images and createjs file inside adguns-demo-300x250.html and adguns-demo-300x250.js files (file download is in the bottom of the post).
After modifications open your .html file and see if everything works. If not — try to find errors and fix them.
In the end your ad should work as before, just without subfolders:

One folder HTML5 ad structure

“Flat” ad structure, no sub folders

2.You need to move images defining variables from .JS file to the main HTML file
Open adguns-demo-300x250.js file (of course, file name will be different in your case), find “manifest” part where images are defined:

manifest: [
 {src:"adgunslogo325x120.png", id:"adgunslogo325x120"},
 {src:"bg.jpg", id:"bg"}
 ]

and change ALL image names to variables (IMG1, IMG2…):

manifest: [
 {src:IMG1, id:"adgunslogo325x120"},
 {src:IMG2, id:"bg"}
 ]

after that open HTML file adguns-demo-300x250.html and add some JavaScript code to the <head> part, with those variables:

<script>
IMG1 = "adgunslogo325x120.png"; // adgunslogo325x120.png
IMG2 = "bg.jpg"; // bg.jpg
</script>
<script src=”adguns-demo-300x250.js”></script>

Important. This definition of your image variables should be above definition of your main JS file (in our case adguns-demo-300x250.js).

If you made all modifications properly — your HTML5 will work after opening HTML file.

3. You need to define clickTag variable in the banner HTML file
Quite a simple step (of course if you created button inside FLA file with the clickTag action), just add some code to the banner HTML file:

<script> var clickTag = "http://adguns.lt/services/banners"; </script>

4. You need to add ad.size meta tags to your banner HTML file
This one is also quite simple — just add in the <head> part of yout HTML file met tag (below <title> is OK) like this one (only modify your banner size depending on your ad width and height):

<meta name="ad.size" content="width=300,height=250">

5. You need to add image assets Preloader and change the way images are loaded into the ad (Updated 2016.06.13)

This step is needed only if you see image loading error when previewing your ad on DFP, error looks similar to this one:

XMLHttpRequest cannot load https://tpc.googlesyndication.com/pagead/imgad?XXXXXX. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://partner.googleadservices.com' is therefore not allowed access.

This error occurs because you are uploading ads and assets to the one domain name (googlesyndication.com) and preview is on another domain (googleadservices.com) trying to load images.

In such case you need to take few more actions while editing your ad files (this part is a bit more complicated if you are not a developer), because you will need to:
a) Change the method of how images are loaded into the ad by adding a Preloader script, that that loads images into the ad
c) Modify your ad JS code a bit, so images are properly processed and counted by Preloader

Preloader can be added to the main HTML file with simple JS function:

function preload() {
 for (i = 0; i < preload.arguments.length; i++) {
 images[i] = new Image();
 images[i].src = preload.arguments[i]
 }
}
preload(IMG1, IMG2);

After that you need to modify “function handleComplete()” a bit (please have a look at examples below in the Downloads section.

And modify your ad’s main .js file, you need to update that part where images are loaded into the library, by adding processed images calculation to the image assets that are loaded in to the canvas:

this.initialize(images[0]);
 window.processedImages++;
<…>
this.initialize(images[1]);
 window.processedImages++;
<…>

TIP: Have a look here to another article about the same problem, another solution is to inline base64 encoded images and simply not to load any “images”.

Best way to understand all the modifications is to check examples and compare files, so you will see what changes where made. (Our example below loads images to the ad and displays ad only after all images are loaded, also we’ve added some delay to be sure, that all image assets are loaded).

Demo files and examples download

We believe that you would like to check examples, so here they are:

Adobe Animate CC HTML5 banner with .FLA file. Download here.

Modified Adobe Animate CC HTML5 banner, compatible with DoubleClick for Publishers (DFP). Download here (Updated on 2016.06.13).

And in case you want to see live preview of the ad from DFP directly, Preview is here (let’s hope it will work forever).

Here at Adguns we know how to design and develop HTML5 banners, create interactive and interesting Rich media ads, lead generating Landing pages and more. Have a look at our Portfolio and let’s talk. We know how to build great things!

900 banners in a month? Need banners yesterday? Let’s do it!