This tutorial will teach you how to create clickTAG enabled Flash banners using ActionScript!

Friday, 22-Feb-2019 09:32:32 EST

What is a clickTAG???

A click tracking method created by Adobe (formerly Macromedia) for rich media banners
designed with Flash. It has evolved into a pseudo industry standard over the past 10 years or so. Today it is supported by every major ad server,
so it is a must that every serious Flash designer understands how it works.

Experienced Flash designers will find implementing the clickTAG method to be fairly simple. In short, you need to insert a transparent button into
the top-most layer of your Flash banner. Then you assign the button an action with some special ActionScript code that is designed to accept a click-tracking
redirect URL as a parameter. Your button then uses that redirect URL as its link rather than having a direct link embedded inside the code.

Choosing a Flash Version

Which version of Flash should you choose? You should first check with your ad server vendor as they may only support specific versions. If at all possible, we
recommend that you choose Flash 9 or 10. According to surveys conducted by Adobe, 99.3% of users worldwide have the Flash 9 plugin while 98.7% of users have the
Flash 10 plugin
(See Reference -- June 2011).

The ActionScript Code

If you are an experienced Flash designer, you can probably skip over the tutorial below
and just grab the ActionScript code here. Normally you do not need to make any modifications to the code!
Read the notes above the code for the desired version of Flash to determine if any changes are required in order to function
correctly with your ad server.

Flash 10

This is ActionScript 3.0 code. If you name your button something other than MyClickTagButton you must edit this code to
change the button name. Also, you should be aware that Flash 10 treats the clickTAG parameter name case sensitively. Make sure to change it
if your ad server requires another variation such as clickTag or ClickTag and also verify that both
occurrences of the parameter name are exactly them same.

Flash 8 and 9

This is ActionScript 2.0 code. You should be aware that Flash 8 and 9 treat the clickTAG parameter name case sensitively.
Make sure to change it if your ad server requires another variation such as clickTag or ClickTag
and also verify that both occurrences of the parameter name are exactly them same.

The Tutorial

We have created the following three part step-by-step tutorial to walk you through the entire process from start to finish.
If you follow our instructions exactly, we guarantee that your banner will track clicks with any standards compliant ad server.
The biggest mistake that most people make is trying to "improve" the ActionScript code or they make mistakes typing in the
code which could easily be avoided by copy and pasting it.

In this tutorial we use Flash CS5.5 Professional to create a Flash 10 banner with ActionScript 3.0!

Part 1: Designing Your Banner

Before you get started with designing your banner, follow these steps to make sure that the Flash stage is set up correctly.

Click on Create New > Flash File (ActionScript 3.0) as shown in the screenshot below.

Verify that your publish settings are set to Flash 10 and ActionScript 3.0 as shown in the screenshot below.

Adjust the Width and Height of the Flash stage area to 728 x 90 px as shown in the screenshot below.

At this point, you are ready to proceed with designing your banner. When your banner design work is complete,
proceed to the next set of steps to implement the clickTAG button.

Part 2: Implementing the clickTAG

Now that the design work on your banner is complete, follow these steps to implement the clickTAG button.

Right click on Layer 1 (or your topmost layer) and then click on Insert Layer as shown in the
screenshot below.

Select the Rectangle Primitive Tool from the toolbar as shown in the screenshot below.

Using the Rectangle Primitive Tool, draw a rectangle of the same size on top of your banner in the
New Layer that you just created. Then use the rectangle properties view to change both the Stroke Color
and Fill Color to white and set their Alpha to 0%. Doing this will make your rectangle
completely transparent as shown in the screenshot below.

Right click on your transparent rectangle and then click on Arrange > Bring to Front as shown in
the screenshot below.

Right click on your transparent rectangle again and then click on Convert to Symbol... as shown in
the screenshot below.

Enter MyClickTagButton for the name of the button as shown in the screenshot below.

Right click on your rectangle, which is now a button, again and then click on Actions as shown in the
screenshot below.

Next click on the Code Snippets button as shown in the screenshot below.

Select Mouse Click Event from the Event Handlers category and then press the
Insert button as shown in the screenshot below.

Replace the automatically generated ActionScript code with the following code.
Normally you do not need to make any modifications to the code! However, if your ad server
requires the button to use a parameter other than clickTAG you will want to change that.
Flash 10 is case sensitive so clickTAG and clickTag are not the same!
You must change both occurrences of clickTAG to match exactly what your ad server requires.

Close the dialog shown below after you have copy and pasted
the ActionScript code from above into it.

Part 3: Publishing the Banner

Click on the File menu and select Export > Export Movie... as shown in the screenshot below.

Enter a File Name for your Flash banner and then press the Save button as shown in the screenshot below.

At this point, you are ready to set up your published SWF file as a Flash banner in your ad server. Congratulations!

If you wish, you may download the FLA and SWF files that we produced while creating this tutorial.

Part 4: Troubleshooting

Case Sensitivity

Flash 10 treats the clickTAG parameter name case sensitively. If you did not copy and paste the ActionScript code,
verify that all occurrences of the parameter name are spelled exactly as clickTAG and if that does not work try a different
capitalization. The standard is to use clickTAG, but your ad server might use clickTag, ClickTAG, ClickTag
or some other variation. Make sure to change every occurrence of the parameter name in the ActionScript code though as they
must all match exactly to work properly!

Embedded URLs

Another common mistake is to replace "http:" in the ActionScript code with a link. The purpose of that code
is to verify the protocol of your link is HTTP. That is necessary to prevent your banner from being utilized in cross-site
scripting attacks, so you definitely don't want to alter or remove that! Where your link actually goes is in your ad server,
which will dynamically inject the link into the banner at the time of serving. No link(s) should ever be embedded in the Flash banner
directly!!!

Pop-up Blocking

Did you export the SWF file for your banner for Flash 7 or older by mistake? Internet Explorer versions 7+ when used with Flash plugin
version 10 do not permit SWF files exported for those older versions to use _blank for the target frame. They are considered to
be pop-up windows and blocked. The only workarounds are to use _top for the target frame or to export the SWF file for Flash 8 or higher.
However, this is a tutorial for Flash 10 so you should not be exporting your SWF file for such old versions!