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 several years and is today supported by every major ad server.

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.

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. According to surveys conducted by Adobe, 99.3% of users worldwide have the Flash 9 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. Do not make any modifications to the code! It requires absolutely no changes to function correctly. It should be copied and pasted into your banner exactly as it appears.

on (release) {
  if (_root.clickTAG.substr(0,5) == "http:" || _root.clickTAG.substr(0,6) == "https:") {
    getURL(_root.clickTAG, "_blank");
  }
}

on (release) {
  if (clickTAG.substr(0,5) == "http:" || clickTAG.substr(0,6) == "https:") {
    getURL(clickTAG, "_top");
  }
}

The Tutorial

If that makes no sense to you, don't worry! 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.

In this tutorial we use Flash CS3 Professional to create a Flash 9 banner with ActionScript 2.0!

A new version of this tutorial for Flash CS5.5 Professional to create a Flash 10 banner with ActionScript 3.0 is available here: https://www.flashclicktag.com/

Part 1: Designing Your Banner

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

1. Click on Create New > Flash File (ActionScript 2.0) as shown in the screenshot below.
   
   
   
2. Click on the Size button as shown in the screenshot below.
   
   
   
3. Enter the width and height of your banner in pixels as shown in the screenshot below.
   
   
   
4. 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.

1. Right click on Layer 1 (or your topmost layer) and then click on Insert Layer as shown in the screenshot below.
   
   
   
2. Select the Rectangle Primitive Tool from the toolbar as shown in the screenshot below.
   
   
   
3. 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 Opacity to 0%. Doing this will make your rectangle completely transparent as shown in the screenshot below.
   
   
   
4. Right click on your transparent rectangle and then click on Arrange > Bring to Front as shown in the screenshot below.
   
   
   
5. Right click on your transparent rectangle again and then click on Convert to Symbol... as shown in the screenshot below.
   
   
   
6. Enter clickTAG_button for the name of the button as shown in the screenshot below.
   
   
   
7. Right click on your rectangle, which is now a button, again and then click on Actions as shown in the screenshot below.
   
   
   
8. Copy the ActionScript code below for the minimum version of Flash you intend to publish the SWF file for the banner. Which minimum 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. According to surveys conducted by Adobe, 99.6% of users worldwide have the Flash 9 plugin (See Reference -- June 2011).
   
   Do not make any modifications to the code! It requires absolutely no changes to function correctly. It should be copied exactly as it appears.

   Flash 8 and 9

   This is ActionScript 2.0 code. Do not export your SWF file for Flash 10 or use ActionScript 3.0 as they are not compatible with this method of creating a clickTAG button. Also, you should be aware that Flash 8 and 9 treat the clickTAG parameter name case sensitively. Make sure to change them if your ad server requires another variation such as clickTag or ClickTag and also verify that all occurrences of the parameter name are exactly them same.

   on (release) {
     if (_root.clickTAG.substr(0,5) == "http:" || _root.clickTAG.substr(0,6) == "https:") {
       getURL(_root.clickTAG, "_blank");
     }
   }

   Flash 4, 5, 6, and 7

   This is ActionScript 2.0 code. It is no longer recommended that you export your SWF file for these older versions of Flash. Should it be required for you to do so, however, it is important not to use _blank for the target frame to open a new browser window. Internet Explorer 7+ when used with the Flash 10 plugin will incorrectly block your clickTAG as a popup due to backwards compatability problems with the new Flash security model, so you must use _top as is shown.

   on (release) {
     if (clickTAG.substr(0,5) == "http:" || clickTAG.substr(0,6) == "https:") {
       getURL(clickTAG, "_top");
     }
   }

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

Part 3: Publishing the Banner

1. Click on the File menu and select Export > Export Movie... as shown in the screenshot below.
   
   
   
2. Make sure your publishing settings appear as shown in the screenshot below. In particular the minimum Version of the Flash player to require should match the one of the ActionScript code you chose to assign to the button. Most of the other settings can be changed at your discretion, but enabling compression is generally recommended.
   
   
   
3. At this point, you are ready to set up your published SWF file as a Flash banner in your ad server. Congratulations!

Part 4: Troubleshooting

Case Sensitivity

Did you export the SWF file for your banner for Flash version 8 or 9? These versions of Flash treat 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 version 4, 5, 6, or 7? Internet Explorer versions 7 and 8 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 9.