Publishing via Adwords GDN with HTML5
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
In this video we're going to look at publishing to Adwords, or the Google Display Network, or GDN, whatever you want to call it. It's quite simple; generally you don't need any help from any developers. A couple of things you don't need, what you don't need is ClickTag. You don't need this code that goes on to the button that goes on to that page. The display network, it uses the whole ad as the click. There is a way of doing just buttons but you're going to look into things called exits. They're really easy to do, there's only couple of things we need to go and update.
To know where to go, I have-- this is the page here, I've put the url in the description, on the comments section. This is that image ads, you want to find one that says 'All HTML5 ads', and these are the sizes that are supported, and this is the file size, in KBs, and you've got to upload the zip, and it can only contain these kinds of files which is all perfect for what we’re doing, and then this last bit here, we're going to skip Google Web Designer, all other HTML5 ads, that means this needs to go in. It needs this, this, and this but that's what Adobe Animate already adds, but this thing here, ad size, we do need this for Google Adwords, we had the same one in Google DoubleClick earlier, so I'm going to make sure that's in it, and I need to make sure that I adjust-- remember, our CreateJS, I need to make sure I use this thing here, just like we did in Google DoubleClick. And if you're going to use exit tags, you can look at that one. But that's it for the specs. The cool thing about Google Adwords is it has a verifier as well, so before you go off and check you can upload it and double check if it passes their quality control.
Now, what I'll do is, this file here is the one I made for DoubleClick, so it's got a ClickTag button, it’s got lots of stuff it doesn't need the Enabler, lots of things it doesn't need, so what I'm going to do is, I’ll save it, I will publish it, and let's just make sure I'm using my publish settings. It defaults to the default every time so I'm going to go and grab the DoubleClick stuff, hit 'Publish'. Every time you open the file up you have to go back to that. I’ll go in there, and it's produced hopefully these two files.
What I'm going to do is I'm going to compress them, so right click, compress them. On a PC, I think it's right click, and you go to 'Send to Zip file'. At the end of the day you need a zip file. What I'm going to do is try and validate it, so I'm going to go to 'Website', click 'Upload', use that archive, upload it, let's go freak out, probably.
It's actually not doing too badly, and it's doing some things, there's an invalid path, that's the ClickTag code, not working, so we don't want that to go. Normally it fails this DoubleClick Studio Check, so there might have been a problem with my final file, let's have a look. No problem. I'm just trying to break it and it won't break. There's an Enabler. Normally it fails that because there's an Enabler in there and a few other things but-- the script in here, double click, it only fails it.
So what we need to do is, we're going to do a new one all the way from the beginning, and we'll use this file here, so what we need to do is, we don't need to roll a big DoubleClick button. I just go to 'File', and I go to 'Publish', then I need to add a couple of those things that were required, so published, there it is there, these two. I'm going to open up the HTML, and I want to go and check out what they need.
What they want is the ad size, this one here. Now the problem is, because I just picked a random one-- I don't think I've picked a supported ad size, but that’s going to be okay, it might fail on that, but we know why. So, I got this going here, publishing GDN-- your code goes here. There's the ad size, it's not that. Which size is that? It's probably our standard 550x400. You might come back with an error for this, that's okay. Make sure it's standing at the right size.
The other thing it said was that-- We’re not using Greensock; Greensock is a cool library but it's not what we're using, we're using the computer default, which is called CreateJS, so I'm going to grab you, replace this one. We shouldn’t be breaking that. This one's broken across here because it's in a browser, and it just kind of snaps down, so you just make sure that it has broken-- actually it doesn't really matter. So 'Save'. So, there's tags there, and there's tags there, hit 'Save'. What I might do is do a 'Save As' and call this one-- it's like a template, for later on, let me call this one 'Adword_GDN' Google Display Network.
Later on, I can go into Animate, and for another ad I can go through and go to ‘Publish Settings’, I just make sure that I'm using 'Advanced', 'Import New', and I use this one from now on. Hit 'Publish', fingers crossed, we have a little zip teaser, so it's published these two. I'm going to right click, compress them. And I'm going to add that one to it. Let's go to Validator, 'Start Over', 'Upload' new one, click back and relax, and don't get any errors. And you can see I'm way under the 150KB, there's a lot more I could do.
Alright, that is how to publish an ad for Google Display Network, or Adwords. Essentially Adwords is so easy that you could now go off and upload it to your Adwords campaign, and the Adwords start working.
Let's see you in the next video