A crucial step in setting up a Website Optimizer experiment is to add a script to the web pages involved in the experiment. Here's what the script does:
- accesses experiment data stored on the Website Optimizer server
- identifies which sections of the page will be varied for the experiment
- triggers data collection of visits and conversions
The following guide will help you add the script to your web pages. (The script must be added before you create test page variations and go live with the experiment.) This guide also explains how to remove the script once the experiment is finished.
A note about audience: This guide is intended for people who manage website code. It assumes that your experiment designer is already using the Website Optimizer UI to create an experiment, and is handing off the task of installation to your web site administrator. (Unless designer and administrator are the same person.) This process coincides with Step 2 of the the Optimizer UI, which generates the optimizer script to be installed.
Contents| Adding Scripts | Back to Top |
The scripts you'll install on experiment web pages are generated by the Website Optimizer UI during the experiment setup process. When setting up the experiment, the experiment designer is given a link to a page that contains the actual script to be installed, plus basic instructions on how to install it. The designer has the option of installing the script or handing off the task to the web site administrator (or whoever will be doing the installation).
Installation is basically a matter of adding blocks of script to existing web pages. In most cases, no other adjustments to the page are necessary. Certain cases may require additional small changes -- for instance, sites that use multiple domains, such as one domain for shopping and one for checkout.
Please check the Special Issues section of this guide before continuing to make sure you know whether any of these changes apply to your setup.The blocks of script provided by the Website Optimizer must be installed exactly as provided. Editing the script will jeopardize the experiment and may cause errors in the web page display. After installation, the Website Optimizer will validate the script and check for some common problems.
For each experiment, script must be installed on at least two pages:
- The test page is the page being optimized. This page invites the viewer to take some action, such as click a "Buy" button. By varying the look of this page, the experiment can find out which version does the best job of convincing the viewer to take the action you want. To start this process, you'll identify certain page sections and provide content variations for each section.
- The conversion page is the page a viewer sees after taking the action you want. For example, a "thank you" or confirmation page that appears after a user has bought your product is an ideal conversion page. Website Optimizer will count the number of times this page appears to help determine which test pages are working best.
There are three types of script to be installed on the test page, and one on the conversion page:
- Control script. Placed in the test page, it drives the experiment. This code "talks" with the Google servers where the content variations are hosted.
- Section script. Placed on the test page, it tags the beginning and end of a page section. Each test page will have at least one (and probably more) sections to be tagged.
- Tracker script. Placed on both the test page and the conversion page, it triggers data collection for the experiment
Once you've installed the script, be sure to verify that the page is loading and displaying correctly. The installed code should have no effect on how the page looks before the experiment is launched.
Note: If you use a WYSIWYG ("What you see is what you get") HTML editor, such as Macromedia Dreamweaver, make sure that you don't see the script code when viewing your page in a browser. Some HTML editors will try to place the code as text on your page. When adding script, use the "source" view to paste the script into your web pages.
The control script is a chunk of code that controls the progress of the experiment. The script contacts the Google servers to retrieve the content variations, which are stored there. The control script also ensures that a user's view of the page remains consistent, and that multiple views of the same page by the same user don't affect the experiment statistics.
Copy and paste the entire control script into the beginning of your original page's source. It should appear immediately after the opening
<head>tag.Note: The control script must appear after any DOCTYPE declaration, but before any other content. No other script tags or css tags should appear before the control script.
Note: Be sure to install the control script exactly as it is generated by the Website Optimizer.
<head>
<script>
function utmx_section(){}
...
</script>
...
</head>Section scripts tag the areas of page content that will be varied in the experiment. Just about anything can be included in a section, including blocks of text, graphics, and images. A section must span a contiguous block of content; it might encompass a headline, a paragraph of text, an image, or another page element. Your experiment designer should define the exact beginning and ending point for each section.
Once the sections are tagged on the web page, the experiment designer will use the Website Optimizer UI to record content variations for each section. These variations will be hosted by Google. During the experiment, the section script will replace the original content with variation content.
To tag a page section, add script #1 at the start point of the section, and script #2 at the end point, as shown in the example below. Don't remove the original content inside the sections; this content will be displayed to some percentage of viewers in the experiment. Replace the string "Section Name" with a unique name for each section. The example below shows two tagged sections, with the names "Description" and "Photo".
<body>
<p>Some page content...</p>
<p>
<script>utmx_section("Description")</script>
Welcome to example.com!
</noscript>
</p>
<p>Some more page content...</p>
<p>
<script>utmx_section("Photo")</script>
<img src="images/Product_1234.jpg">
</noscript>
</p>
<p>Yet more page content...</p>
...Not all viewers of your page will be using Javascript-enabled browsers. Those who don't will see the original page content. Don't worry about the unmatched </noscript> closing tag; this script is designed to work properly and is browser-compatible. If you do have a problem, try this workaround.
Choosing where to place section script
There are a few limitations on section script placement:
- Script cannot be placed inside an HTML tag
- Script cannot be placed inside another block of script
Section scripts can surround HTML tags. For example:
<startsection-script><a href="help.html"><endsection-script>Link to help</a>
Section scripts can also surround other script blocks, with one exception: the script block can't contain any <noscript> or </noscript> tags. See here for section scripting examples.
Choosing whether to include HTML tags
Up to this point, you've worked with the experiment designer to decide exactly which content is being varied. When actually placing the script, however, you need to decide whether or not to include the HTML tags in the section script.
Any HTML code can be included in a page section, and HTML tags are required in some cases: for example, if a link destination or image is being varied, as the Photo section illustrates in the example above. But in other cases, there's no need to include HTML tags. Keep in mind that your experiment designer, who provides the variation content and may or may not be HTML savvy, will need to deal with all tags left inside the section. A good rule of thumb is surround the least amount of content that needs to vary, and exclude HTML tags when possible.
For example, if a section consists of a headline or single paragraph, you could place the section scripts inside the HTML
<p>or<h1>tags, as the "Description" section illustrates in the example above. This way, the experiment designer doesn't need to deal with HTML at all, but can simply type in the alternate content.For each section, enter a section name as a string parameter of the
utmx_sectionmethod. Try to use meaningful section names: for example, "headline" or "product_photo". These names will be used to identify the section in the Website Optimizer experiment reports. Section names are case sensitive and can be up to 20 characters long.Keep the section names unique, unless you want the same variation content to be displayed more than once on your test page. For example, you might experiment with a "Buy Now!" button that appears more than once on the test page. In that case, to keep all instances of the content in sync with each other, you should use the same section name for all the identical elements.
This script triggers Google Analytics data collection and makes sure that page refreshes are counted properly. Add it to both the test page and the conversion page. The tracker script should be placed after all displayable content in each page. (Displayable content placed after the tracker script will likely be delayed slightly in rendering.)
If the page already has urchinTracker script, as will be the case on any page being monitored using Google Analytics, see the special topic Experimenting with Pages Tracked by Google Analytics for more information.
<body>
...
<script>
<_uacct = 'UA-xxxxxx-x';
...
</script>
</body>Once you've finished installing the scripts, check your pages to make sure they're displaying correctly. The script should not cause any changes in the page display until the experiment is launched.
Go back to Step 2 of the Website Optimizer UI (the page containing the experiment scripts), and confirm that the Optimizer scripts have been installed correctly. At the bottom of this page is a Check Tags on Pages button. Click this button to verify that the Website Optimizer can identify and use all the installed scripts.
This validation process won't check any other aspect of the page; it doesn't confirm that page elements are correctly coded. The installation instructions page also has links that will let you view the test and conversion pages. We'll assume here that the installer has verified that the scripts added to the pages are not yet affecting how the page renders. When you look at the page in a browser, all content should render accurately, including the original content that lies inside the tagged page sections. All links and non-Optimizer script should be unaffected. If any elements of the page are affected, double-check that the Optimizer script has been installed correctly.
| Section Scripting Examples | Back to Top |
This section describes some common scenarios for placing the page section script. Each scenario includes some sample script, along with examples of what variation content, which is entered by the experiment designer in the Website Optimizer UI, would look like.
When varying an image, the page section script should surround the <img> tag. Because section script can't be placed inside an HTML tag, the entire image tag must be included in the page section.
Test page section script looks like:
<script>utmx_section("Image")</script>
<img src="Product_1234_A.jpg">
</noscript>Variation content might look like any of:
- <img src="Product_1234_B.jpg">
- <img src="Product_1234_A.jpg" width="100" height="100">
- <img src="Product_1234_A.jpg" alignment="right" >
You have plenty of flexibility on where to put the section script to vary text. Placement depends on exactly what you want to vary; for example, if you want all variations to be italicized or shown in red, the section script would be best positioned inside these style tags. This example scenario illustrates the simplest solution; section script is placed inside a set of HTML tags, surrounding only the actual text. This position makes it easier for the experiment designer to enter variation text in the Website Optimizer UI while also managing HTML tags. Keep in mind that any HTML tags you do include in the section will need to be handled in all variations.
Test page section script looks like:
<p>
<script>utmx_section("Tagline")</script>
What a shoe!!
</noscript>
</p>Variation content might look like:
- The perfect sandal!
- Step in <i>style</i>!
- This shoe is perfect for your foot!</p><p>With custom fitting at six points, gel soles, and pre-stretched leather, you won't find a better combination of form and function.
As the last example shows, variations don't need to mirror the original content. A single phrase can be replaced with a paragraph or more.
Styles can be varied at the element level or style sheet level.
Inline style replacement
To vary the formatting of a single block of text, place the section script around the inline style tags. This position will allow you to change or even remove the style as needed. Keep in mind that inline styles take precedence over all other style tags, so the variations will not be effected by page level styles or style sheets.
Test page section script looks like:
<script>utmx_section("h1style")</script>
<h1>What a shoe!</h1>
</noscript>Variation content might look like:
- <h1 color="#060606>What a shoe!</h1>
- <h1 style="text-decoration:line-through">$65.99</h1><h1>Only 39.45!!!</h1>
As the last example shows, variations don't need to mirror the original content as long as each variation handles the HTML tags appropriately.
Page style replacement
It's possible to change styles throughout an entire page. This is a good way to experiment with page-wide changes. In this example, all content on this page marked with the HTML <li> tag will be consistently varied.
Page styles are often defined at the head of an HTML document. This is fine. Page section script can be placed in either the head or the body of a document, so long as it appears after the control script. To vary page styles, you'll need to designate the entire style script inside a page section.
Test page section script looks like:
<script>utmx_section("PageStyle")</script>
<style type="text/css">
<!--
li {
margin-top:12px;
}
p.caption{
font-size:smaller;
font-style:italic;
}
-->
</style>
</noscript>Variation content might look like:
- li {
margin-top:0px;
}Style sheet replacement
You can also vary the entire look and layout of a page by varying the style sheet.
Test page section script looks like:
<script>utmx_section("StyleSheet")</script>
<link href="DesignLeft.css" rel="stylesheet" type="text/css">
</noscript>Variation content might look like:
- <link href="DesignRight.css" rel="stylesheet" type="text/css"
| Removing Script | Back to Top |
Once an experiment is done, you may want to remove the experiment script from your web pages. This section provides a quick checklist for removing script.
Experiments can be stopped at any timeby the experiment designer. Once an experiment is stopped, the Website Optimizer will stop collecting data and will no longer vary content. The original content will once again be displayed to all viewers. The leftover experiment script won't affect how the page is displayed to viewers.
In rare cases, you may want to revert back to the original web page while an experiment is still running -- for instance, if you have page display problems.
To remove the experiment script, delete the following lines:
- Control script, located in the head of the test page
- Section script (one or more instances), located in the body of the test page
- Tracking script, located at the bottom of the body of both the test page and conversion page. If the page was being tracked by Google Analytics before the experiment, be sure to retain the script associated with that tracking.
Depending on the experiment results, your experiment designer may want to replace the original content in each section with new content. In this case, the designer needs to provide the new content and identify (preferably by name) which section is to be replaced.
| Special Issues | Back to Top |
To learn more about each of these special issues, follow the links provided.
- Installing Script in a Dynamically Generated Web Site
Learn more
- Experimenting with Pages Tracked by Google Analytics
Learn more
- Working with Global Headers
Learn more
- Handling Multiple Domains
Learn more
- Handling Multiple Subdomains
Learn more
