How to get ads created in Adobe Animate CC to work on DoubleClick For Publishers (DFP)
Recently we were tasked with taking some banners that were originally created in Flash and updating them. Since the changes were minor I decided to try giving Adobe Animate CC a spin to see how hard it would be to take the original Flash creative and export it as HTML5. Copying the animations to the new format was fairly easy and I was pleasantly surprised at how easy it was to port some of my ActionScript 2.0 button code to the new Javascript API. Everything more or less worked and looked the same in HTML5. The trouble came when trying to get the ads working under DoubleClick For Publishers system, which up until this point I’d never worked with.
For those that don’t know, DFP has some fairly hefty restrictions when it comes to HTML5 creative. You can set up HTML5 banners as ‘custom’ creatives. These creatives must exist in a flat folder structure (no sub folders). Also, any external files (images, JavaScript, etc) will need to be referenced by special macros so that DFP can put the proper server URL for these assets. But more on that later.
First, I came across this medium article which makes it sound fairly easy to get an Adobe Animate CC banner working under DFP. I’m not sure if something has changed since the article was published, but there are actually a few more steps that have to be taken in order to get Animate banners to work, at least any banners that have images in them.
You can start by following the steps in the article. Where it gets tricky is with the images. It seems that at least in current browsers, references to the images get blocked because the server that DFP hosts them on does not have Access Control Allow Origin set. I believe this is because Adobe Animate loads these images using JavaScript to be drawn into the Canvas, instead of linking to them as IMG tags like a traditional HTML5 document.
The way I got around this problem was to encode the images as Data:URI strings and embed them int the HTML file itself.
Here’s what to do:
- Follow step 1 of the adguns article to export all your files into a flat folder structure. Since we’re going to be modifying a lot of stuff you may want to make a copy of your Adobe Animate output folder so you don’t accidentally overwrite it by publishing again from Animate.
- Edit your main .HTML file so that the HEAD looks something like this:
<head>
<meta charset=”UTF-8">
<title>YourBanner_HTML5_728x90</title>
<! — write your code here →
<meta name=”ad.size” content=”width=728,height=90">
<script>
var clickTag = “%%CLICK_URL_UNESC%%%%DEST_URL%%”;</script><script src=”createjs-2015.11.26.min.js”></script>
<script src=”YourBanner_HTML5_728x90.js”></script>
The important bits have been bolded. Add the META ad.size info. I’m not sure if it’s actually necessary, but it doesn’t hurt. Remove any parameters or extra path (eg: ./) bits on the two script tags. I included the DFA macros for the clickTag. They should get pulled through without any extra work from you (assuming you are using standard clickTag code in your banner).
<script>
var canvas, stage, exportRoot;
function init() {
// — — write your JS code here — -
canvas = document.getElementById(“canvas”);
images = images||{};var loader = new createjs.LoadQueue(false);
loader.addEventListener(“fileload”, handleFileLoad);
loader.addEventListener(“complete”, handleComplete);
// loader.loadManifest(lib.properties.manifest);
handleComplete();
}
Comment out the loader.loadManifest line and just call handleClomplete() directly. As you’ll see in the next step, we’re going to be embedding all the images and loadManifest doesn’t work correctly if the manifest is empty.
3. Modify your the body tag to call ‘onInit’ in a script tag at the bottom, instead of as an onLoad attribute.
<body style=”background-color:#D4D4D4;margin:0px;”>
<canvas id=”canvas” width=”728" height=”90" style=”background-color:#FFFFFF”></canvas>
<script>
init();
</script>
</body>4. Open your main JavaScript file that Animate produces:
(function (lib, img, cjs, ss) {var p; // shortcut to reference prototypes// library properties:
lib.properties = {
width: 728,
height: 90,
fps: 24,
color: “#FFFFFF”,
manifest: [
// Erase images from the manifest]
};
Next, we’re going to add the Base64 Data:URI strings to embed the images.
If you’re using SublimeText, there is a fairly easy way to get them — SideBarEnhancements (it’s a great plugin to have anyway). Just right click on the file in the sidebar and pick Copy as Text > Content Data:URI.
Add these strings as variables. You can put them underneath the lib.properties / manifest stuff we changed above. You should be able to paste the Dat:URI’s in, just be sure you’re wrapping them in quotes “”.
var dataImg1 = “data:image/jpeg;charset=utf-8;base64,YADAYADA....";
var dataImg2 = “data:image/jpeg;charset=utf-8;base64,YADAYADA....";
// etcPut in one variable for each image in your banner.
5. Next we need to use these strings to create the bitmaps. Below where it says “symbols:”, you’ll see the code to create each bitmap. It looks like this:
// symbols:(lib.img3728x90 = function() {
this.initialize(img.img3728x90);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,131,93);
Change it to remove the ‘this.initialize()’ call and put in the dataImg variables we just created where it says new.cjs.Bitmap():
(lib.img3728x90 = function() {}).prototype = p = new cjs.Bitmap(dataImg1);
p.nominalBounds = new cjs.Rectangle(0,0,131,93);
You’ll need to do this for every image in your banner. Be sure to put in the correct variable for the correct image file (dataImg1, dataImg2, etc).
6. Now, you should be able to delete any external image files and the banner should still load when you view the main .HTML file in your browser. If not, check steps 1–5.
7. If the banner works, you’re ready to try uploading them to DFP. If you’re using the tool referenced here, you should be able to zip all the files (which at this point should just be two Javascript files and an HTML file).
8. If you’re manually creating custom creatives, you’ll need to make a few more changes. DFP’s templates require all your code to be in the ‘body’ tag. Their tool basically strips out most of your HTML leaving you with something that looks like this:
<script>
var clickTag = “%%CLICK_URL_UNESC%%%%DEST_URL%%”;
</script><script src=”%%FILE:JS1%%”></script>
<script src=”%%FILE:JS2%%”></script>
<script>
var canvas, stage, exportRoot;
function init() {
// — — write your JS code here — -
canvas = document.getElementById(“canvas”);
images = images||{};var loader = new createjs.LoadQueue(false);
loader.addEventListener(“fileload”, handleFileLoad);
loader.addEventListener(“complete”, handleComplete);
// loader.loadManifest(lib.properties.manifest);
handleComplete();
}function handleFileLoad(evt) {
if (evt.item.type == “image”) { images[evt.item.id] = evt.result; }
}function handleComplete(evt) {
exportRoot = new lib.YourBanner_HTML5_300x250();stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener(“tick”, stage);
}</script><canvas id=”canvas” width=”300" height=”250" style=”background-color:#FFFFFF”></canvas>
<script>
init();
</script>
Which is basically just the script tags and Canvas tag from your HTML file with everything else removed. You’ll need to upload the javascript files and put in the macro tags for those (%%FILE:JS1%%). See the DFP docs for info on that.
