IntroductionWith the acquisition of Omniture, the leader in Web analytics, new web technology has become available to Adobe and its customers. We are going see more integration between Flex applications and other Adobe components with the Omniture technology including LiveCycle Guides.

In this article, we explain how to integrate a LiveCycle Guide with Adobe Omniture SiteCatalyst. The guide will transmit information to SiteCatalyst to track the panel usage of a specific Guide. SiteCatalyst will be able to report that information and cross reference it with other available metrics.

To complete this guide, experience with Adobe LiveCycle Guides will be helpful. A basic understanding of Flex and Flex builder will also be useful.

� This is a hands-on guide. Where this icon is displayed, follow the instructions shown.

Requirements In order to make the most of this article, you need the following:

• An Omniture Account

• LiveCycle ES2

• Flash Builder 4

• Eclipse

If you are installing LiveCycle ES2 specifically for this article, use of the simplified turnkey installation is suggested. See http://help.adobe.com/en_US/livecycle/9.0/installturnkey.pdf for more details.

Sample filesIncluded in the attachments window of this PDF are the completed projects that this guide will help you produce. They include:

• The LiveCycle process: Omniture_Integration_1-0_2010-06-01-0946.lca (ES2 LCA, 1,664 KB)

• The exported Eclipse project: guide_extensions (ZIP, 3,852 KB)

Adobe LiveCycle ES2 Technical Guide

Integrating LiveCycle® Guides with Omniture SiteCatalyst®Omniture SiteCatalyst® provides marketers with actionable, real-time intelligence about online strategies and marketing initiatives. SiteCatalyst helps marketers quickly identify the most profitable paths through their Web site, determine where visitors are navigating away from their site, and identify critical success metrics for online marketing campaigns.

Jasmin Charbonneau, Senior Enterprise Solutions Specialist

2

Creating the integrated LiveCycle Guide

Create an Adobe Omniture Report SuiteIn order to start integrating LC Guides with Omniture, an Omniture account is required. Once an account is available, a Report Suite will have been created to collect the information sent to Omniture.

If you do not have an account, visit the Omniture website to inquire about obtaining your own account.

Generating the Flex codeThis portion of the guide requires that you login to your Omniture account.

� Go to http://my.omniture.com to access your account.

� Enter the appropriate information in the login display. The company name will be provided during the registration process. Select “Omniture Suite/SiteCatalyst 14” (not the default) from the drop-down list before clicking on the Login button.

� After logging in, go to the Admin Console by selecting the Admin menu at the top right hand corner of the Omniture site controls.

� Click on the Retrieve Collection Code from the Code Manager section. The Code Manager is the tool that will generate the script you need to use for communication with Omniture.

� Since we are integrating with Flex based LiveCycle Guides, we will generate the code to integrate with Flex. Make sure you have properly selected the report suite that is created as part of your account. The Generate Code button will generate ActionScript code for integration with a Flex or Flash application. It will also create a swc file that contains the supporting libraries. The code we will need to copy is located under the Flex Config Text tab.

� Save the ActionSource.swc file located under the Component Files tab to your local machine so it can be imported later in the Flex project.

3

Create a custom LiveCycle Guide wrapperBefore we create a new LiveCycle Guide, we have to create a customized Guide wrapper that will include the code generated from the previous step.

The LiveCycle ES2 SDK already provides an example of a customized guide wrapper.

� Start Eclipse and import a new Flex project by going under File, Import, Flex Builder, Flex Project and browse to SDK folder which is located at C:\Adobe\Adobe LiveCycle ES2\LiveCycle_ES_SDK\misc\Guides\extensions\ (assuming a default turnkey LiveCycle ES2 installation).

� Right click on the guide_extensions project and select Properties.

� Under Flex Library Build Path/Library Path, add the ActionSource.swc file to the build path.

� Open the file src/com/adobe/guides/wrappers/CustomButtonBar.mxml.

� Copy the script previously generated to the <mx:Script> section.

� Cut the last line in the script, which is just a function call and put it in the creationComplete event of the gc:Wrapper tag. This will make sure we initialize the connection to when the guide is loaded.

4

Within the wrapper we need to create a function that will send data to Omniture each time panels are changed.

� Copy the following function to the <mx:Script> section of your code:

import mx.controls.Alert;

var s:ActionSource;

private function SendDataOmniture(theCurrentPanel:String):void{

try{

if(s != null){

//Set some properties

s.pageName = theCurrentPanel;

s.prop1 = “Placeholder”;

s.hier1 = panelManager.gaModel.name + “,”+ theCurrentPanel;

s.channel = “Panel Loaded”;

//Post the data to Omniture

s.track();

Alert.show(“Sending info for panel “ + theCurrentPanel + “!”);

}

}

catch(err:Error){

Alert.show(“Error sending info to Omniture “ + err.message);

}

}

This function should be called from two different locations. First, when the guide loads the first panel and then when a user changes panel.

� Copy the following script at end of the configActionSource() and pageChange() functions.

SendDataOmniture(currentPanel.label);

We now have a custom guide wrapper that calls Omniture when the guide loads and each time a panel is changed.

� Save the file.

The next step is to create a new Guide that uses the customized wrapper.

