In this video we're going to look at doing a full publish for Google DoubleClick. It depends on how you're working, sometimes you might just be doing the creative part and send it off to your networking team, and they'll add the extra code that it needs. You've probably selected the ClickTag yourself but let’s go through the whole process and see you work out with a newer business what points-- at what point you need to hand it over or whether you can do the whole thing.

So what needs to get added, you need to add ClickTag to both the actual ad and to the head of the HTML, often you need the ad size in there as well, and that goes as the HTML head, and the ClickTag goes into the head, you zip it all up, and send it off. There's an Enabler as well that goes in there, so let's work through it all.

First of all I'm going to add my button, so I'm going to add a giant button, actually I'm going to do it on its own layer. I put it in the Frame1 here, and I'm going to cover the whole animation with it. Select it, 'Modify', 'Convert to Symbol', make sure it's a button. This one's going to be ClickTag. Give it an instance name, they’ve called it ClickTag as well. That goes around the whole thing, that's covering everything, so I'm going to double click it, go inside of it, drag my 'Up' to ‘Hit’ so that it's not visible in the 'Up, Down, Over', only in the 'Hit'. There’s this kind of weird aqua transparent thing, let's just say that you can actually find it, it doesn't publish. If I preview in a browser now that aqua green thing does not appear.

So that's the first thing I need to do. What I need to do now is add the code for this to work. Under 'Window', 'Actions', and I'm going to go to 'Code Snippets', make sure it's selected, go to 'HTML5 Canvas', go to 'Actions', 'Click to go to Web Page', double click, and it will switch this out with the bit of code I've got hiding over here that I got from Google. So that's the bit on the page. Save it, close it.

Now what I'm going to do is I'm going to go to 'File', 'Publish'. I'm not doing the images in this video, image compression and all sorts of things is very important before you go to outer publishing, but that's a whole group of videos earlier on in the series, you can do those, let's do the code part.

What's happened is, I'm using my classic tween, that's not what gets included, it's these two plus some images. Actually there are no images in this, that little eyeball thing here is a vector graphic, no images in case of this one, so I'm well under my file size, which is great, but what I need when I work is I need to open up the HTML. 

The bits I need to add-- remember, I need to go through and switch out-- I'm allowed to use 'Create JS', but I have to use the Google version of it, and I'll go and find that. Where did I find this one? If you haven't done the earlier video, I Googled 'Hosted Create JS Library', and I copied and pasted this from a website that I found on Google DoubleClick, and they said, this is the one to use, so I'm replacing that one. The other thing I need to do is add that ClickTag. I've got this specs sheet from Google as well, I Googled what I needed to include in terms of ClickTag, and it says, just before the closing of the head, add this.

One thing you need to do is, if you go off and Google 'click tag html5 doubleclick', you'll probably get to the right place, 'How to prepare assets', this looks good, and down here it says 'Add your ClickTag'. Be careful when you're looking for ClickTag, make sure you're using the word HTML5, because in earlier versions, when we used to use Flash swfs, we used to use this thing for action script ClickTags, and it was very different from HTML ones, HTML ones are a lot more complicated, but you will find documentation online on how to add ClickTag code for Flash, and this is Flash, this is swf, but you want something that is like--

Another thing you can do in Google which is quite handy, is you can switch results for stuff that happened any time in the last year, so at least you know it's kind of relatively new, so it's not the old school Flash stuff. 

So, what have we done? We've added our ClickTag, we've added this bit here. The other thing that Google say we need to add is the ad size, so here is my ad size, and this is to put in the head, I can do that. Where does it go? It doesn't really matter. Follow what they say, and just follow some of their examples, and like I said earlier, there's some really cool stuff where you can find, say Google DoubleClick, find examples of the work that you're doing, and just go through and have a look in that HTML that they give you of the examples. I know that this one is that crazy file format of-- how tall is it? I can't remember, is it 80? It is 90. So it means that it's part of it.

Not all ad networks need this thing here called ad size but Google DoubleClick told me I had to, so I'm going to. The other thing it needs is something called the Enabler. You don't need to know too much about it other than-- that needs to get pasted in this bit here. This Enabler needs to get put into the document. That's it for the HTML for this. Let me double check, I've got my own little list here. That's it. We've added the Create JS replacement, we've added the ad size, we've added the Enabler, and we've added the ClickTag code. Why did this go down here, not there? It doesn't matter, you can have the ClickTag code up there, I was just listening to this little blurb here which said "Write your code here,” so I did. So that's it, we're going to save it.

What we want to do now is probably save it as a template, so I'm  going to do a 'File', 'Save As', I'm going to call this my double-click, I think I already got one called double-click, here's one called double-click, that just means that now if I’ve got any other ad, what I can do is I'm going to open it up, and let's go to 'Motion_path', and I can add my button, but when I'm going to publish, still having to go through all that drama that we just did then of copying and pasting, and finding out. Once you've got that locked down you can go here and say, 'Advanced', 'Import New', and in this bit here there was one called 'double-click'. Which one did I call it? It's the one I just did. It was this one. If I hit 'Publish' now, then you go and find 43, so there's this, and this, there's no images running along with this because it's just all vector graphics, and you can see in here, if I open up this in Dreamweaver, I don't have to go and do all that junk, it's there. I’ve got to change this because it's the wrong size. Enabler is there, and my ClickTag's there. 

When you are publishing with something like DoubleClick just make sure once you've gone through the hassle, go through and save yourself a template, and then you can use that over and over again, or if you are really new, you can make that animations really sweet, but in terms of doing this, I can do a better front end design stuff, web designs, I'm okay, and encode, a little bit, but if you are really struggling what you might do is give them this video, give your developer this video and just say, "This is what you're  looking to do," and give them to make this HTML for you and they’ll give it to you, and you can go through it and just say, 'Import New', 'Export', and then hit 'Publish', and you're away.

So that's it for this video, let's go and have a look at one of the other ad networks.