A case-insensative clickTag for Flash banners

Feature image

If you make Flash banners that run across multiple media sites, the lack of a standard "clickTag" can be a huge pain. (What's a clickTag? Read here.) Some media sites use clickTag. The version with that is all lower-case except for a capital T seem seems to be the most common form, but there are sites that use clickTAG, clicktag, or CLICKTAG. What that means is that you can end up creating multiple versions of a banner just to deal with the difference in how the word "clickTag" uses capital and lower case letters on the various media sites your banners will be running on. With a large media buy, that can easily double or triple the number of files you need to keep organized.

There is a solution to handle multiple clickTag versions in a single banner. It's good for Flash developers plus the people who have to keep track of them for delivery.

I did not come up with the code you'll see below, but it's really helpful so I want to get it spread around. (Be sure to read the updates at the end of this post.) There is an AS2 version and an AS3 version. Both do basically the same thing. The code looks through all the root variables, converts each of them to lowercase and then tries to match the word "clicktag" and then assigns the click thru URL. Be sure to check out the original posts for a fuller explanation.

First up, the AS2 version. It's from http://help.mfazio.com/. In the original post, you'll see 2 versions of how to handle this in AS2. I've included the one I've tested.

// AS2 version of a case-insensative clickTag

// loops thru parameters in this, and tries to match to "clicktag"
function findClickTag():String
{
	for (param in this)
	{
		var tagToLowerCase:String = param.toLowerCase();
		if (tagToLowerCase == "clicktag")
		{
			if (isValidURL(this[param]))
			{
				return this[param];
			}
			return defaultURL;
		}
	}
	return defaultURL;
}

// if String has "http:" return true, else false
function isValidURL(param:String):Boolean
{
	if (param.substr(0, 5) == "http:")
	{
		return true;
	}
	return false;
}

// assign a default value if you want
var defaultURL:String = "http://yourTargetWebSite.com";
// assign the clicktag to a new variable
var clickTagURL:String = findClickTag();
assignCta();

// Last assign your cta / clickthru / action button that uses the clickTagURL variable
function assignCta()
{
	mybutton.onRelease = function()
	{
		getURL(clickTagURL, "_blank");
	};
}
Be sure to update the defaultURL to the site you're expecting the banners to click through to.
 
This code assumes you have a movieClip, probably with it's alpha set to zero, on the top level of your FLA. You must name this movieclip "mybutton" or change the above code to reflect the name of your movieclip. The AS3 code below assumes the same thing.
 
Now let's go over the version for banners coded in AS3. It originally comes from flashmagazine.com. Read the original article for a good rant on the lack of standard clickTag's and a great explanation of hand the code works.
// AS3 version of a case-insensative clickTag 

mybutton.buttonMode = true;

mybutton.addEventListener(MouseEvent.CLICK,handleClick);

function handleClick(mouseEvent:MouseEvent):void {
     var interactiveObject:InteractiveObject = mouseEvent.target as InteractiveObject;
     var li:LoaderInfo = LoaderInfo(interactiveObject.root.loaderInfo);
     var url:String;

     for (var i:String in li.parameters) {
          if (i.toLowerCase() == "clicktag") {
               url = li.parameters[ i ];
          }
     }
     if (url) {
          if (ExternalInterface.available) {
               ExternalInterface.call('window.open',url);
          } else {
               navigateToURL(new URLRequest(url),"_blank");
          }
     }else {
	// you could navigate to a default URL here instead of trying to output a console error statement
	if(ExternalInterface.available) ExternalInterface.call('console.log', "ClickTAG: Couldn't find a valid clicktag variable");
     }
}
Pretty handy, right? 
 
Update: Not so fast, says Yahoo!  I shipped out a series of AS2 banners using the code first mentioned here. All went smoothly except for when going through the Yahoo! network. They kicked the banners back. They didn't like that there was a fall back URL embedded in the banners. They needed their version of clickTag, which is clickTAG, on a button instead of a movieclip. The technique above has a movieclip as the receiver of the a user's click. I updated the banners using the Yahoo! spec and sent them off again. I know there's a way around there issues as well, but in the time crunch, I just did as they asked. So, basically, your results may vary. Let me know if you have a better solution.
 
Update 2: Yahoo! and their Network of sites have conflicting standards. I've got another update to the previous update on the Yahoo! banners. It turns out the clickTAG code which they requested be put on the banners wasn't working on all the sites they served. The code Yahoo! asked to be on the buttons did a similar thing that line 24 does in the AS2 code I've shown above. It validated that the URL being passed in actually had 'http:' at the beginning. The Yahoo! code also tested for 'https:', which is probably a good idea as well since some banners may potentially need to click through to a secure site. This is done in order to prevent someone using a banner to used to execute JavaScript or some other non-http request. The problem was that by including that check, some banners weren't clicking through on one of the media sites. The test failed and the banners were basically unclickable. Taking out that test, made the banners click through properly.
 
The reason I think the test failed was because the URL being passed into the banners began with 'http%3A//' instead of 'http://'. A percent sign followed by a 3 and the letter A is equivalent to a colon when the string is URLEncoded. It seems like this would make the of the click through URL fail within the banner and make the banners not actually click through to the correct destination. Since I didn't have time or access to the Yahoo! team, I wasn't able to confirm this as the reason to the failure though.

Comments on this post.

if (clicktag != undefined)
  {
      getURL(_root.clicktag, “_blank”);
  }
  else if (_root.clickTag != undefined)
  {
      getURL(_root.clickTag, “_blank”);
  }
  else if (_root.clickTAG != undefined)
  {
      getURL(_root.clickTAG, “_blank”);
  } // end else if

By Callud on Nov 28 2012

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.