Gene Lu

clickTag in a Flash
Wednesday, 02 April 2008

Are you having trouble adding clickTag code to your Flash files? If so, you've come to the right place. Here's a run through for people (usually 3rd parties creating Flash ads for companies) to adding the clickTag code to their files.

Inserting the Code
There are some variations in inserting the code when it comes to the version of Flash that's installed on your machine. To quickly clarify, Flash 8.0 uses ActionScript 2.0 and Flash CS3 uses ActionScript 3.0.

So which actionscripting version does your file use? 
1. ActionScript 2.0
2. ActionScript 3.0

clickTag for ActionScript 2.0

Before starting any work, make sure to back up your file. :)

How it Works
After you've created your flash piece, you need to add clickTag code so that the company (that you are doing the ad for) can track ad clicks. From what I know, the code that you will be inserting will interact with the system that's tracking the clicks. This means that you don't need to modify the code that you'll be attaching in any way. Here's the piece of code you'll be adding (Update [11/13/2008]:  The "if" statement has been commented out since some have been experiencing problems when exporting their Flash ad.)

on (release) {
    // if(_level0.clickTag.substr(0,5) == "http:"){
        getURL(_level0.clickTag, "_blank");
    // }
}

Ahh yes, I know it looks VERY tempting to enter in a full URL into that 'if' statement, but DON'T! If you modify this code, kiss your ad tracking capabilities goodbye. The destination URL will be supplied to the ad trafficker so no worries.  I will not go into the detail as to how this code works because I'm sure all you want to do is to get the code working and sent off to your client, right? Well, let's get to it!

1. Open your file and save it as Flash 8 Document. This will allow you to add the on(release) behavior to the invisible button that will sit on the top-most layer of your movie.

Step 1: Save your file as Flash 8 Document
Step 1: Save your file as Flash 8 Document

2. After saving your file as a Flash 8 Document, view your file (the snapshot shown below is for sample purposes only).

Step 2: This is the sample file we are working with
Step 2: Snapshot of the sample file we'll be working with

Step 3: Add a new layer to the timeline
Step 3: Add a new layer to the timeline

3. Go to your timeline (located up top) and add a new layer called "clickTag".

4. With your new layer ("clickTag") selected, drag a new quadrilateral (square, rectangle, etc.) over the entire stage. The image below shows the steps to dragging a rectangle starting from the top left to the bottom right. The 4th frame in the image below may vary depending on the color you have selected in your color toolbox.

Creating a quadrilateral that covers the entire stage
Creating a quadrilateral that covers the entire stage

5. Once the quadrilateral has been created, double click the box (make sure you include the stroke around the shape you just created, if there is one) and go to "Modify" and then "Convert to Symbol".

Convert the quadrilateral to a button symbol
Convert the quadrilateral to a button symbol

6. Name the new symbol "clickTag" and make sure that radio button labeled "Button" is selected and click "Ok".

Labeling the new symbol and making sure that it's a Button symbol
Labeling the new symbol and making sure that it's a Button symbol

7. Once your button has been created, double click (or right click and select "edit in place") the button to edit it in place. You will now see your timeline display the Up, Down, Over, and Hit frames.

8. Now click once on the "Up" state frame and then click and drag it over to the "Hit" frame.

Step 8: Your button frames (Up, Over, Down, Hit) should look like this
Step 8: Your button frames (Up, Over, Down, Hit) should look like this

9. Once you've completed step 8, go back to the main stage. You'll now notice that your button has taken on a blue-ish tint. For the Flash noobs, this tint denotes the active (aka clickable) area of the movie. Don't worry, there's nothing wrong with your computer. :)

Step 9: Your button is now a blue-ish tint
Step 9: Your button is now a blue-ish tint

10. Now click on the blue-ish tinted button and open your Actions panel. To open your Actions panel, click on "Windows" in the upper toolbar and scroll down to Actions.

Step 10: Opening up the Actions panel
Step 10: Opening up the Actions panel

11. Once your Actions panel is open, make sure that the blue-ish button on your stage is selected. Now copy and paste the following clickTag code into the Actions panel (Update [11/13/2008]:  The "if" statement has been commented out since some have been experiencing problems when exporting their Flash ad.):

