Web Ads with ClickTags

April 10th, 2009 by Unknown Morphician

When creating web ads for third party companies, you maybe asked to add a clickTag,
a reference to an external variable. The variable is passed from within the html Object/Embed tags via query string or FlashVar parameter. This allows an ad manager to track the click-through of the
Flash SWF. Usually, the ad manager would create an ad server value with the target url address. As the developer, you need to reference this variable from within your project.

Let's walk though a solution for building a Flash ad (in AS 3.0) with a clickTag. Note: In most cases, ad companies and developers are required to use AS 2.0. There are plenty of great articles that discuss this implementation. There is an adobe article that is widely used Designer's Guide: Building Macromedia Flash Banners with Tracking Capabilities. This article will not discuss this how to create ads with clickTags using AS 2.0 .

The ad manager will also want to prevent the click-through target from being blocked by any
popup blockers. This usually the case with certain web browsers like IE 7.0+. Note: At this
time there is a new Flash player version out (version 11). I don't know if this issue is fixed.

So we have three requirements …

  • Get a reference to the clickTag variable

  • Build your web ad with AS 3.0

  • Handle the issue with the Popup Blockers

Here is an example of code for satisfying these requirements.

html embed parameter
...
<param name="FlashVars" value="clickTag=http://www.adserver.com/target.php?track=1123" />
...

actionscript code


package
{

import flash.external.ExternalInterface;
import flash.net.navigateToURL;
import flash.net.URLRequest;

public class Main extends MovieClip
{
  private var paramList:Object;
  public var clickTag:String = ""; 

  function Main()
  {
    paramList = this.root.loaderInfo.parameters;

    if(paramList["clickTag"] != null)
    {
        clickTag = paramList["clickTag"];
    }

    clickTagBtn.addEventListener(MouseEvent.CLICK, onClick);

  } 

  function onClick( event:MouseEvent ):void
  {
    if( clickTag != ""  )
    {
      var req:URLRequest = new URLRequest(clickTag);

      if ( !ExternalInterface.available )
      {
        navigateToURL(req, "_blank");
      }
      else
      {
        var strUserAgent:String =
          String(ExternalInterface.call(
		"function() {return navigator.userAgent;}"
		)).toLowerCase();

        if ( strUserAgent.indexOf("firefox") != -1 )
        {
          ExternalInterface.call( "window.open", req.url, "_blank" );
        }
        else
        {
          if( strUserAgent.indexOf("msie") != -1 &&
            uint(strUserAgent.substr(strUserAgent.indexOf("msie") + 5, 3)) >= 7 )
          {
            ExternalInterface.call("window.open", req.url, "_top");
          }
          else
          {
            navigateToURL(req, "_top");
          }
        }
      }
    }

  }

}

}

I am assuming that you are using Flash CS 3 or greater and that Main is your document class for your fla project.

First I need to get the get the value of the clickTag.

  • Reference the loaderInfo.parameters as an Object and then reference the key value of clickTag.

  • The character's case is very important. Letter case is important, otherwise you won't be able to reference this value.

The key to handling the issue with popup blockers is to use a little javascript, with the help of External interface.

  • If ExternalInterface is not available, use NavigateToUrl directly.

  • Get the userAgent (browser) information via javascript. I use this info to handle browser different quirks.

  • Call the javascript method window.open to open the link specified by the clickTag value. It is absolutely necessary to enable AllowScripting for “sameDomain” or “always” . Otherwise a security sandbox error will display.

This solution should get you out of most jams in regards to ClickTag functionality using AS 3.0 .

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Fark
  • LinkedIn
  • Live
  • Reddit
  • Slashdot
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • RSS
  • email

2 Responses to “Web Ads with ClickTags”

  1. [...] > The Morphic Group » Web Ads with ClickTags [...]

  2. [...] data passed from the swf’s object embed tag. So, my thanks to the Morphic Group for posting their solution and saving me a whole bunch of [...]

Leave a Reply