You set up an account with Google and specify the ads you want. I said "Images if you have them but text if not" and specified some medium and large banners and squares in certain color schemes. Google then generated some small JavaScript blocks for me to place as I want within my pages.
The JavaScript I place within my page is short and simple so that I and my server have little to do.
When you view my page, you direct your browser to retrieve data from a specified URL. My server sends over an XHTML document. If you have JavaScript enabled in your browser, it then executes each JavaScript block on your computer.
The simple JavaScript blocks I added to my pages just set four variables and then it retrieves and executes a program from pagead2.googlesyndication.com. That automatically retrieved JavaScript program does the real work of getting the ad itself.
The ad retrieved is the result of doing something like the reverse of the typical Google search. Instead of answering the question, "What pages related to this search string?" it's more like "To which search strings or ad descriptions would this page relate?" Put another way, it tries to automatically select ads on topics similar to the topic of the page. One of those four original variables specifies my Google account, so if you happen to retrieve an ad that interests you and you click on it, Google knows whom to credit.
A side effect that I didn't anticipate is that it shows me what Google thinks my pages are about. It does a good job selecting relevant ads on many of my pages, like TCP/IP, Unix/Linux, some of my information security pages, my attempts to understand Turkish grammar, travel suggestions, and Toilets of the World.
It gets a little confused on many of my information security pages, obsessing on the term "security" appearing in the URL and throughout the page, and frequently offering ads for the vast and largely non-technical physical security industry in the U.S.
It just can't figure out what some pages are about, like one explaining how to create Cyrillic text in Unicode, the LATEX markup language, and Postcript. If it cannot decide what the page might be about, it tends to offer "public service ads", generally promotions for charities.
OK, that's what AdSense is and how it works. Why is this page here?
Google AdSense ads are based on JavaScript using document.write() calls. However, that doesn't work within an XML/XHTML document. Here is the workaround!
In more detail, a Google AdSense ad looks like the following within a web page. The first block sets values for four variables, and the second effectively says "Set some variables, and then retrieve a JavaScript program from the following location and execute it." Google suggests that you simply insert this JavaScript into an HTML file, but that doesn't necessarily work — hence the reason for this page!
<script type="text/javascript">
<!--
google_ad_client = "pub-5845932372655417";
/* Top Banner */
google_ad_slot = "1979399418";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
The problem is that the retrieved program show_ads.js contains calls to JavaScript's document.write() function, and that is not allowed within an XHTML or XML page. Depending on your browser and how strict it is, you might get the ad, or maybe an error message, or maybe nothing at all.
How do I know what's in the JavaScript program? I wondered why it didn't work and so I retrieved a copy with wget:
$ wget http://pagead2.googlesyndication.com/pagead/show_ads.js $ vim show_ads.js
Sure enough, document.write(); plays a crucial role. Some XML/XHTML solution is needed....
Here is the workaround: step by step:
I created the below HTML file as:
/var/www/html/ads/banner-728x90.html
so it could be retrieved as:
http://cromwell-intl.com/ads/banner-728x90.html
It's just
the JavaScript from above
as the body of a small
HTML file:
<?php header("Content-Type: text/html;charset=utf-8"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sponsorship</title>
<style type="text/css">
body { margin: 0; padding: 0; }
</style>
</head>
<body>
<script type="text/javascript">
<!--
google_ad_client = "pub-5845932372655417";
/* Top Banner */
google_ad_slot = "1979399418";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
I next created the below HTML file as:
/var/www/html/ads/banner-728x90-wrapper.html
Note that it specifies the width and height of the
included HTML object in pixels,
and it sets the MIME type of just this encapsulated
object as text/html
so that document.write(); will work.
Without the explicit definition of width and height,
the browser will not know in advance how
to lay out the page and the result may look very strange.
<div style="width: 728px; height: 90px"> <object data="/ads/banner-728x90.html" type="text/html" style="width: 728px; height: 90px"> </object> </div>
I can make a number of wrappers to pull in the same
file and underlying ad code with different styles.
For example, those wrappers could make the ad "float" to
the left margin of the page:
<div style="width: 728px; height: 90px; float: left;">
or to the right margin:
<div style="width: 728px; height: 90px; float: right;">
I could have put the six-line block of <div>...<div> directly in an HTML file, but then I have six-line blocks to maintain! The next step makes it much easier.
All I have to do now is add one PHP line to a file to include the wrapper and let it pull in the code. This page, for example, literally begins as shown here. See how it pulls in two ads at the very beginning, before the large header "How To Use Google AdSense Within XML/XHTML" — a 728x90 banner across the top and a 200x200 box that floats to the right:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>How To Use Google AdSense Within XML/XHTML</title>
<meta name="description" content="How to use Google AdSense
within XML/XHTML pages.
Google AdSense uses JavaScript document.write();,
which is not allowed within XML/XHTML.
Here is a simple solution to the problem." />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
</head>
<body style="background: #f4e4b0">
<?php @ include ('../ads/banner-728x90-wrapper.html'); ?>
<?php @ include ('../ads/square-200x200-wrapper.html'); ?>
<h1>How To Use Google AdSense Within XML/XHTML</h1>
The overall result making up the entire page is a valid XML/XHTML document encapsulating a short HTML block of specified size containing nothing but Google's JavaScript program.
The only remaining annoyance, and it's fairly minor, is PHP's inability to easily deal with absolute paths. The include is relative to that page's location, so I need the ../ shown above.
The supposedly "easy" fix it to instead use all this:
<?php include($_SERVER['DOCUMENT_ROOT'].'/ads/banner-728x90-wrapper.html'); ?>
Ugh. I'll just keep track of how many instances of ../ are needed....
Now I'm ready to harness the awesome power of a converted Ukranian tanker full of Click Monkeys!
|
||||||||||||
|
||||||||||||
