Hey, in this video we're gonna look at adding click tags  or click through tags, whatever you wanna call them. Um, so let's discuss what they are. Essentially what it is, is you add a button to your ad  that when you click it, it goes off to your website. But what they don't want, um, ribbon earlier video. We went through and added a button, um, on our monster, um,  monster page that said, when I click, go  to bring your laptop.com. So what they don't want is they don't want you  to add a button that goes, that's hardwired  to a specific website.

What they wanna do is you to add this kind  of like placeholder. So you wanna add the button and you want to add some code  that's kinda like a  placeholder and that's called a click tag. And it just means that um, you've got an ad,  it's got a button, but that button is um, uh, malleable. It can be like, you could change the URL. So it means that the person at the other end of the ad kind  of delivery can decide actually I'm changing the website  to something else or I'm adding some code to it. Okay, so you just add this placeholder or click through.

Um, that allows, yeah, Google to kind  of latch onto something and inject its own bit of,  or whatever ad group you're using inject its  own URL later on. Okay. And there's two parts to it. You add something to the head and you add something  to the actual document. So let's add it to the actual document first. So what we need to do is we need to create a button.

I'm gonna grab my rectangle tool. I have, it doesn't really matter, stroke and feel color. Remember it's gotta be green though. Okay, but no stroke. Just to make it easier. And we're gonna draw a button.

And what I'd like to do is I'm gonna make a layer here  that's called uh, click tag button. And I'm gonna have it go across the whole movie. So I'm gonna be frame one, I'm gonna draw a nice giant  button that covers the whole thing and I'm gonna select it. And I'm gonna go to modify convert  to symbol, not to bit map. Whoops, modify, convert to symbol,  making sure it's a button symbol. Give it a name button.

And this one's gonna be my click tag. Okay? And you need to get an instance name, okay? We talked about it earlier and we haven't really got into  it, but that button now needs an instance. Name, name, uh, unique name. So I'm gonna call this one button, uh,  green box call, anything you like.

Um, make sure that there's no spaces in there though. Great. And next thing we're gonna do is I, if I preview this now,  you'll notice that um, where is it? There you are. Come down, there it is. Uh, he is covering the whole thing.

You can't see any of the animation  underneath, which is not great. So what you need to do is you need to make it invisible. You could use the alpha  and problem with the alpha going down to zero  and you publishing it,  the button doesn't get clickable, okay? For some reason. So what you need  to do is crank up the alpha. So don't worry about the alpha, I switch that to none.

What you do is you double click your button to go inside. I'm inside button click tag. And if I go to timeline, okay,  remember we go up over, down and up. Remember the hit area? Hit area was that invisible kind  of um, area where the button got activated. What you can do is click hold  and drag the up so that it doesn't appear  and up doesn't appear and over doesn't appear in down only  in the hit area, which just means  that these are the only things  that are actually visible to people.

But this activation area is around. So let's preview it, test it,  And you can see now the button is actually activated. It's got the little hand thing that I can click. It's not doing anything. But um, that's the way  to get started with a click tag. Okay, is I'm gonna come back to scene one.

Um, There's my button there. Um, now it looks green. It's actually just see through. They use that green color. It's not from the button that I made, which is if I go  inside and make this hit area pink  'cause it's making it maybe a little confusing  and I go back here, it uses that green just  to show invisibility, otherwise you'd never be able  to click it and you can turn it off. Okay?

Just turn the eyeball off and it'll still be in there. And um, alright, so we're gonna have it selected  and now we're gonna add the click tag to it. So this is the first part. We're gonna  add the code to the button. And it's similar to what we did before we went into window. We went into actions and we went into, you could need  to have this selected for this to work.

Gonna go to code snippets. You're gonna use HTML, we're gonna use Timeline  and we're gonna use go to URL. Actually no we want actions we're gonna use go  to webpage like we did before. So now you can see it's using green button  box, it's adding an event list. Now when it's clicked, run this,  and this is going to adobe.com. What we need to do is switch out for the code that um,  Google double click wants.

We're gonna use double click as an example here. So this is gonna be different for every ad  group, which is the pain. So once you learn yours you'll be fine,  but we'll go through this example and we'll look at seismic  and then hopefully it'll give you kind  of a roundup of what you can do. Um, so all the different ad networks have  help pages, okay? And this one here is how to prepare. This is the one from Google.

Double click. If you Google that, how  to prepare H TM L assets you'll get to here as well. Um, and one of the things down here is there's uh,  click tag guidelines. There you go. Um, blah blah blah. Guidelines, insertion.

If you read through all of that, this is the thing  that I actually want. Okay? Window to open. Let's go here. Um, so that's the bit I need. So I'm gonna go into my thing here and I'm gonna go  and switch out open window  and I'm gonna grab all of that, okay?

And switch that out. Okay? Now I'm gonna close it down. And that is applied the click tag to my document. Now it doesn't do anything. That's the trouble.

