12 September 2010
You should be familiar with both Adobe Dreamweaver and AdobeTest&Target. You'll also need a Test&Target account. If you're not already an Adobe Test&Target customer, contact your Omniture representativeor visit CS5 and the Omniture Digital Marketing Suite to learn more or request a demo.
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:
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
This tutorial is divided into the following sections:
In order to make the most of this article, you need the following software and files:
To get started, follow these steps to install and open the extension:
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.
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:
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.
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:
divelement that contains this text.
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).
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
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:
If you look at the HTML page you'll see the following placeholder text inside the mbox: Insert Content Here.
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:
A new dialog box will open that will allow you to browse through the offers on the server (see Figure 8).
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.
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:
This will save all the offers created or modified in Dreamweaver to Test&Target.
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.
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:
You can use this approach to stay in sync with your team and ensure you're always working on the latest content.
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:
Tutorials and samples