The HTML script tags that Website Optimizer generates for your experiment are what identify which elements to vary, collect data from visitors, and deliver data to you. The first decision you need to make when adding tags is whether to install the tags yourself or have someone else install your script tags. This task needs to be done by someone familiar with HTML and with the structure of your webpages. Also, be aware that this script sets a cookie, so you might want to ensure that your site's privacy policy covers the setting of cookies.
If you want to install the tags yourself, you will have to insert three scripts on two pages:
1. Adding the combined control and tracking scripts to your test page
The control and tracking scripts for your test page are given to you as one combined block of code. The control script ensures that the experiment variations are switched randomly and that all variations are displayed an equal number of times, while the tracking script ensures that visits to the page are recorded in the experiment. Place the combined block of code immediately after the <head> tag. For example, your test page will look like this if it has the scripts properly installed (scripts in bold):
<head>
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
... More contents of your control script ...
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
... More contents of your test page's tracking script ...
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
... Any other contents of your header section ...
</head>
2. Adding the page section scripts to your test page
Page section scripts are used to mark the elements that will be varied during the experiment. Use the scripts provided by Website Optimizer to indicate the beginning and end of each element. In addition, you need to give a unique name to each page section so that you can keep track of it in your experiment.
As an example, let’s say you defined a header that welcomes people to your page. The original HTML content on your page might look like this:
<h1>Welcome!</h1>
After adding your section script, the header will look like this (with the custom name for this section -- “Headline” -- in bold):
<h1>
<script>utmx_section("Headline")</script>
Welcome!
</noscript>
</h1>
The original content -- the "Welcome!" headline -- remains in the HTML code. Later you will enter your new variation content in the Website Optimizer tool. Also note that in this example, the script went between the <h1> and </h1>, allowing all the text variations to keep the same formatting. Conversely, if you place the section script around the HTML formatting, you can vary the style of an element or even the entire page.
As another example, let’s say you called an image of a smiling child. The original HTML might look like this:
<img src="/images/smiling_child.jpg">
After adding your section script, the image code will look like this (with the custom name for this section -- “Image” -- in bold):
<script>utmx_section("Image")</script>
<img src="/images/smiling_child.jpg">
</noscript>
3. Adding the conversion script to your conversion page
The conversion script tracks visits to your conversion page and should be placed immediately after the opening <head> tag on your conversion page. For example, your conversion page will look like this if it has its conversion script properly installed (conversion script in bold):
<head>
<!-- Google Website Optimizer Conversion Script -->
<script type="text/javascript">
... More contents of your conversion page tracking script ...
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End of Google Website Optimizer Conversion Script -->
... Any other contents of your header section ...
</head>
4. Validating pages
Once you've installed all the tags, click “Validate Pages”. Our validation tool examines your pages and verifies that the tags have been installed properly. If the validation tool detects any problems with the installation, you'll need to fix these before continuing. You can also click Test page not accessible? Try offline validation to upload and validate your pages offline.
Once your pages are validated, click “Continue” to preview and start your experiment.
5. Special conditions for tagging
In certain situations, you might want to tag your pages differently. The following are examples of special tagging situations:
