Clicktag or Click Through

Hey, in this video we're going to look at adding ClickTags or Clickthrough tags whatever you’re going to call them, so let's discuss what they are. Essentially, what it is, you add a button to your ad, that when you click it, it goes off to your website. Remember, in the earlier video we went through and added our button, and on our monster, on the monster page it said, when I click go to bringyourownlaptop.com, so what they don't want is, they don't want you to add a button that's hard-wired to a specific website, what they want you to do is to add this kind of place holder,  so you want to add the button, and you want to add some codes, it’s kind of like a place holder, and that's called a ClickTag, and it just means that, you've got an ad, it's got a button but that button is malleable, you can 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, so I'm adding some code to it,” so you just add this place holder or Clickthrough, and that allows--Google would later on do something and inject its own bit of-- whatever the ad group you’re using-- inject its own url later on.

So there's two parts to it, you add something to the head, and you add something to the actual document. Let's add it to the actual document first. What we need to do is we need to create a button, I'm going to grab my rectangle tool. Doesn't really matter, stroke and fill color, remember, it's going to be green though, but no strokes just to make it easier, and we're going to draw a button, and what I would like to do is I'm going to make a layer here that's called ClickTag button, and I'm going to have a code across the whole of this. I'm going to go to frame 1, I'm going to draw a nice giant button that covers the whole thing, and I'm going to select it and I'm going to go to 'Modify', 'Convert to Symbol', making sure it's a button symbol, give it a name, 'Button', and this one’s going to be my ClickTag. And you need to give it an instance name. We've talked about it earlier, we haven't really got into it but that button now needs an instance name, an unique name, so I'm going to call this one button green box, 'btn_green_box', call it whatever you like, and make sure there's no spaces in there.

Next thing we're going to do is, if I preview this now, you'll notice that he is covering the whole thing. You can't see any of the animation underneath, not great, so what you need to do is, you need to make it invisible, you could use the 'Alpha', problem with the Alpha going down to zero, and you publishing it, the button doesn't get clickable for some reason, so what you need to is, go and grab the Alpha, I'll switch that to 'None'. What you do is, you double click that button to go inside. I'm inside button ClickTag, and if I go to timeline - remember we got an 'Up, Over, Down.' Remember that hit area? Hit area is that invisible area where the button got activated. What you can do is click, hold, and drag the 'Up' so that doesn't appear in 'Up', doesn't appear in '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 the people but this activation area is around, so let's preview it to test it. 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 that’s the way to get started with the ClickTag. 

I'll come back to Scene 1. That's my button there. Now, it looks green, it's actually just see through, there's that green color, it's not from the button that I made. Watch this, if I go inside and make this 'Hit' area pink, and I go back here, it uses that green just to show invisibility, otherwise you'll never be able to click it. You can turn it off, just turn the eyeball off, and it'll still be in there. 

So we're going to have it selected, and now we're going to add the ClickTag to it, so this is the first part, we're going to add the code to the button. Similar to what we did before, we went into 'Window', into 'Actions'. You need to have this selected for this to work. We go to 'Code Snippets', we're going to use HTML, we're going to use 'Timeline', and use 'Go to url', no, actually we want 'Actions', then we just go to 'Web Page', like we did before. So now you can see it's using green button box, it's adding an EventList 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—The Google DoubleClick ones. We're going to use DoubleClick as an example here, so this is going to be different for every ad group, which is the pain. Once you learn yours it'll be fine, but we'll go through this example and we'll look at Sizmek, and then hopefully it will give you kind of a roundup of what you can do.

All different ad networks have help pages, and this is the one from Google DoubleClick. If you Google that, 'How to prepare HTML assets' you'll get to here as well. One of the things down here is, there’s our ClickTag guidelines. If you read through all of that, this is the thing that I actually want. That's the bit I need, so I'm going to go into my-- and I'm going to go and switch out, open window, and I’m going to grab all of that, and switch that out. Now I'm going to close it down, and that has applied the ClickTag to my document. It doesn't do anything, that's the trouble, but when you do go through quality control who do DoubleClick, they will check that you have ClickTag code embedded in there, and that will be what it's looking for.

