Ryan Campbell

Adobe Flex and Google AdSense

I’ve recently launched a Flex-based classified ads product allowing anyone to start a classified ads service. Almost the very first question I was asked was how to place a Google AdSense banner in to their app. I really didn’t want to tell them that wasn’t possible because I choose to use Flex. Instead I set out to find a solution. It turns out not only was it possible but it was a lot less complicated than I imagined.

For those who don’t like reading, a quick summary of what I did is:

1. Create a search engine friendly HTML version of my content (home page, category/search results, ad full details)
2. Add a param that will toggle displaying the Google AdSense banner at the top of that content
3. Use the IFrame component to load the banner in an iframe
4. Reload the iframe as the user views different content
5. Have a beer!

You can see an example of this in use at www.shopcarro.com.1. Create a search engine friendly HTML version of my content (home page, category/search results, ad full details)

This is something I had actually already completed a few weeks earlier. I felt making sure the classifieds content was indexable by search engines was super important. Search results, category listings and ad full details all have clean urls that are bookmarkable.

For example www.shopcarro.com/ad/8435 displays html to search engines/browsers without flash and redirects to www.shopcarro.com/#view=ad;id=8435 for browsers with flash installed.

2. Add a param that will toggle displaying the Google AdSense banner at the top of that content

This step was required because I only want Google AdSense banners in the iframe and not in the regular search engine indexed pages

3. Use the IFrame component to load the banner in an iframe

The IFrame content is fairly simple to use: <IFrame id=”adSense” source=”/ad/1234?adsense=1″/>I only had to fix a few issues:

- The flash player was redrawing itself over top of the IFrame. This is fixed by setting wmode=”opaque” in the javascript, object tag and embed tag that load your Flex app

- I was using the left and bottom constraints to anchor the banner to the bottom of my app but the html IFRAME wasn’t moving when I resized the browser window. Easily fixed by adding the following to the IFrame component code:

this.addEventListener(”xChanged”, function(event:Event):void { moveIFrame(); });
this.addEventListener(”yChanged”, function(event:Event):void { moveIFrame(); });

- Since the iframe is infront of the flash player, any Flex pop ups (TitleWindows, etc.) will appear behind the iframe. I was running out of time so I just simply set the visible property on the IFrame component to false/true whenever I show/hide a PopUp.

4. Reload the iframe as the user views different content

Lastly, whenever the user views different content, I change the source property on the IFrame component to the html based version of that same content. This allows ads to be displayed that are relevant to what the user is currently viewing.

5. Have a beer!

Although some might argue using an iframe with Flex is more of a hack than a solution, the web is based on hacks and hey it works.

If you’re trying to get this working in your own app and run in to any snags let me know, I’ll try my best to help out!

UPDATE: The example url has changed from www.petsbc.com to www.shopcarro.com