Saturday, February 21, 2009

Google Blogger & AdSense

Blogspot had build-in way to insert AdSense ads in blog. But for some reasons it was not enough for me. For instance, I wanted to leverage channels feature of Google AdSense, but it was impossible with build-in AdSense widget. On the other hand, Google Blogger made it possible to edit a blog template, even insert arbitrary Javascript code. So I decided to go this way to insert my custom adsense code. It seemed to be simple to do, but I wasted 3 hours of my time trying to make it work. For these 3 hours I had been trying to understand why a code generated by AdSense and inserted into HTML Template of my blog didn't work. Instead of any advertisement I saw empty space where an advertisement should be. And even empty space was of wrong size (not the size I chose for the unit). An investigation revealed some details. With a help of firebug I discovered that browser sent a request to and got response 400 Bad Request. Why request was baaaaad, adsense server didn't bother to tell. I compared behavior of an adsense unit that was working and behavior of the non-working unit. I noticed that the non-working unit didn't provide a client id and other info to the AdSense server in request, there values were undefined. The reason for the response 400 was clear now. I suspected that problem could be in javascript code generated by AdSense. The code looked like this:
<script type="text/javascript"><!--
[... something like var blah=blah-blah-blah; ...]

Although there was nothing wrong with this code, I considered to remove <!-- and //--> chunks. The chunks I removed were there just to support old browsers or browsers without javascript turned on. And it helped! Everything went fine. But AdSense prohibited any modifications to generated code. And then I suspected a problem with HTML Template itself, not with AdSense code. I rewrote code to make it look like this:
<script type="text/javascript">&lt;!--
[... something like var blah=blah-blah-blah; ...]

And that worked as well!

There is a possible reason for this. It looks like BlogSpot engine parses template to some internal structure. And then, from this internal structure (DOM tree) it generates HTML code. And the problem is that it doesn't preserve new line characters inside a comments <!-- -->. A browser cuts off this comment before javascript engine begins it work.

No comments:

Post a Comment