Please be aware that this tutorial is intended for intermediate-to-advanced ActionScript programmers and designers. It is therefore assumed that you have a competent understanding of the underlying principles and specifics of both versions of ActionScript. I cannot respond to all questions regarding this code. So, please assume that you are on your own. Notes, instructions, and any relevant documentation has been included in the FLA files. Also, you will need Flash CS3 or CS4 to read the source files included in this tutorial.
Q: How do you get Google’s adWords program to support ActionScript 3?
A: You don’t… well, sort of.
Recently I needed to create some banner ads of varying sizes that could be injected into Google’s adWords ad-delivery system. I diligently went to the link Google provides with the ad specs and read up on what sizes and formats were acceptable by Google.
I guess I should have read a little more carefully because I blithely created all my ad banners in AS3, assuming that since AS3 is more than four years old, it would be supported by Google. I use AS3 exclusively now because it is much more object-oriented and it uses an event-based architecture and offers me far more options than does the older, slower, less-efficient AS2 (ActionScript 2).
After I coded all of my banners, I submitted them to Google for approval and testing. The banners were pretty simple in architecture, so I figured they would be relatively trouble-free. Wrong. I received an email from my Google ad rep saying their system was rejecting the SWF banners… The reason (as you may have already guessed)? Their system does not currently support AS3, and there is no projected date for supporting it.
Let me just say that I have always thought of Google as being a bit more on the cutting edge of technology than they turned out to be. When I say “cutting-edge”, I am not referring to the any of the latest-and-greatest technology. To me, this is what I would consider “bleeding-edge” technology. This is where the pioneers and beta-testers live. So, since AS3 is no longer bleeding-edge technology, I just assumed they were currently supporting it. Well, they don’t support it now and they do not have a plan to support it any time soon.
What to do?
So, rather than hurl myself off my chair, or spend hours recoding my ActionScript code into AS2, I decided to try and create a work-around that would allow me to submit a Flash AS2 SWF that would meet their restrictions, but would still allow me to leverage all of the goodies in an AS3 SWF for my client.
What I ended up creating was essentially a “lifejacket” for my ActionScript code: I created an AS2 SWF that acted as a loader and clickTAG value-passer to an AS3-based SWF that would be loaded into the same security domain and replace the older, AS2 SWF.
It was a bit tricky since Google has all kinds of code and function-call restrictions. They basically filter your SWF and look for any potentially “offensive” code. Hey, I completely understand the need to control the content that you are distributing for people… but there must be a better, more efficient way of handling this. Their current system needlessly punishes those of us who have a legitimate, innocuous use of more advanced functionality. Because of this fear of abuse, we the designers and programmers all have quite a few hoops to jump through to keep our work fresh and relevant. Besides, all of the ads require pre-approval of content before they can ever be launched, disseminated, or viewed by anyone so the chances of getting anything by Google (unless they just aren’t paying attention) are pretty much zero.
WARNING: Be careful what you try to build into your AS3 code. Never forget that Google has to approve your ad and if they do not think it is appropriate, at any time, working-or-not, they will shut it down, delete it, or just completely ban you from using their adWords service.
Okay, so I created my AS2 code to load in my AS3 code and run in the same domain, thereby meeting all of Google’s criteria and also my own. It really worked!… well, sort of. It was not a perfect solution yet. Google’s supplied “clickTAG” value was getting chewed up somehow in transition and so the ad was not going to the destination URL that it was supposed to go to. The new ad failed Google’s testing.
The Final Solution
I ended up solving my problems like this…
1. I placed Google’s clickTAG AS2 code into the first frame of an empty movieclip. This would act as my “button” for Google, but would not really be used, but it would allow any code search by Google to come up as successful.
2. I then had to create a URL string from some ascii character codes, since Google does not like to see URL prefix “http://” in their code. They are worried you will circumvent their pay-by-the-click system. I say, if you are willing to submit your source code to them and to be held up to scrutiny, then you should be able to include code like this, but they have a more binary policy. It is either acceptable or not. As long as you are not doing something malicious, there should be no problem. But beware those who have not-so-good intentions. Google isn’t a huge mega-corp for no reason. They could squash you, so be careful!
3. Once I programmatically created the URL string and captured the value of the clickTAG variable, I used a function to change all of the offending URL characters to something that could be passed along with the URL and would not be encoded, converted, or altered on its way to the newly-loaded AS3 SWF.
4. After the replacement SWF was loaded, I then used a regular expression (RegExp) and put back, all of the offending characters from the Google URl so it would now be functional again. [exoboy’s note: regular expressions (RegExp) are NOT available in AS2, are only in AS3, and are INDESPENSIBLE when dealing programmatically with strings!]
5. Now, if a user clicks on the SWF, they will be taken to the Google-generated link with all of Google’s tracking still intact.
6. That’s it! You can download the simple example source files here.
SWF add is loaded —-> SWF lifejacket preps Google clickTAG value —> SWF lifejacket replacement SWF —> replacement AS3 SWF re-assembles Google’s clickTAG value —> AS3 SWF runs and user clicks to visit banner owner’s site…
These steps solved all of my pre-flight issues with Google, and functioned perfectly upon actual distribution. Now, I will be able to do whatever ad banners I want in AS3 without having to be limited by the donkey-cart that is AS2.
What to Send to Google…
The nice thing about this solution is that you only have to send the “lifejacket” SWF to Google for distribution. The actual banner AS3 SWF resides on your client’s domain. The lifejacket even meets Google’s size restrictions. My last lifejacket was only about 4K! All you need to remember is to make the name of the lifejacket SWF the same as the banner SWF, but with an additional “-lifejacket” before the “.swf”: e.g. my_banner-lifejacket.swf would be the lifejacket and my_banner-ad.swf would be the ad that you host on your client’s site.
An Important Note On Security Domains
Just remember, that in order to load an image or SWF from one domain to another, you must have the proper security settings in the SWF that is loading and the SWF that is being loaded. You also will need a properly-formed “crossdomain.xml” file that must be placed in the ROOT directory of the hosted website that you are loading your AS3 SWF from. Otherwise, your loaded SWF will never load or display properly. I have put security settings into the sample code that worked for me. You should start with these, but you may need to adjust them if they do not work for you.
Sign the Google AS3 Petition!
LIFEJACKET™ code and concept by Clarence “exoboy” Bowman
©2010 Clarence “exoboy” Bowman, all rghts reserved clarencebowman.com. You may use this code for anything except resale, provided this copyright info remains embeded in the source code, and credit is given in any documentation.