4 October 2010
This tutorial requires prior experience working with Flash Professional and a desire to learn the basics of using the Test&Target Extension for Flash Professional CS5.
You will also need a Test&Target account. If you're not an Adobe Test&Target customer, contact your Omniture representative or visit CS5 and the Omniture Digital Marketing Suite to learn more or request a demo.
For more information on Test&Target, please visit the Test&Target product page.
In this tutorial, you'll learn how to implement Adobe Test&Target in a simple banner ad by using the features included in the Adobe Test&Target Extension for Adobe Flash Professional CS5.
Adobe Test&Target is an online marketing tool that enables you to continually improve your online content and offer more relevant promotions to potential customers. Test&Target provides an intuitive interface for designing and executing A/B or multivariate tests, creating audience segments and targeting content. For example, Test&Target can help you test a number of versions of an interactive Flash (SWF) ad, to determine which version is the most effective at increasing visitor conversion.
As you design, develop, and deploy projects in Flash, you may find it challenging to create multiple versions of the same ad and implement Test&Target code for each iteration.
The Adobe Test&Target Extension for Flash Professional CS5 enables you to create different versions of an ad within a single SWF file. It also facilitates collaboration and communication between the marketing team and the design team, as described below.
In this section, you'll begin by setting up the development environment. Follow these steps:
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 the Extension Manager icon and select the option to Run as Administrator.
After installing the extension, follow these steps to access the panel and sign in to your Test&Target account:
To get a better understanding of the Test&Target extension and the included features, be sure to download the sample files provided at the beginning of this tutorial. Uncompress the ZIP file, double-click the FLA file named jjesquire_small.fla to open it in Flash Professional CS5 and sign in to your Test&Target account.
After signing in, the Test&Target panel enables you to create a new campaign as described in the next section.
For the purposes of this sample project, you'll use the Adobe Test&Target extension to enable visitor targeting in a simple ad for a (live) demo website, JJEsquire.com. The banner ad will include two different versions: Spring collection and Fall collection. In order to enable visitor targeting, it's important to understand some Test&Target concepts, such as campaigns, flashboxes, and experiences.
The descriptions of these concepts are provided below:
In this tutorial, you'll create a campaign from scratch. Follow these steps:
This operation creates a new campaign and flashbox on the Test&Target server.
The Test&Target panel updates to display the Experiences screen. Experiences are different versions of an entire ad series. Site visitors will see a certain experience depending on the testing or targeting rules set up in the campaign. For example, you can target the Spring collection to visitors from countries in the Southern hemisphere, and the Fall collection to visitors from the Northern hemisphere. To achieve this, you'll need to create two experiences. Follow these steps:
At this point, the Experiences screen displays the two experiences, Fall and Spring (see Figure 5).
Notice that after creating your first experience, the default label automatically appears next to its name. This indicates that this experience will be displayed in the unlikely event that Test&Target servers don't respond, or to site visitors who don't fall into either of the target groups. (There may be situations when the marketing team chooses to target only a subset of the site visitors as part of the campaign.)
Now that you have defined the two experiences, you can start defining the rules that differ between them. For example, you can set the Fall experience's tagline to FALL PREVIEW and the Spring experience's tagline to SPRING PREVIEW, as shown below:
This operation generates a Test&Target movie clip that contains the dynamic text element. It's important to note that this step adds the text element to both first and second experience. You can see this by selecting the second (Spring) experience (See Figure 7).
While both experiences are expanded, you'll see the newly created Test&Target text element's name and value displayed. Switch between experiences to notice that no changes occur to the ad on the Stage. To change the content of the tagline for each experience, follow these steps:
You may also want to vary the text color between experiences, such as setting the Spring experience's tagline to green text, while keeping the Fall tagline white:
At any time throughout the editing process you can review how the ad appears to your experiences. Click the Preview icon next to each experience name to review it.
Begin by clicking the Play button to preview the Fall experience, and then preview the Spring experience in the new window that appears. This enables you to clearly see the text value and color changes between each experience. You can also see the difference on the Stage in the Flash authoring environment, when you flip between the two experiences in the Test&Target panel (see Figure 10).
Of course, you are not limited to changing the color and content text properties when setting the different text elements of each experience. You can also change text size and text location.
Note: Remember to embed the fonts you are using in the ad. Use the Property inspector to select the font you want to use, and then click the Embed button. Be sure to enable the option to Export for ActionScript in the ActionScript tab.
At this point, you have a basic banner ad that is Test&Target-enabled. The campaign contains two different experiences that control how the tagline text appears. You can synchronize your newly created campaign to the Test&Target servers, so that the marketing team can review it.
Save your ad and click the Sync button in the bottom left corner of the panel (see Figure 11).
The synchronization between the Flash Professional panel and Test&Target performs several operations:
Note: Please remember that it is still necessary to deploy the final Flash SWF file to its final destination. Also, if the SWF file exceeds 100 KB in size, it cannot be uploaded to the Test&Target servers and a warning message is displayed in the panel. If the SWF file exceeds the 100 KB limit, Test&Target features will continue to work as expected, except for the preview feature, which is disabled for large files.
After synchronization is complete, visit the Test&Target web interface to check that all the information was properly uploaded:
In this section, you'll learn how to control the appearance of other elements in the ad, including animations (movie clips) and images (PNG, JPEG, and GIF files).
Dynamic text is not the only type of element that can be included as part of a Test&Target experience. For example, you can display different fashion models for the Spring and Fall experiences. Follow these steps:
Note: Make sure the actual bitmap is selected, not the movie clip that contains it.
Because the option to generate keyframes was selected, the Test&Target extension will generate two keyframes with the following contents:
After including the embedded image in the flashbox, the generated Test&Target movie clip contains two layers:
Changing the image to display in the second experience (Spring) is easy. Follow these steps:
In many cases, the banner ad may incorporate animation effects. The marketing team may want to test how site visitors react to different animations. In this section, you'll learn how to make the fashion model image slide in from the left side for the Fall experience, and slide in from the top for the Spring experience.
To accomplish this, you'll need to include the movie clip that handles the animation in the campaign's flashbox. This process is similar to the instructions you followed when embedding the bitmap. Follow these steps:
The movie element (movie clip) is now included in the flashbox, which means you can start creating variations of the movie element for each experience. You will see the movie element listed in the Test&Target panel for each experience. As you expand each experience, it will contain three elements:
Take a moment to look through the expanded experiences and verify that all three elements are listed for each experience (see Figure 21).
To create the slide in animation, follow these steps:
Right-click the Timeline between the two keyframes and select the option to Create Classic Tween. Scrub the Timeline (or press Enter or Return) to see that the image now appears from the left side with a slide-in effect, as shown in Figure 22.
If you are unfamiliar with creating motion tween animations in Flash, refer to the Creating motion tween animations section of the Flash Professional CS5 online help.
This single line prevents the animation from looping and playing over and over again. Close the Actions panel and you'll notice that the keyframe on Frame 15 contains a lowercase a character, which indicates that the frame contains ActionScript.
For clarity, it's a best practice to change the label names of the Test&Target keyframes, to make it easier to make selections in the Test&Target web interface. Select Frame 1 of the Tnt_Labels layer to select the frame label. In the Property inspector, change the name of the Test&Target Keyframe_1 to: Horizontal Tween. Select Frame 16 of the same layer and change the other frame label to: Vertical Tween.
If you click the Play button and preview the Fall and Spring experiences now, you will see that both experiences use the same animation effect, although they display different images. This occurs because both experiences point to the keyframe labeled Horizontal Tween (Frame 1) in the Timeline, which contains the animation effect that slides in from the left.
To animate the fashion model image to slide in from the top of the Stage in the second experience, you'll need to update the tween. Follow these steps:
Now that you've created the two animations for the ad, follow these steps to set each experience to use a different slide in animation:
In addition to serving different ad content to different groups of visitors, you can route click-throughs to different landing pages, depending on which experience they have seen. This enables the marketing team to test the efficiency of different landing pages included in a campaign.
The URLs of the landing pages can be set either on the entire experience or on specific elements of the experience. If a landing page is set for each experience, visitors are redirected to that landing page, no matter where they click on the ad. If a landing page is set per element, visitors are redirected to a particular landing page only if they click a specific element.
Note: If you enable landing page testing for both individual elements and the entire experience, the experience's landing page URL will override any individual elements' landing page URL.
To enable landing page testing or targeting for your campaign, follow these steps:
You can use the landing page feature to redirect visitors to different web pages from this site:
To set up different landing pages, simply enter the desired URL in the Link field and select a target from Target menu (see Figure 26). If the target is set to _self, the link loads in the same browser window; if set to _blank, the link loads in a new browser window.
Preview each experience again and click on the SWF to test the landing page behavior. When you preview the first experience (Fall) you're redirected to the Jewelry and Accessories page. When you preview the second experience (Spring) you're redirected to the Beauty and Fragrance landing page.
To see how this data appears in the Test&Target system, save and synchronize the banner ad project. Log in and edit the same campaign in the Test&Target web interface. Two new properties are now displayed for each experience:
Using the interface, the marketing team can easily change the URL to point to a different landing page (see Figure 27).
In this article, you've learned how easy it is to implement an Adobe Test&Target marketing campaign without creating multiple Flash assets for different versions of your ad. To learn more about working with the Test&Target Extension for Flash, see the following resources: