AdSense and GooglePages
AdSense has become an important source of income for website owners and for Google as a company, so many people were surprised that GooglePages were released without an AdSense option.
The recently updated version of GPC, however, no longer removes JavaScript, so it is now possible to add JS tools, such as counters
, widgets, and—naturally—AdSense.
Adding AdSense to a GooglePage
The recommended procedure for adding AdSense code is essentially the same as the general method for adding JavaScript to GooglePages:
- generate the desired AdSense code
(e.g., the code for this referral button)
<script type="text/javascript">
<!--
google_ad_client = "pub-XXX";
google_ad_width = 125;
google_ad_height = 125;
google_ad_format = "125x125_as_rimg";
google_cpa_choice = "YYY";
google_ad_channel = "";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
- select an editable field in GPC
- open the HTML Editor ("Edit HTML" option)
- find page elements (e.g., <P>, <H3>, etc.) between which to paste the AdSense code
- paste the AdSense code into the HTML Editor window
- add a </DIV> tag after the AdSense code
- add a <DIV STYLE=""> tag before the AdSense code
- insert the appropriate STYLE attributes, e.g., for the above sample button the opening DIV tag is:
<div style="width: 125px; height: 125px; clear: right; float: right;">
(note that the width and height of the <DIV> wrapper are the same as those specified in the AdSense code) - "Save Changes" and "Publish" the page
Examples of AdSense content on this page and elsewhere on this site demonstrate that essentially all types of AdSense codes can be added to GooglePages. The with of the main column is the limiting factor for displaying banner ads in this layout, so AdSense objects wider than 400 pixels are demonstrated in a single-column layout example.
Corrupted JS in GPC
It is strongly recommended to add all AdSense objects as the last editing step for a particular editable field (e.g., sidebar, main, footer). More precisely, a field should not be edited in either WYSIWYG or HTML Editor windows after AdSense and all other JS code has been added to that field. Note that in WYSIWYG window, simply selecting or copying something inside a field can result in corrupting the JS code within that field.
If a field has to be edited after AdSense or JS code has been added, the safest method is to re-paste all the AdSense and JS elements in HTML Editor before saving or publishing the page.
The GPC JS execution bug is the main reason why the AdSense code can become corrupted, so it is recommended to read about that and other known JS bugs before working with JS in GPC.
Uneditable Field in GPC
A field with AdSense code may become uneditable, or the entire page may become "locked". This can happen even after the first time a saved or published page with AdSense or JS code is reopened for editing in GPC, although typically this bug takes some time to be activated. Switching layouts or browsers are the simplest work-arounds for this problem, see the uneditable field bug description for other suggestions.
Editing Recommendations
The most practical way to avoid the above mentioned problems is to compose the HTML code for each of the GooglePage fields in an external text or HTML editor. This way, each field can be preassembled and tested before it is pasted into the GooglePage.
Another method is to add empty DIVs as placeholders for AdSense content, and then paste the AdSense codes into those DIVs as the last editing step.
The main benefit of keeping an external copy of the code for each field that contains JS is that, if any changes need to be made, the external copy of the code can be quickly edited and re-pasted into the GooglePage, which is typically faster than attempting to proofread and fix the corrupted GooglePage code.
WYSIWYG vs. HTML Editing
The downside to the current lack of official support for AdSense on GooglePages is that adding the AdSense content does require some understanding of HTML and CSS, which effectively defeats the purpose of a WYSIWYG editor. Fortunately many detailed resources and tutorials on basic HTML coding are freely available. The GPX-Files Basic Tutorials may also be of some help.
AdSense
