Getting started with the Adobe Test&Target Extension for Dreamweaver CS5

This tutorial will guide you through the process of creating the basic infrastructure and content to allow A/B and multivariate testing or visitor segment targeting on your site using Adobe Test&Target.

In A/B testing you randomly split the visitors of your site into testing groups. Each group is presented a different version of a piece of content, in order to determine which version leads to improved conversion, average order value, user registration, or any other success metric you want to measure. Multivariate testing is similar to A/B testing, except you are testing variations of content where several aspects (variables) vary independently. The goal is to determine the best performing combination. This is often done by testing a subset of the total combinations and extrapolating the results to the full set of options.

Adobe Test&Target provides an intuitive interface for designing and executing tests, creating audience segments, and targeting content. The real power of Adobe Test&Target (powered by Omniture) lies in its ability to target different versions of content to different segments of site visitors. Imagine an online shop for apparel and accessories, for example. In a marketing campaign to incentivize returning customers, you could segment your audience into three groups and serve them different content, as follows:

• New visitors will see a welcome message; for example, "First time? Take a tour!"
• Returning visitors who haven't bought anything yet will see a free shipping offer: "Free shipping with any order of $30 or more!"
• Returning customers will see a welcome message with the incentive: "$5 discount with any order of $30 or more!"

In these situations, you don't have to duplicate content or build custom pages for each group of visitors anymore—Adobe Test&Target manages this automatically for you.

In this tutorial, you will learn how to use Adobe Test&Target Extension for Dreamweaver CS5 to create and manage web content variations for online marketing campaigns directly from Dreamweaver, without manual coding or duplicating work. You will be able to quickly mbox your website, and visually create and manage offers in the context of your webpage.

The term mbox is short for marketing box, a portion of your web page that can be configured to show different content in different situations. An mbox can also log the behavior of visitors to your site. Mboxes are defined in the code for each web page and are controlled in Test&Target. The Adobe Test&Target extension will allow you to create an mbox and the offers, or content, that it will display, directly from Dreamweaver. Mboxes can replace any content within a <div> tag.

The mboxes on each page communicate with Test&Target via a small JavaScript library, named mbox.js. The mbox.js library file sets a cookie to uniquely identify your users and enables each mbox to send data and retrieve content from your Test&Target account.

This tutorial is divided into the following sections:

• Setting up your environment
• Creating mboxes
• Creating and reusing offers
• Synchronizing offers with Test&Target

Additional Requirements

In order to make the most of this article, you need the following software and files:

Adobe Test&Target Extension for Adobe Dreamweaver CS5

• Download

Adobe Test&Target account

• Learn more

Setting up your environment

To get started, follow these steps to install and open the extension:

1. Download the Adobe Test&Target Extension for Dreamweaver CS5 ZXP file.
2. Double-click the ZXP file and click Accept in the Extension Manager window that appears to agree to the license terms.

Note: If you are using Windows Vista or Windows 7, you need to open Extension Manager as Administrator before opening the ZXP file. To do this, right-click your Extension Manager icon and select Run as Administrator. Then click Install, and browse to the ZXP file you downloaded.

3. After successful installation, close the Extension Manager window.
4. Open Dreamweaver CS5.
5. Choose Window > Extensions > Adobe Test&Target. The Adobe Test&Target panel should appear and indicate that there is no document opened (see Figure 1).

Feel free to drag or dock the panel wherever it fits best in your workspace.

Next, you need to set up your sample site in Dreamweaver:

1. In Dreamweaver, choose Site > New Site and specify a site name and a local folder where you want to store the sample files.
2. Go to that folder and unzip the sample files inside it.
3. Open the JJ.Esquire – Home.html file in Dreamweaver in Design view.

Creating mboxes

With the Adobe Test&Target Extension for Dreamweaver, you don't have to worry about hand-coding mboxes or downloading the mbox.js library and placing it in your site, since the extension handles this automatically.

Just under the menu on the JJ.Esquire – Home.html page there is a short message that reads "First Time? Take a tour!" (see Figure 2). To increase the conversion rate for this site, you might try changing this text to a different message. You can change its size, color, message, or any combination of the above. You can also present a different message to visitors who are returning to your website, or show a special promotion to those who have already purchased from your shop.

Figure 2. In Design view you can see a message surrounded by a <div> element.

To be able to vary this piece of code via Adobe Test&Target you will first have to create an mbox. Remember, any div element on the page is a potential mbox:

1. In Code view, select the div element that contains this text.
2. In the Adobe Test&Target panel, click the +Mbox button located near the bottom right corner.
3. Type front_page_top_message for the mbox name. This name is not visible to site visitors, but it does have to be a valid HTML attribute name. It should be something that's easy to for your marketing department to understand when they see it in Test&Target.

When the extension detects that mbox.js is not present in your site, it will ask you if you want to use an existing copy of the file or automatically download one from your Adobe Test&Target account (see Figure 3).

Figure 3. Click No when asked to if you want to use an existing mbox.js file.

