Adobe Flex and Google AdSense

11Dec/0715

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

Filed under: Flex, Google AdSense Leave a comment

Comments (15) Trackbacks (1) ( subscribe to comments on this post )

TJ Downes
December 11th, 2007 - 10:34

Thanks for the tip!

I’m wondering why it wouldnt work to use a text area and URLRequest? On each load youre just requesting the URL again…. am I missing something?
Shan
December 11th, 2007 - 10:55

Neat trick, great job.
Ryan Campbell
December 11th, 2007 - 14:36

TJ, Google AdSense requires JavaScript to load. It can contains tables and images. I’m not sure if a TextArea could handle that.
James
January 15th, 2008 - 19:14

Did you remove the AdSense. I don’t see any evidence of it on your site.
Anonymous
January 16th, 2008 - 14:03

I didn’t see the adsense ads in the application you referenced. Did you take it down?
Ben
March 8th, 2008 - 14:48

Very cool!
Any idea if this is OK with the Adsense TOS?
Rich
March 12th, 2008 - 08:18

Thanks for posting this, it’s been a life saver. The only question I have regards resizing the browser. Where exactly are you putting the event listeners?

Thanks again!
Ryan Campbell
March 12th, 2008 - 12:40

@Ben – I’m not 100% sure if this is ok with Google’s TOS, but no complaints so far.

@Rich – I added the following to the buildContainerList function in IFrame.as:

this.addEventListener(”xChanged”, function(event:Event):void { moveIFrame(); });
this.addEventListener(”yChanged”, function(event:Event):void { moveIFrame(); });
amir
June 17th, 2008 - 00:42

hi guys,
I’m extremely new to flex, but I made a little app that just shows a page on the net and it shows my google adsense ad.

It works just fine, although I have no idea if I’m getting paid for the clicks, yet.

If you put your adsense code into an iframe, then google won’t be able to find out what your site is about.
seo blog
August 4th, 2008 - 12:27

That was a really useful read,well written – nice work!
Zaman
March 19th, 2009 - 22:34

we have apply above method to add gooogle ads in flex application, here we are facing couple of issues:
1. Iframe Contents are flicking and not showing properly in FireFox.
2. And Iframe is fixed at his place while we scrolling the browser window
karel
March 23rd, 2009 - 05:16

just finished step 5.
working backwords
david
March 24th, 2009 - 10:46

I have tried this technique using the latest version of the IFrame component available on code.google.com library. But I’m having problem:
I set the ’src’ property of the IFrame component to the url from the generated code, but when I ran the app, the browser keeps trying to download the file “show_ad.js” and the browser blocks the download.

Question: The generated AdSense code contains 2 script blocks. The first block has some variables that seem commented out and the second block has the ’src’ url. I set the ’src’ property of the IFrame, but what do I do with the other variables? Do I need to add them IFrame component? Do I need to add some or all of the autogen code to my html-template file at the bottom?

Thanks for all your time!!
Nufacik
April 21st, 2009 - 23:08

Hi all – especially Ryan Campbell.

I try use iFrame component succesfully. Everithing works fine on my local PC.
But and I have 2 big problems:

1. When I put iFrame component in my flex app, I run on my local PC well. But if I put this swf on webserver, my browser starting load swf and will stop in 3/4 of preloader and stop working. I dont know why, becouse the same browser runing on my desktop working on local server well. If I remove iFrame component from start state and put his in other state in app (after user loggin), the iFrame component doesnt show his source. I repeat – this happen on web server. On my local server working well.

2. If I put iFrame in my app, it will cause that all my combobox, that are fullfilled by arrayCollection will be empty. I dont know why. And again – in my local server runing well, but on the webserver:
- iFrame component doesm’t show his source
- comboboxe’e are empty

Have somebody some idea, how to resolve this problem?

I’m unhappy becouse of this. On my local server run nice, on webserver doesn’t work. Result – I can’t use this for me.

Thanks for all advice’s.
Evgeni
June 12th, 2009 - 20:23

I’m working on a Flex app that takes the entire page with very little room for HTML iframe. I guess this is a nice workaround I can use, but it’d be nice to have a way to embed AdSense natively in Flex.