Jump to content
Search Community

Adobe Animate CC 2017 banner ad templates ready for AdWords

Pensketch test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

My very long "origin" story follows. TL/DR: I've attached some templates that people might find useful if they are building ads for AdWords using Adobe Animate CC 2017.

 

<--- begin long story --->


I'm very new to HTML5, but I have many years of experience with Flash. That said, I'm a designer, not a coder, so trying to figure out what path I should take to move from Flash to HTML5 was like wandering around lost in a jungle, sans-machete. 

 

The last time I made the effort to learn how to make HTML5 ads was a couple of years ago and was less than successful. I ended up landing on Google Web Developer, since that appeared at the time to be the only HTML5 program that AdWords would accept ads from. That was so incredibly frustrating that I ended up going back to Flash CC 2015, animating the ads, then back saving the files to CS6 so I could publish them with the highest level of the Flash Library that AdWords would accept. Due to how long that process ended up being, we transitioned to using static ads instead of animated ads, and our clients were fine with that. I was relieved. All was right(ish) with the world.

I was content to leave HTML5 behind and pretend like I would never need to figure it out.

 

That ended in February. We have a client that wants to start running animated banner ads through AdWords. Back into the jungle I went. After learning that AdWords will no longer accept .swf files, I picked up GWD once again, and took a day to put together one ad that would show the client that we could do animated ads.

 

If anything, GWD felt worse than it did two years ago. I banged my head against the wall trying to get text to do what I wanted, and ended up creating SVG shape files instead. I eventually got the ad mostly working. Sometimes a background shape didn't do what it was supposed to, and nothing seemed to fix it. It was not an ad that I was very proud of, but at least it was working. Mostly. I also calculated that it took me eight times as long to build that ad as it did for me to make a static ad.

 

I sent the example ad off to the client and didn't hear anything back until last week. He sent us links to some ads that he liked, and asked if we could do something like that. They were pretty basic, the one he really liked was a bit sloppy, but I replied that we could do that, and also pointed him back to the example ad that I had sent before. Apparently his missed it, because he said that he loved it. It was exactly what he was looking for.

 

For the heck of it, I decided to take a look at the code for one of the ads and see if it was made in GWD, or something else. Really hoping for something else. Around the middle of the HTML file, I saw, "UPDATES AND DOCS AT: http://greensock.com"...

 

That's what led me here. Through watching videos, and searching the forums, I learned that Adobe Animate was basically Flash – or Flash enough that the learning curve would be pretty shallow – and that it could incorporate GreenSock.

Oliver16Years was particularly helpful in pointing me down the correct path regarding the use of Animate versus hand coding, and that saved me quite a bit of time.

 

The next hurdle I had to overcome was building an ad in Animate and getting it through AdWord's HTML5 Validator.

 

I rebuilt my original ad, and when it came time to run it through the Validator, I got two errors; one involving missing this code from the <head> section:

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

Which I already knew about, and just forgot.

The other involved fonts, which surprised me because I was using Google Fonts. Apparently, when Animate publishes the files it links to the Google fonts in a way that makes AdWords sad. Looking at the code, I couldn't figure out what needed to be changed. I asked for advice in another forum post and ohem helped out with his reply saying that I would be better off sticking with static text since Animate would automatically convert it to shapes when the file is published. So I've sidestepped that issue for now, and will revisit it if I need to down the path.

I fixed those two things, resubmitted, and then got another error. Apparently, I needed to find this line in the published HTML5 file:

<script src=“https://code.createjs.com/createjs-2015.11.26.min.js”></script>

replaced with this:

<script src=“https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js”></script>

So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks.


The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>):

<script type=“text/javascript”> var clickTag = “”; </script>

And use this for the button code:

this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage);
		
function fl_ClickToGoToWebPage() {
window.open(“clickTag”, “_blank”);
}

... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors.

All of that was a lot of jumping around in the code side of things that I really didn't want to be doing, especially if/when we start rolling out animated ads to our other clients. Surely there was a way to make this work automatically?

Why yes, yes there is. Thanks to this other forum thread I came across, I learned that I could go under the "Publishing Settings / Advanced" tab in Animate, and export the "Template for publishing...", modify what I needed to modify, and then import it back in.

I totally took advantage of that. I set up the file so it would have all of the code changes, as well as including the GreenSock library. I tested the published file using the AdWords Validator, and everything was green.

Then I made the other two common sized ads that we are always needing to make, to give us a full set: 300x250, 160x600, and 728x90. Then, because of a number of our clients are car dealers and have lengthy disclaimers that we need to cram into the ads, I made a modified set similar to what I used to do in Flash for a huge account at a prior job that include a rollover "disclaimer" button. I tested those in the Validator as well, not expecting them to work, but they did.

 

