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.