Click be click the click, okay. But when you do go through uh, quality control  through do double click, they will check  that you have got click tag code, um, embedded in there  and that'll be what it's looking for. Um, actually what's mine done? My actions ended up there. It doesn't really matter. Okay?

I'm gonna put it in the first panel just to be careful. Um, actions that appear halfway along okay means  that they're not gonna be actually produced. So people clicking it really early  before the first second might not get that code. So just make sure you've got your actions  or your playhead when you are doing actions. And this first part here, alright, so that's the first part. Now we're gonna add the bits that may go into the head.

So what happens is I go file and I go to publish. Okay? And it produces, let's go have a look. Actually let's find it. And it's produced. Where's my, Okay  so there's the files I was working on  that does not go up with it.

Make sure you do not upload the FLA,  it's just the JavaScript, the H TM L  and the images that go along with it. So, um, what I wanna do is edit this H TM L here  and I'm gonna edit it up in say Dreamweaver. Any code editor, notepad, no plus plus, um,  sublime, anything you like. Brackets, I use Dream Move 'cause I'm comfortable in here. I'm gonna code view. And what we need to do,  what Google's asked us to do is we need to make sure  that there's something called click tag in here.

Now one thing I've noticed in here is when I named my FLA  file, okay, I didn't put through,  remember this whole video being putting in underscores, it's  for this very moment, okay? So I've forgotten to put underscores in here  and it's probably gonna cause me problems. I'm gonna ignore it for the moment. You just need to know that when you are naming your files,  um, your Adobe anime files,  you gotta make sure there's underscores  or hyphens between it because it's not gonna like these  spaces anyway. Um, what uh, Google has told us to do is, uh,  where is Google is that we need this in the head  and it's this thing here, okay? It's gonna need that as well.

You might as well do  that while you're here, but we'll talk about that later on. It's to the ad side. So we're gonna grab that. Actually, nope, I want all of this. It's hard to know what bits the head can you see opens  there and the slash close. So I don't want that.

Okay, I want this where it opens,  okay, script and then the closing of the script there, copy  and I just need to lump that in there. Where does it go? Um, doesn't really matter as long as it's  before the closing of this head here you can see in Dream,  uh, sorry, in here there's the head. So I'm making sure mine just before the head  and it even says write your code here. Okay? So that's one of the things that I'm gonna need, uh,  to make this uh, work, uh, for Google.

Double click. Um, and that is the click tag. Okay? Now let's look at one  of the other ones, the other people that do it. So I'm gonna save this one, I'm gonna close it. One of the other groups are seismic, okay?

So this is another ad network  and they do something slightly different. Um, so they still need a click  tag, they call it a click through. Um, so we still need a button, okay? It still needs to be invisible going inside of it  and it's just the hit area. Lovely, okay? And I can still kind of see it underneath.

So what I need to do is have it selected, um, go  to window and go to actions. The difference in terms of this one is that um,  seismic on their website have a bit a code snippet  that I can download, which is really helpful. So I got a code snippets now. Okay? And code snippets here, what you do is you go into here  and there's one that says, um, import code snippets, xml. And this is the one I downloaded from their site  and lots of the A groups are doing it.

Google double click doesn't, which is a pain. But I feel like as this industry matures or HTML five  and Adobe Animate matures, you're gonna get more  and more of these just to be able to import  and they might even be built in eventually. So I've imported it and here it is here I've got my button  selected and I'm gonna click seismic, click through,  double click it and theirs is a bit more exciting. Okay, there's a lot more to it, but that's it. Okay. I've added my click tag.

I don't have to go and copy and paste anything. That's it for seismic. So I'm gonna save it. And what they do for their HTML is they  do something slightly different. Um, so I'm gonna close that down. So instead of having to open up in a code editor,  what they've got, if I go to file publish settings, okay,  they've got something called a template.

Now that template is built into um,  where's my templates advanced. They've got this one in here that I can import, okay? And that goes and adds it to my H TM L for me. They don't even have to do anything. I just click import new. And you'll find in there they've got something called Adobe  Animate Publishing H TM L um, template.

You import it, you hit publish  and it adds it to you automatically. We're gonna cover some  of this importing HTML things in the next  video a little bit more. So we'll talk about seismic again there. But with Google double click, we had  to manually add the click tag code. Okay? It wasn't that manual.

Um,  and then the HTML, we opened it up in Dreamweaver  and we had to add the um, code that made the click tag work. Whereas Seismic, all I do is import their little template. Um, and what happens is when I have publish it actually  produces it for us. Alright? So that's kind of a rough overview of click tags. Everyone's gonna be slightly different.

What will happen is the industry kinda matures. There's gonna be a universal stuff that goes along for it,  or at least there'll be lots  of presets built into Adobe Animate. Alright, let's go to the next video. I.