Actually what has mine done? My actions ended up there, it doesn't really matter. I'm going to put on the first panel just to be careful. Actions that appear half way along means that they're not going to be actually produced. People that click 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 on this first part here. 

So that's the first part, now we're going to add the bits that need to go into the head. So what happens is, I go to 'File', and I go to 'Publish', and it produces-- it's produced-- These are the files that we're working on, that does not go on with it, make sure you do not upload the 'fla', it's just the JavaScript, the HTML, and the images that go along with it. So what I want to do is edit this HTML here, and I'm going to edit that in Dreamweaver, any code editor, notepad, note++, so applying anything you like, brackets, here it's Dreamweaver because I'm comfortable in here. I encode you, and what we need to do, what Google's asked us to do is we need to make sure there's something called ClickTag in here.  One thing I've noticed in here is when I named my 'fla' file, I didn't put through -- remember, this whole video I've been putting in underscores, it's for this very moment, so I've to go and put underscores in here, and it's probably going to cause me problems, I'll ignore for the moment, you just need to know that when you are naming your files and your Adobe Animate files you got to make sure there's underscores or hyphens between it because it's not going to like these spaces.

What Google has told us to do is that we need this in the head and it’s this thing here. It's going to need that as well, you might as well do that while you're here but we'll talk about that later on, it’s just the ad size so we're going to grab that-- actually no, I want all of this. So I want to know what's that, that’s the head, can you see, it opens there and the slash '/' close, I don't want that. I want this, where it opens, script, and then, closing of the script there, copy, I see that lump in there, where does it go? Doesn't really matter as long as it's before the closing of this head here. You can see in here, there's the head, so I'm making sure mine’s just before the head here. It even says, "Write your code here." So that's one of the things that I'm going to need to make this work for Google DoubleClick, and that is the ClickTag. 

Now let's look at one of the other ones, the other people that do it. So I'm going to save this one, I'm going to close it. One of the other groups are Sizmek, so this is another ad network, and they do something slightly different. They still need a ClickTag, they call it Clickthrough, so we still need a button, it still needs to be invisible. I'm going inside of it, and it's just the 'Hit' area, and you can see underneath. So what I need to do is, have it selected and go to 'Window', and go to 'Actions'. The difference in terms of this one is that Sizmek on their website have a bit of a code snippet that I can download, which is really helpful, so I got code snippets now. And with code snippets here, what you do is you go into here and there's one that says 'Import Code Snippets XML', and this is the one I downloaded from their site, and lots of the ad groups are doing it, Google DoubleClick doesn't, which is a pain, but I feel like, as this industry matures, the HTML5 and Adobe Animate matures you're going to get more and more of these, just to be able to import, they might be built in eventually.

So, we've imported it, and here it is here. I've got my button selected and I'm going to click 'Sizmek Clickthrough', double click it, and theirs is a bit more exciting, there's a lot more to it, but that's it. I've added my ClickTag, I don't have to go and copy and paste anything, that's it for Sizmek. I'm going to save it. And what they do for their HTML is, they do something slightly different. I'm going to close it down. So instead of having it open up in a code editor, what I've got-- if I go to 'File', ' Publish settings', they've got something called a template. Now that template is built into-- they've got this one here that I can import, and that goes and adds it to my HTML for me, I don't have to do anything, let's click 'Import New', and you'll find that here they got something called Adobe Animate Publishing HTML template, you import it, you hit 'Publish', and it adds it automatically.

We're going to cover some of this importing HTML things in the next video, a little bit more, so we'll talk about Sizmek again there. Now, with Google DoubleClick, we had to manually add the ClickTag code, and then the HTML, we opened that in Dreamweaver, and we had to add the code that made that ClickTag work, whereas in Sizmek, all I do is import their little template, and what happens is, when I hit publish it actually produces it for us.

All right, so that's kind of a rough overview of ClickTags. Everyone's are going to be slightly different. What will happen is, the industry kind of matures, there's going to be an universal stuff that goes along for us, or at least there'll be lots of presets built into Adobe Animate. Alright, let's go to the next video.