Waarom werkt Google's Adsense niet op mijn XHTML-valid pagina's?

Trefwoorden: Adsense, Javascript, HTML, XHTML, XML

1. Van HTML naar XHTML


Webmasters die mee willen met hun tijd gebruiken ondertussen niet meer de (verouderde) HTML 4.01-standaard, maar de XHTML-smaak van deze standaard. Echter zeer weinig browsers ondersteunen op het moment van schrijven de XHTML 1.1-standaard zoals het zou moeten (waarbij dus ook het content-type niet langer html/text is).

Het probleem hierboven is een van de meest bekende symptomen van overschakeling van HTML 4.01 naar XHTML 1.1. Een ander, iets minder bekend frequent voorkomend, maar daarom niet minder irritant, probleem is dat van de Google Adsense-code die (wonderbaarlijk?) niet meer lijkt te werken in XHTML-valide pagina's. In de tekst hieronder gaan we, na een blik op de (mogelijke) oorzaak, ook dieper in op een werkende oplossing.

2. Problemen met reeds bestaande code


De reden voor het niet werken van de bestaande javascript-codes moeten we gaan zoeken in de manier waarop XHTML is opgebouwd. Google Adsense maakt gebruik van een Javascript code waarin o.m. document.write() wordt gebruikt. XHTML is echter op XML gebaseerd, waardoor het ook de striktheid inzake codevorming meegekregen heeft. In XML dient elke geopende tag ook effectief gesloten worden. Voor elke sluittag, dient er ook eerst een element geopend worden. Gebeurt dat niet, dan zal de parser onherroepelijk er de brui aangeven. Ter illustratie onderstaand voorbeeld:

Code die niet door de XML-parser zal geaccepteerd worden

CODE
  1. <foo>
  2.     </bah>
  3. </foo>


Wat wel correct zou kunnen zijn

CODE
  1. <foo>
  2.     <bah>
  3.  
  4.     </bah>
  5. </foo>


Logisch, niet?
Inderdaad, tot op zekere hoogte lijkt het inderdaad kinderspel. Maar wat als er nu gebruik gemaakt kan worden van Javascript. Via Javascript kunnen we de eigenschappen van bepaalde tags aanpassen (in HTML bijvoorbeeld de opmaak) of nieuwe tags aanmaken. Net daar zit het probleem in onze situatie. Onderstaande code genereert een perfect output voor de browser (indien deze javascript correct zou weergeven), maar toch wil de XML-parser hier niet mee leven.

Code die tevens niet door de XML-parser zal geaccepteerd worden

CODE
  1. <foo>
  2.     <script type="text/javascript" xmlns="http://www.w3.org/xhtml/1999"/><[!CDATA[
  3.       document.write('<bah>');
  4.     ]]></script>
  5.     </bah>
  6. </foo>


De output code zou dus in principe correct moeten zijn. Als de parser de code nu overloopt, zal deze (na het element foo[i]) als eerste stoten op de bouwsteen [i]script. Binnen script komen we vervolgens bah tegen. So far, so good in principe, tot we na het bah-element de afsluiting van script tegenkomen. De parser wil verder gaan en komt daarna de afsluittag van bah tegen, terwijl hij niet weet waar die op terugslaat.

Om deze problematiek te vermijden, heeft men ervoor geopteerd om de document.write()-methode te bannen uit de XHTML-omgeving. Dit heeft, vanzelfsprekend, zijn consequenties op reeds bestaande code. Maar vrees niet, er is een oplossing ;).

3. Genoeg problemen, nu een oplossing!


De oorzaak van het probleem zit 'm in dit geval dus in de manier waarop een pagina wordt aangeboden. Als we teruggrijpen naar een manier die vroeger wel werkte, zonder al onze pagina's te moeten gaan aanpassen, is het probleem dus ook even snel opgelost. Concreet moeten we er voor zorgen dat de Google Adsense code als text/html wordt geparsed, in plaats van application/xml. We kunnen op een pagina echter slechts 1 doctype en 1 mime-type opgeven, maar niets verbiedt ons om een andere pagina te includen. Includen hoeft in dit geval echter niet te betekenen dat we de beschikking moeten hebben over een server die PHP of ASP kan parsen. Neen zelfs gewone ordinaire html biedt hier soelaas en dat via <object>. De concrete werkwijze is relatief eenvoudig. We maken gewoon een aparte pagina aan (in dit voorbeeld noem ik ze googleadsense.html en sla ik het bestand in dezelfde map op), waar we de Google Adsense code op plaatsen en die we later zullen includen.

Bijvoorbeeld

CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <title>Google Adsense</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  8.             // Hier plaats je het eerste deel van je Adsense-code
  9.         </script>
  10.         <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  11.     </body>
  12. </html>


Je kan deze code gerust door de validator halen, ze is volledig geldig. Al wat ons nu nog rest, is deze pagina includen in onze originele, XHTML-geldige, pagina. Ook dit is niet moeilijk te bereiken, getuige de code hieronder.

Geldige code van onze originele pagina waarbij we de nieuwe pagina include via <object>
CODE
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <title>Google Adsense</title>
  5.     </head>
  6.     <body>
  7.         <div id="googleAdsense">
  8.             <object data="googleadsense.html" type="text/html"></object>
  9.         </div>
  10.     </body>
  11. </html>


Voila, zo eenvoudig is het :).

Indien je nog vragen zou hebben of met een probleem zou zitten bij de implementatie van deze methode in jouw website, kan je een berichtje plaatsen in een van onze forums. Aanvullende opmerkingen en nuttige informatie kan steeds toegevoegd worden via de functie Plaats een reactie onderaan deze pagina.Dit artikel werd geschreven door Martijn op maandag 2 januari 2006 om 21:19 en werd sindsdien 2042 keer gelezen.

  • Pagina
  • 1 van 1

Geen reacties gevonden
Er werden nog geen reacties bij dit artikel geplaatst.
  • Indien je denkt iets te kunnen toevoegen aan het artikel, kan je zelf een reactie schrijven via de koppeling Plaats een reactie bij dit artikel hieronder.
  • Indien je andere commentaar (iets wat niet meteen functioneel bijdraagt aan het artikel zelf) hebt, kan je een bedankje formuleren via de koppeling Plaats een bedankje bij dit artikel hieronder.