Generate a new LiveCycle GuideIn this section we are going to create a new LiveCycle guide.

� In LiveCycle Workbench, create a new LiveCycle application called “Omniture Integration”.

� Under the new application create the following folders: Processes, Guides, Model.

� Copy the custom guide wrapper called guide_extension.swc from the Flex Project to the Guides folder of the “Omniture Integration” application.

� Create a new Guide by right-clicking on the Guides folder and selecting New/Guide.

� Specify a name for the new guide.

� On the Data Model screen specify a data model to base the Guide upon. If you do not have a data model you can use the sample attached to this article.

5

You should now have the following directory structure:

Now we have a new guide with one section and one panel.

Using the custom guide wrapper � Click on the name of the guide in the Guide tree view in the top right corner.

� In the Guide properties, change the name of the guide to “Sample Guide”.

� Click on the browser button beside the Guide extensions property and browse to the guide_extension.swc file under /Omniture Integration/1.0/Guides/.

� In the Guide Layout dropdown, select CustomButtonBar.

Create additional panels � Right click on Section1 in the Guide Tree view and then select New Panel. You may want to rename the panels to provide more relevant information.

� Add more entries from the Data Model view to the different panels so that the guide contains additional sample information.

You should have something similar to the following structure:

6

Rendering the guideThe last step is to build a LiveCycle process that uses the new guide so it can be loaded and tested.

� In LiveCycle Workbench, right-click on the /Omniture Integration/1.0/Processes folder and select New/Process…

� Give the process a relevant name and select “When a user submits a task in Workspace” on the Configure Start Point screen.

� On the form selection screen, select “Choose and existing form” and browse to the guide created in the previous step under /Omniture Integration/1.0/Guides/Sample Guide.guide.

� Select Finish.

This will create a new process called Start NewProcess 1 that can be initiated from the Workspace category 1 within Workspace.

� Right-click on the /Omniture Integration/1.0/ process and select Deploy. If prompted, select “Check in all files” and select OK to deploy your process.

� Go to the Workspace interface at http://<servername>:<port>/workspace.

� Enter a valid user account and go under Start Process. Use “administrator” and “password” if using a new turnkey installation.

� Click on Workspace category 1 and select Start NewProcess1.

You should receive an alert letting you know that the first panel was submitted to Omniture. This means the information is being posted to Omniture properly.

At this point you can navigate to each of the panels using the navigator to generate additional data for the report.

Analyze the data using Adobe Omniture SiteCatalystOnce we have generated a small amount of data, we can return to SiteCatalyst to obtain the metrics.

� Return to the Omniture site my.omniture.com and enter your account information. Once logged in, the site should bring you the SiteCatalyst main page.

7

There are numerous metrics that can be analyzed as part of SiteCatalyst. In our code we tracked the following information: s.pageName, s.prop1, s.hier1, and s.channel. These metrics can be access from different menu items within the SiteCatalyst menu on left side.

The menu labels can be configured. In this case, the Java property names have been added to facilitate navigation.

The pageName property can be tracked from the Site Content/Pages. In this case the page name contains the name of the current panel. The graphic will show how many panels were accessed for a particular guide.

The channel property can be tracked from the Site Content/Site Sections. In our case the channel just contains a hard coded string (Panel Loaded). Since we send the same string no matter which panel is loaded, this can tell us how many panels were loaded in total. It is also possible to add additional metrics by clicking on Add Metric.

� Drag the Visits metric into the Report Data Columns Canvas area. This will provide you with details around the number of visits generated. In this example we can determine that 13 panels were loaded in 3 visits.

8

The hier1 property can be tracked from the Site Content/Hier 1. It allows you to send hierarchical information that is separated by a delimiter. By default the delimiter is a comma. In our case the format is Guide Name, Panel Name. When this information is received, it will display a graphic where you can click on the parent node (guide name) to drill down into the next level (panel name). Using this graphic, you can see panel usage per guide.

© 2010 Adobe Systems Incorporated. All rights reserved. Printed in the USA. 01/10 - May/31/2010 - Revision 2

Adobe, the Adobe logo, Flex, LiveCycle, PostScript, and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other

countries. All other trademarks are the property of their respective owners. Omniture® is a registered trademark of Adobe Systems Incorporated in the United States, Japan, &

European Community.

Adobe Systems Incorporated 345 Park Avenue San Jose, CA 95110-2704 USA www.adobe.com

For more information and additional product details:http://www.adobe.com/devnet/livecycle/

We welcome your ideas and comments. Please send any feedback on this technical guide or suggestions for other topics to: LCES-Feedback@ adobe.com

The prop1 property can be tracked from the Custom Traffic/Custom Traffic 1-10/Custom Insight1. This is a custom property that can be used to track additional information. You can have as many custom properties as required.

ConclusionOmniture SiteCatalyst® can provide LiveCycle Guide developers with actionable, real-time intelligence about online forms. SiteCatalyst can help developers quickly identify the most affective paths through their Guides and determine where visitors are navigating away from their form filling process.

For more information about the different properties you can track, refer to the Omniture Developer Website. For more detail on LiveCycle, please visit the LiveCycle Developer Network.