4. Click "No". The file will be downloaded and placed into the includes folder inside your Dreamweaver site.

After these operations the div is changed into an mbox (see Figure 4).

Also, the Adobe Test&Target panel will show the newly created mbox and its default content, which is the original content of the div (see Figure 5).

If you switch to Code view in Dreamweaver, just under the div element, you'll notice that some JavaScript was added to manage the mbox:

Creating and reusing offers

When an mbox is created, the content that is located inside the div element in the HTML page is considered the default content. This content will be displayed to site visitors who are not targeted or part of a test. It will also be displayed in the unlikely situation that the Test&Target server does not respond.

Now you're ready to create the first offer for all returning visitors: free shipping for any purchase of $30 or more. To make this offer to your customers you will have to add it to the mbox:

1. In the Adobe Test&Target panel, click the +Offer button located near the bottom right corner. For the offer name, type "free shipping over 30" or something similar. The panel will indicate the newly added offer (see Figure 6).

If you look at the HTML page you'll see the following placeholder text inside the mbox: Insert Content Here.

2. Delete the text and type "Free shipping with any order of $30 or more! in its place" (see Figure 7).

When you click in the panel to switch between the default and the new offer the content of the mbox will change in Design view, so you can easily see the content as each group of customers will see it.

Consider a situation in which you have previously worked with Test&Target for your site and you already have an offer on the server that you would like to use. The Adobe Test&Target panel enables you to reuse and edit offers located on the Test&Target server. In the Test&Target panel, you'll see a "Preview with Offers title bar" with plus (+) and minus (-) buttons on the right (see Figure 6). You can click the plus button to pull offers from the server to be previewed in the current mbox, or click the minus button to remove the selected offer from the list (it will not be deleted from the server). Follow these steps to include an existing offer in your mbox:

1. Click the plus (+) button in the Adobe Test&Target panel.

A new dialog box will open that will allow you to browse through the offers on the server (see Figure 8).

2. Select an offer from your server and click Add.

The selected offer will be pulled from the server and the content can be viewed inside the mbox (see Figure 9).

When you select any of the three offers now listed in the panel, the content in Design view will change, so you can preview and edit it.

Synchronizing offers with Test&Target

You have created two new offers for the promotional message located near the top of your site's main page. However, you have not yet saved one of the offers. Moreover, you haven't yet created a campaign that ties everything together and establishes the criteria by which success is measured. First you need to put all the created content on the server:

1. Click the Sync button located near the bottom left corner of the Adobe Test&Target panel.

This will save all the offers created or modified in Dreamweaver to Test&Target.

2. To see the results, login to Test&Target in your browser.
3. To see if the mbox was created, go to the mboxes list in the admin section and type the first few letters of your mbox name in the search box; for example, type front (see Figure 10).

Note: If you do not see the mbox here, you will need to reload the web page in your browser and wait a few minutes until Test&Target updates.

Test&Target indicates that your mbox in not yet part of any campaign.

4. To check that the offer you created from Dreamweaver is also present in Test&Target, go to the offer list and type the first few letters of your offer name in the search box; for example, type free (see Figure 11).

Once everything is properly saved in Test&Target, all you have to do is tell your marketing department to set up the campaign as they want. You have created all the offers, and deployed the mbox mechanism on the website for serving those offers. Moreover, if they make changes to any of the offers in Test&Target, you will be able to retrieve those changes in Dreamweaver. You can test this yourself:

1. Select the "free shipping over 30" offer in Test&Target.
2. Click Edit.
3. Change the offer text to Free shipping in US for orders over $30!.
4. Save the offer.
5. Back in Dreamweaver, click Sync in the Adobe Test&Target panel.
6. Select the "free shipping over 30" offer in the panel. You will see the updated message, which was pulled from Test&Target so it can be previewed inside Dreamweaver.

You can use this approach to stay in sync with your team and ensure you're always working on the latest content.

Where to go from here

Test&Target can help your marketing and sales department improve the conversion rate and other metrics for an online site, by enabling them to test different content variations, designs, or components on one page, or to target different content to various visitor segments.

In this tutorial you learned how easy it is to install the Adobe Test&Target extension for Dreamweaver CS5, how to use this extension to create mboxes, and how to create, view, or modify offers for each of the mboxes located in your web page.

Here are some additional resources for further reading:

• For more information on Adobe Test&Target Extension for Dreamweaver CS5 see Using the Test&Target extension for Dreamweaver CS5 and Flash Professional CS5.
• Adobe also offers a free Test&Target extension for Flash Professional CS5 to help you instrument campaigns on a Flash-based website or widget. To read more about it or download it, see the Adobe SiteCatalyst and Test&Target extensions page.
• To learn more about Adobe Test&Target see the product's official documentation.
• If you're not an Adobe Test&Target customer, and you would like to learn more or request a demo, visit CS5 and the Omniture Digital Marketing Suite.
• If you're new to A/B testing and multivariate testing, A Complete Guide to A/B Testing at Webdesigner Depot provides a good introduction.