They may not work when actually uploaded to AdWords though; I'm a designer, so I don't have access to that side of things to test.

 

<--- end long story --->

I've attached my current set of templates to this post.

 

They are set up with all of the basics you need to satisfy the AdWords gods (at this time, and as far as I know).

 

  • 160x600, 300x250, 728x90 (two sets; one with a rollover for disclaimers and one without)
  • built in Adobe Animate CC 2017
  • 30 fps
  • 1px black border (locked)... there may be a better way to do this. I fell back on my Flash experience when setting it up, but I'm certain there's a way to add a border to the ad through HTML. It was a low priority right now.
  • click area (locked & hidden)
  • 300 frames (10 seconds) already added to the timeline
  • stop code on the 300th frame
  • the GreenSock Library should already be include and working (it's included when published), but I haven't tested that part yet (still learning my way around GreenSock), and – again – I'm a designer, not a coder, so I may be missing something there

 

I have not used these yet for actual ads that are up and running on AdWords. Once I have, I'll report back, and if any changes are needed to make them work, I'll replace/update the zip file.

 

---

(edit) The rollover part of the rollover banners, as they are now, do not work when uploaded to AdWords. I will see if I can figure out what has to be done to make it work (if anything CAN be done). If any of you guys have an idea how to fix them, please let me know and I'll get the fix in and updated asap.

---
(edit 2) Thanks to the responses below, I seem to have fixed the rollover issue so they work now with AdWords. I also caught a few more errors that I fixed as well.

A new zip file has been uploaded.

Until I actually use them for a campaign, I'm not 100% sure they will fly, but I'm hopeful. If anyone has a chance to use them before I do and would like to say how they worked, I would appreciate it. The disclaimers are in OpenSans, but you can change them to whatever works best for you, of course.

Animate CC 2017 HTML5 Templates-AdWords-v2.zip

Edited by Pensketch
  • Like 4
Link to comment
Share on other sites

So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks.

The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>):

<script type=“text/javascript”> var clickTag = “”; </script>

And use this for the button code:

this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage);
		
function fl_ClickToGoToWebPage() {
window.open(“clickTag”, “_blank”);
}

... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors.

With Adwords, the whole banner is clickable by default, so you don't even need to add a clickTag like you would with DCM.

 

All you need is the ad size meta tag and the Google-hosted CreateJS library.

 

Adwords requirements are here, for reference: https://support.google.com/adwords/answer/1722096#otherhtml5

  • Like 1
Link to comment
Share on other sites

It's such an interesting read seeing other people's worlds and experiences.

 

From what I hear I should be grateful for not having to work with AdWords - I have only done two or three campaigns with them over the years -  as it sounds really crippling.

 

At the same time, doing most of my work in the Rich Media end of the spectrum, I get a ton of video requests and ads that are 2-5MB each and I'm like: "Rilly? Are we really going to push down a 2MB banner ad that loads in a 3 minute video from YouTube?"

 

Ah the trial and tribulations of the banner world.

  • Like 2
Link to comment
Share on other sites

With Adwords, the whole banner is clickable by default, so you don't even need to add a clickTag like you would with DCM.

 

All you need is the ad size meta tag and the Google-hosted CreateJS library.

 

Adwords requirements are here, for reference: https://support.google.com/adwords/answer/1722096#otherhtml5

Thank you. I discovered that last night as I was trying to figure out why the rollover button wasn't working on the 2nd template set. That's what I was expecting had happened; they wrapped it in their own little button shell, since it wasn't built in GWD.

I think the answer to my rollover problem has to lie in the exitapi.js script, also described in the page you linked to:

 

 

 

HTML5 ads that are not created in Google Web Designer are, by default, clickable on the entire area of the ad. If you wish to limit the clickable area to specific elements, you will need to include the exitapi.js script.

 

To use exitapi.js, include the following script in your HTML <head> tag:

<script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/

gadgets/html5/api/exitapi.js"> </script>

Then make the following JavaScript call to enable your final URL:

ExitApi.exit()

For example, send a consumer to the final URL, using a standard anchor:

<a onclick="ExitApi.exit()">Learn more</a>

If you don't include the extiapi.js script, AdWords will make the entire ad clickable, and you won't need the exit() call.

For ads created in Google Web Designer, you don’t need to add this script.

I'm trying to figure out how to implement that, while making certain the clicks will still be tracked.

 

I get the part about the script that needs to be added in the <head>; that's easy.

 

What I'm not certain how to do is call it on the JavaScript side of my clicktag layer (since there won't be a overall button shell if I use this and am understanding what it does). The example they give is inline html code. The answer is probably dead simple, but again, I'm more a designer than a coder.

 

I'm going to have to research it some more and try a few tests if I have time today.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...