Nethab Blog

Google Website Optimizer and XHTML

Posted by Nethab at 11:13 PM

Google Website Optimizer is not XHTML compliant.

If you're not familiar with the reasons for using XHTML and strict doctypes, then this is not the article for you. I'll just say that not using them will make your life more difficult than it has to be.

What makes GWO incompatible with XHTML 1.1

XHTML 1.1 does not allow <script> tags inside the <body> tag. Google Website Optimizer (GWO) uses <script> within the <body> to define the start of each "section" to test, and an unbalanced </noscript> tag to mark the end of the section.

Furthur, GWO uses document.write extensively. Not only to write the variations to the page, but also to load the control and tracking scripts. Remember that XHTML 1.1 only allows <script> tags in the <head>, which makes document.write useless since <head> is the only part of your page that doesn't get displayed in a browser.

Solution

The solution is to use the built-in DOM functions (like document.createElement and document.getElementById) to load the control scripts and manipulate the contents of the page. Not only are they supported by nearly all modern browsers, but any browser that doesn't support them will never know the difference and will display the original (non-optimized) page. In other words it fails gracefully.

The first thing you will need to do is set up your experiment as normal (using the instructions for utmx_section as provided) in order to get your experiment "verified" and ready to run. Then you will take those section names and identify the portions of your page that you want to test with that ID.

For Example: If your section name is "heading", change the ID of your heading tag like this:

<h1 id="heading">Original Headline</h1>

Any text or content within that tag will be replaced by the variations you defined for that section of the experiment.

The next step is to paste the scripts written by ShoreTel into your <head>, substituting the experiment key you received (from GWO) for the control scripts, and the profile ID you received for the tracking scripts.

For Example:

<script type="text/javascript">
var _gwoKey = "XXXXXXXXX";
var _gwoUacct = "UA-XXXXXX-9";
</script>
<script type="text/javascript" src="/<your folder>/gwo.js"></script>

Labels: ,

Subscribe to: Posts (Atom)