on (release) {
    // if(_level0.clickTag.substr(0,5) == "http:"){
        getURL(_level0.clickTag, "_blank");
    // }
}

Step 11: Adding the Code to the Actions Panel
Step 11: Adding the Code to the Actions Panel

12. Ok, you're finally at the home stretch. After adding the code to the button, export the movie and make sure that ActionScript version is set to ActionScript 2.0.

Exporting your movie
Exporting your movie. Make sure you have ActionScript version set to 2.0.

VOILA! You're all done. Now if you are still having trouble, you can either try the steps above again, try the clickTag steps for ActionScript 3.0 (listed below), or post a comment with your concerns. I'll try my best to answer all questions.

 

clickTag for ActionScript 3.0

Here are instructions from Devin at Wohler that have seemed to work with past clients. Thanks Devin!

1. Select the button object on the stage that you wish to use and in the properties panel assign it an instance name (empty by default)

2. Since you can’t directly apply actionscript to an object with 3.0, you must select the first frame of a layer on the main stage (ideally the layer containing your button) and in the actionscript panel insert this code, replacing the variable “myButton” with the button’s instance name you assigned.

var request:URLRequest = new URLRequest(root.loaderInfo.parameters.clickTag);
myButton.addEventListener(MouseEvent.MOUSE_UP, tracker);
function tracker(event:MouseEvent):void {
            navigateToURL(request, "_blank");
}

In a nutshell the first line of code retrieves the http link from the site the flash is in and creates a url variable, the second line executes the last when the button is clicked on, and the third line actually sends the browser to the url variable created by the first line."

 

Other Interesting Links on Tracking Flash

http://analytics.blogspot.com/2008/11/want-to-track-adobe-flash-now-you-can.html
A simplified solution for tracking Flash content for everyone, called Google Analytics Tracking For Adobe Flash.

Marshall
clickTag concerns I received the following code from my client:
on (release) {
getURL(clickTag, “_blank”);
}
I'm using Flash CS3 and this gives an error no matter how I try to add this code.
My question is should I simply use what Devin shows on your site for 3.0 in one layer, then set a separate layer for the "linking"navigateToURL script? It seems odd that I can't make one full set of code to both track the ad and navigate to the new page after clicking. Any help is so appreciated. Thanks.
Joppe
Hi!
Actions on button or MovieClip instances are not supported in AS3. on (release) will only work in AS2. Use a listener on the button to do this in AS3.
Gene
replies... @Marshall
Joppe is right, you cannot use the on(release) behavior in AS3. In Flash CS3, actionscript was updated to version 3.0 and one of the updates included phasing out on(release) behaviors for buttons.

There are two routes you can take (which you can send both to your clients to see which works):

1. Ignore the clickTag code that your clients gave you and follow the clickTag insertion code for AS3 as suggested by Devin in the instructions above.

OR

2. Replace the on(release) clickTag code that your clients gave you

(on (release) {
getURL(clickTag, “_blank”);
}

with the following (as suggested in the instructions for AS2 above):

on (release) {
if(_level0.clickTag.substr(0,5) == "http:"){
getURL(_level0.clickTag, "_blank");
}
}

And then follow the rest of the instructions. Please note that you will be reverting the file back to AS2 in order to use the on(release) behavior.

Hope this helps!
Gene
Marshall
clickTag worked perfectly with So, for those clickTag rookies like myself, you only need to add the code that Devin supplies above for Action Script 3.0. This code provides both the navigation information and the tracking information. Don't worry about the client seeing the linked URL before testing. Anyway, this is the right code and the only code as he mentions that needs to be used in the file for the button that will be clicked. Thanks for everything.
JD
finally! Thank you very much! I emailed, chatted with Google, to no avail. I 'googled' clickTag and found this site and VOILA! Finally.

My suggestion to Google Adwords was that they put a source .fla file into their help area. One that could be tweaked by aggravated Flash designers. :-)

Thanks again.
Gene
Re: finally! Hey JD,

That's a good idea with the .fla file. I'll look into updating this entry with a source file with a simple example of the code embedded onto a button/movie/etc for people using AS2 and another example using as3.

Thanks,
Gene
Post a Note
Name:
Website:
Title:
 
Security Image

Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved.