clickTAG in Adobe Flash AS2 and AS3

26Feb11

Working for a internet company that runs several ads on Google daily and other ad networks constantly, I’ve ran into a few issues when I was starting out…. Here is to hoping you see this post before you’re on a deadline.

First of all… different ad agencies run their ads differently. And they all have their own set of specifications to follow when designing the ads.

But for now, I’m just going to focus on Google.

Here is a link to the source from Google: Google Ad Format Technical Guidelines

But if you want a condensed version, just for Flash ads, keep reading.

First, some basic information about Flash ads:

• Ad format:
  • 300 x 50 Mobile leaderboard
  • 468 x 60 Banner
  • 728 x 90 Leaderboard
  • 250 x 250 Square
  • 200 x 200 Small square
  • 336 x 280 Large rectangle
  • 300 x 250 Inline rectangle
  • 120 x 600 Skyscraper
  • 160 x 600 Wide skyscraper
• File size: no more than 50K
• Animation length: maximum of 30 seconds (at a 15-20 fps frame rate)
• Flash versions: Flash Player version 4-10.
• ActionScript versions: ActionScript 1-3
• And finally, and the main point of this tutorial: ClickTags: clickTAG variable should be supported by any ad. The clickTAG is the tracking code assigned by Google to an individual ad and helps advertisers determine the effectiveness of their campaign.
  • On any click, Flash ads should redirect to the URL specified in the clickTAG argument
  • The variable name must be spelled “clickTAG” (upper-case TAG; no space between click and TAG) and not “click tag,” “Click Tag,” or any other form.ClickTAG parameter code for ActionScript 2:
    

    on (release) {
    if (clickTAG.substr(0,5) == “http:”) {
    getURL(clickTAG, “_blank”);
    }
    }

    ClickTAG parameter code for ActionScript 3:

    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    // ……
    someButton_or_displayObject_to_receive_mouseClick.addEventListener(
    MouseEvent.CLICK,
    function(event: MouseEvent) : void {
    flash.net.navigateToURL(new URLRequest( root.loaderInfo.parameters.clickTAG), “_blank”);
    }
    );

    IMPORTANT: Don’t forget to replace someButton_or_displayObject_to_receive_mouseClick with the actual name of button that will receive the click.

    Note that it’s not necessary to specify the destination URL for the ad anywhere in this code; this is taken care of through the usage of clickTAG. Also, depending on the structure of your Flash ad, it may be necessary to prepend “_root.” or “_level0.” to “clickTAG” above, resulting in “_root.clickTAG” or “_level0.clickTAG”. It is strongly recommended to upload the ad into your account and verify that the ad is behaving normally prior to it going live, allowing time for any necessary changes.

OK so, where does this code go?

1. Create a new layer.

2. Name it “clickTAG”

3. Click on the first frame of the new layer – Take the rectangle tool and make a rectangle that covers the whole ad.

4. Convert the rectangle into a symbol. Right click and choose “convert to symbol”

5. Make it a “button” and name it clickTAG.

6. Now click on the symbol you made and then in the tool box, change the alpha to 0%

7. Now this is very important! (This is where I screwed up when I was starting… )don’t put the actionscript in the keyframe! You’re going to put the code DIRECTLY on the button symbol. Lock all other layers so that only the button symbol is selectable. Right click the button symbol on the stage and choose “actions”.

9. Depending on the version you are using, paste the code from above in the actions section. Check for errors.

10. Don’t forget (if you are using AS3) to change “someButton_or_displayObject_to_receive_mouseClick” to the button name “clickTAG” or whatever you named the rectangle.

I know this may seem very basic, but it was something I was unaware of when I was just beginning. I hope it is helpful. And if not, I would appreciate suggestions for future tutorials, as I find that’s the hardest part and the reason there are so few…

If you did find this helpful and would like to endorse me for Adobe Flash or Actionscript on linkedin you can do that here: http://www.linkedin.com/in/jenifrei/
I’d really appreciate it! Thanks for reading!

Filed under: Tutorials   |  2 Comments
Tags: Actionscript, Ad Format Technical Guidelines, Adobe Flash, Banner Ads, Click Tag, Clicktag, ClickTags, Flash Ads, Flash CS4, Flash Specifications, Google, Google Flash Ads