Join Anastasia McCune for an in-depth discussion in this video Using ActionScript options for click capture and tracking, part of Best Practices for Flash-based Banner Ads.
We've made our banner ads such that when someone clicks on the ad, they're taken to a URL that we specify in our ActionScript. Sometimes ad serving companies want you to do something a little different when defining that URL, in order for them to be able to accurately track the number of click-throughs your ad receives. Let's look at our ActionScript that we have written so far on Frame 1. So we will open up our Actions panel, and the way we've set up our ad is by using direct linking, and indeed, we just pretty much straight out in the code say what URL we want our users to be directed to when they click the ad.
So instead of direct linking, we could instead use the click tag method, which again is sometimes desired by ad serving companies to track the number of clicks. There's two places we need to focus on to use click tag: the HTML code that embeds the Flash file and the ActionScript itself. So let's first look at the HTML. If you haven't done this already, go to your File menu in Flash and choose Publish Settings. Make sure that the HTML box is checked and then hit Publish, then OK. Now let's open up our HTML file that we just created in Dreamweaver.
So I am going to go to my file explorer, there is the file that I just created, and I am going to open it up in Dreamweaver. So see the spot right here where it says param name = "movie" and then says exploreCalifornia.swf? We're going to add just a small adjustment to this. Now, there's actually three places that we need to have this code, so I am going to copy and paste it. I am going to scroll down a little bit, here is the second spot right here, and here's the third spot right here. Now go ahead and Save.
Now, let's go back to Flash and open up our ActionScript on Frame 1. Here is our existing event handler for when the invisible button is clicked. Let's copy the entire event handler and paste it below. Then we'll comment out the first event handler so we can preserve our code that works for direct linking. We need to make just a few adjustments. First, let's define a variable and we will call it clickTAG. We will tell it to grab the value of clickTAG passed in by the HTML. It's looking for the parameter called clickTAG.
Now, on the next line of code we need to replace the spot where we're direct linking to exploreCalifornia.org with the value that was passed into clickTAG. So we do that just by replacing this code here. And that's it. Let's save our movie and then hit Ctrl+Enter to test. Remember that this ad isn't much to look at yet. We only have a gray border, an invisible button, and a guide image that doesn't appear in the SWF, because it's in the guide layer; however, we can still click the ad. And guess what? When we click on the SWF here by itself we get an error, and we can see that here in the Output panel. It's telling us the parameter URL must be non-null.
Flash is telling us that it doesn't know what the URL we wanted to send people to is. That's because here we are looking at the SWF directly. What's missing is the info passed in by the HTML. So now, let's go back to our file explorer and open up the HTML file in our browser. Our ad appears and when you click, yup, a new browser window opens with exploreCalifornia.org inside. The URL was successfully passed from the HTML file to the Flash. There is one other thing we can consider doing to make sure our clickTAG is super safe and is going to work well in Flash.
I am going to open up my Actions panel and let's write an if statement around our navigateToURL line of code. Basically we're going to check and make sure that the first five characters of the parameter passed in by the HTML file is HTTP:. If the first five characters aren't HTTP:, then the navigate to URL line of code that opens up the new browser window will never fire. We do this because a misconfigured click tag can be used as a security hole in order to gain access to the HTTP cookies used by ad serving providers.
Basically it can allow your ad to be hijacked. So here, just above the navigateToURL line is where I am going to type my if statement. Now we are going to type clickTAG.substr and put in 0 and 5. Basically we are telling it to start at the H and count five characters in. Let's hit Ctrl+Enter to republish our SWF. Now, let's go back to Dreamweaver and make sure our code changes our working by messing up the URL and clickTAG. Let's add an extra character to HTTP.
So I am going to do this in three places. I am going to then add an extra P here, add an extra P here, and the a third one here, and save the file. Now let's go back to our browser and test. I am going to hit Refresh so our changes load in and I'll click the ad. And indeed nothing happens. Our code is working. The first five characters aren't HTTP:. So now let's go back to Dreamweaver and fix that code. We are going to take out the extra Ps.
Let's save the file and test one more time. Let's go back to our browser, hit Refresh one last time, and now click the ad. And it worked. The new window opens with exploreCalifornia.org in it and our clickTAG is properly configured and is now being passed successfully from the HTML to the SWF file and we are sure that the first five characters in the URL are HTTP:. For ease of our upcoming development let's use the direct linking method. So you can either comment out all this code that we just wrote and uncomment this here and undo the changes that we made to the HTML file.
Or you could just save and close and start the next chapter fresh by using the FLA provided in the Start folder. Whether you need to use clickTAG or not is going to be dependent on your publisher, so be sure to check with them or whoever's managing your ad account to find out. Sometimes you are asked to develop banner ads in ActionScript 2 instead of ActionScript 3. The code to implement both direct linking and clickTAG is different in ActionScript 2 than what we just did in ActionScript 3. So for your convenience example files for both methods are provided for you in the Chapter 4-4 end folder should you need them for ActionScript 2.
- Understanding terminology
- Gathering requirements
- Understanding whether to use Flash or HTML5
- Setting up an ad and using guide layers
- Adding clickability
- Optimizing images and text
- Publishing final files and images
- Creating input text fields
- Creating a print job
- Handling print errors
- Tweening between collapsed and expanded states
- Adding timeline control
- Addressing security issues