Contents


Integrating WebSphere Commerce and Digital Data Exchange (DDX)

WebSphere Commerce Integration

Comments

Many online sellers now use multiple web analytics systems in their e-commerce solution for various different reasons. The reason for using multiple web analytics systems could be anything from sellers finding that one analytics provider does not provide all that they want and can only be availed everything by on boarding other analytics vendors, or some sellers may onboard another vendor to adhere to enterprise standards and so on.

To integrate each of these external analytics systems with WebSphere Commerce can be a tedious task, which is usually performed by adding these tags independently on the website. To make this task much simpler, IBM offers a Digital Data Exchange solution where you can manage third-party tags through a single user interface. IBM Digital Data Exchange is a tag management solution where you can manage tags from IBM and other vendors with minimal support from IT.

By integrating WebSphere Commerce with IBM Digital Data Exchange (DDX), you can simplify the process of collecting and sending customer shopping behavior data to various analytics providers. With this integration, customer behavior data can be collected with existing WebSphere Commerce analytics tags and sent to DDX. DDX can then relay the data to IBM Digital Analytics and other third-party analytics providers.

Remember: The products mentioned in this article continue to evolve so to make sure you refer to the latest documentation before trying out these steps.

Digital Data Exchange

The Digital Data Exchange application provides a single interface that streamlines configuration and deployment of page tags, helping to reduce the burden of tag management on IT or web development teams, and to enable marketing and general business groups.

In Digital Data Exchange, depending on your account provisioning and permissions, these are some of the tasks you can perform:

  • Manage tags from IBM® as well as certified partner and other vendor tags
  • Configure page group rules to trigger third-party JavaScript and code snippets
  • Group similar website pages into page groups, and specify which tags are executed for each page group
  • Setup rules to determine when tags in page groups run
  • Deploy page groups to either test or production environments

WebSphere Commerce Integration

With this integration, customer behavior data can be collected with existing WebSphere Commerce analytics tags and sent to DDX. DDX can then relay the data to IBM Digital Analytics, IBM Tealeaf®, and other IBM and third-party analytics providers.

To enable the integration for stores that are based on the WebSphere Commerce Feature Pack 8 Aurora starter store, complete the following tasks:

  • Enable the use of the DDX setting in your analytics provider configuration file.
  • Configure DDX to deploy IBM Digital Analytics tags to your generated store html pages.

WebSphere Commerce Configuration

To integrate WebSphere Commerce with DDX:

  1. Go to WC_eardir/xml/config/bi
  2. Open biConfig.xml to set the Client Id and the DDX flag.
    <store storeId="10101,10102,10103" biprovider="coremetrics" enabled="true">
       <options>
          <attribute name="useDDX" value="true" />
       </options>
    </store>
  3. Update the Output section.
    <output section="header">
    <![CDATA[
     <script type="text/javascript">
       cmSetupNormalization("krypto-_-krypto");
       cmSetClientID("99999999",true,"data.coremetrics.com","thesite.com"); 
     </script> 
     ]]>
    </output>
  4. Add pageType parameter to the page view tag on your store pages. Here is the example: <cm:pageview pageType="wcs-cart"/>

TIP: You don't have to explicitly add these tags to the store pages if your store is based on the WebSphere Commerce Feature Pack 8 Aurora starter store. These tags are already included in the store pages.

When pageType parameter is not provided in the page view tag, the default value wcs-standardpage is used. WebSphere Commerce defines the page type parameter value in digitalData.pageInstanceID. The pageInstanceID value is referenced while configuring page group rules in DDX to determine whether the tags that are assigned to that page group are deployed to a store page.

digitalDataObject

WebSphere Commerce uses a JavaScript object to make data on your website available for tag syndication. The digitalData is a JavaScript object that is generated by the IBM Digital Analytics tags in WebSphere Commerce storefront pages when the store is configured to use DDX. The digitalData object can be viewed in the storefront pages by reviewing the HTML source. The data in the digitalData object is sent to DDX. The DDX can then relay the data to IBM Digital Analytics (IDA) server.

digitalData.product[0]={productInfo:{productID:' CTA023_230101', productName:'Reading Tab'},
category:{primaryCategory:'' ,virtualCategory:''},
attributes:{exploreAttributes:''}};

IBM Digital Analytics tags used in WebSphere Commerce Storefront

  1. Page View - Page view tag is used to capture page information when shopper moves from page to page.
    Tag
    <cm:pageview/>
    Output
    digitalData = { 
    page:{pageInfo:{pageID:'',onsiteSearchTerm:'', onsiteSearchResults:''},
    category:{primaryCategory:''},attributes: {exploreAttributes:'',extraFields:''}}};
  2. Product view - This tag captures the information available on the product details page. Example: ProductDisplay.jsp
    Tag
    <cm:product 
    catalogNavigationViewJSON="${catalogNavigationView}" extraparms="null, ${analyticsFacet}"/>
    <cm:pageview pageType="wcs-productdetail"/>
    Output
    digitalData.page=
    {attributes:{exploreAttributes:'', extraFields:''}, 
    category:{primaryCategory:''}, 
    pageInfo:{onsiteSearchResults:'', 
    onsiteSearchTerm:'', pageID:document.title}};
    digitalData.pageInstanceID='wcs-standardpage_wcs-productdetail';
    digitalData.product[0]=
    {productInfo:{productID:' CTA023_230101', 
    productName:'Reading Tab'},
    category:{primaryCategory:'' ,
    virtualCategory:''},
    attributes:{exploreAttributes:''}};
  3. Data Registration- Data registration tag captures information from the User registration page. Example: OrderShippingBillingConfirmationPage.jsp
    Tag
    <cm:registration personJSON="${person}"/>
    Output
    digitalData = 
    {page:{pageInfo:{pageID:'',onsiteSearchTerm:'',onsiteSearchResults:''}, 
    category:{primaryCategory:''},attributes:{exploreAttributes:'', extraFields:''}}, 
    user:{profile:{profileInfo:{profileID:'test123', profileEmail:'email@mail.com',
    exploreAttributes:''}, 
    address:{city:'Dublin',state_province:'CA',postalcode:'12345', 
    country:'USA'}}}};
  4. Shop Action 5 - This tag captures the product information of carted products. The information includes part number, quantity, and price.
    digitalData.cart.item[0] = 
    {productInfo:{productID:'CTA023_230101',productName:'Reading Tab'}, 
    quantity:'1',price:'189.99',
    category:{primaryCategory:'',virtualCategory:''}, 
    attributes:{exploreAttributes:'',extraFields:''}};
  5. Shop Action 9 - Shop Action 9 tag captures information of the products the shopper purchased. Example: OrderShippingBillingConfirmationPage.jsp
    Tag
    <cm:order 
    includeTaxInUnitPrice="false" 
    includeTaxInTotalPrice="false" 
    orderJSON="${orderForAn}" 
    extraparms="null, ${cookie.analyticsFacetAttributes.value}"/>
    Output
    digitalData.transaction.item[0]=
    {productInfo:{productID:' CTA023_230101 ', 
    productName:' Reading Tab '},quantity:'1',price:'189.99', 
    category:{primaryCategory:''},
    attributes:{exploreAttributes:'',extraFields:''}};

DDX Setup and Configuration

When you use DDX, you get two accounts for example the development ID and the production ID. The best practice is to do everything on the production ID. Once the configuration is correctly deployed to the development environment you can instantly publish to production without any additional steps (For example you will will not have to recreate page groups between environments).

Stage 1 – IBM Digital Analytics (IDA) Setup
  • Configure/Create Page groups
  • Deploy Page groups
Stage 2 – Google Analytics Setup
  • Configure Google Analytics Tags
  • Deploy Tags

IBM Digital Analytics (IDA) Setup

In Digital Data Exchange, you can create groups of web pages based on the tags that should be applied to these pages. You can then act on all of the pages in a page group at once, rather than on individual pages. For WebSphere Commerce Aurora store, following page groups can be created: Product Detail, Page Views, Shopping Cart, and Order Confirmation.

Step 1: Create Page Groups

Product Detail page group
The data on the product pages visited by the shoppers will be collected by the tags configured in this page group. To create a Product Detail page group:
  1. Create a Page group for Product details page i.e. Aurora Product Detail
  2. Select Page Rules tab and add the if condition i.e. If Page Identifier equals "wcs-standardpage_wcs-productdetail"
  3. Select Default Container Tags and move the tags as shown in the image from Available list to the Selected list
  4. Click Save
Figure 1. Create Product Page Group
Figure 2. Select IDA Product Tag
Page Views page group
For all default pages, this group will cover all the pages in the application that are not addressed by other page groups. To create a Page Views page group:
  1. Create a page group for default pages in the application i.e. Aurora Page Views - All
  2. Select Page Rules tab and add the if condition i.e. If Page Identifier equals "wcs-standardpage"
  3. Select Default Container Tags and move the IBM Digital Analytics Digital Data Page View JavaScript tag from the Available list to the Selected list
  4. Click Save
Figure 3. Create PageView Page Group
Figure 4. Select IDA PageView Tag
Shopping Cart page group
This page group would collect data from the shopping cart page. To create a Shopping Cart page group:
  1. Create a page group for default pages in the application i.e. Aurora Shopping Cart
  2. Select Page Rules tab and add the if condition i.e. If Page Identifier equals "wcs-standardpage_wcs-cart"
  3. Select Default Container Tags and move the tags as shown in the image from Available list to the Selected list
  4. Click Save
Figure 5. Create Shopping Cart Page Group
Figure 6. Select IDA Shop Action 5 Tag
Order Confirmation page group
This page group would collect data from the Order confirmation page. To create a Order Confirmation page group:
  1. Create a page group for default pages in the application i.e. Aurora Order Confirmation
  2. Select Page Rules tab and add the if condition i.e. If Page Identifier equals "wcs-standardpage_wcs-order_wcs-registration"
  3. Select Default Container Tags and move the tags as shown in the image from Available list to the Selected list
  4. Click Save
Figure 7. Create Order Confirmation Page Group
Figure 8. Select IDA Shop Action 9 Tag

Step 2: Deploy Page Groups

  1. Navigate to the Deployment page displayed under Deployment section in the left navigation menu.
  2. Select 'Test' from Deploy To: as you want to first deploy these page groups on the development environment
  3. Select Category as 'Aurora', the one you already created under which you created all the page groups
  4. Select all the created page groups from the Available list to the Selected list
  5. Click Deploy
    Figure 9. Deploy

Step 3: Test IDA Tags using Tagbar

The IBM Digital Analytics Tagbar is a browser plug-in that allows you to view all the tags that are sent to IBM Digital Analytics from IBM Digital Analytics tagged page

To test if the IDA tags are firing with right data or not, you need to install a plug-in in your browser.

  1. Log in to the coremetrics portal
  2. Navigate to Content -> LIVEview
  3. Click 'Install IBM Digital Analytics TagBar' button
    Figure 10. Install TagBar
    Figure 11. TagBar Icon
Run Test
  1. Access the page URLs of your site and open the Tagbar
  2. The Tagbar shows all the IDA tags fired from that page.
  3. Below snapshot shows the Product View tag with the details posted on IDA server.
  4. If any tags that you configured in the page group not showing up in the TagBar indicates a problem.
    Figure 12. Figure 12. TagBar Display
View IDA Reports
  1. Launch the coremetrics login page: http://welcome.coremetrics.com
  2. Login with client Id, username, and password
  3. On the Dashboard you see different options under Reports section in the left navigation menu.
  4. Click any of these links and view the report.

Google Analytics Setup

Google is a DDX certified business partner. Google Analytics provides JavaScript library to measure how users interact with the website.

Before configuring Google Analytics in DDX, make sure that you have the Google Analytics Property you want to track. The Properties are where you send data and set up reporting views.

The Google Analytics library provides two functions that are used in DDX.

Create Method
You need to specify the Property ID where you want to post the data i.e. UA-XXXX-Y
Send Method
The Send method is used to capture page view hits.

To get more information, see Google Quick Start Guide.

Google Analytics tags can be viewed in Tags section of the left navigation menu. It appears under Other Tags.

Figure 13. Google Analytics Tags
Configure Google Analytics Create Method tag
  1. Click on Google Analytics Create Method
  2. Click Must Edit that appears under Object name
  3. In the pop-up window, select the method as Constant from the list
  4. Specify the Google Analytics Id, for example, 'UA-XXXX-YY' in the Constant field
  5. Save the tag as a new name i.e. Aurora Google Analytics Create Method
    Figure 14. GA Create Method Tag
Configure Google Analytics Send Method tag
  1. Click on Google Analytics Send Method
  2. Click Must Edit that appears under Object name
  3. In the pop-up window, select the Hit Type as pageview from the list
  4. Save the tag as a new name i.e. Aurora Google Analytics Send Method
    Figure 15. GA Send Method Tag
Configure Google Analytics Load Library tag
  1. Navigate to Page group view
  2. Click Global Head Group for modification
  3. Select Head Container Tags and move Google Analytics Load library from Available vendor Tags to Selected Vendor tags
  4. Click Save
    Figure 16. GA Load Library Tag
Add Google Analytics tags to Page Groups
  1. Add the newly created Google Analytics tags to the existing Page groups i.e.:
    • Aurora Product Detail
    • Aurora Page Views - All
    • Aurora Shopping Cart
    • Aurora Order Confirmation
  2. Open each Page group, select Default Container Tags and add the new tags as shown in Figure 17.
    Figure 17. Configure GA Tags in Page Groups

Test Google Tags

To test if Google Analytics tags are being fired or not, you can use any one of the below options.

Firefox®
Network tab in the Firebug plug in
Chrome®
Google Analytics Tracking Code Debugger
Figure 18. GA Code Debugger

Conclusion

In this article you learned how Digital Data Exchange platform can be used to manage tags from different vendors into your WebSphere Commerce solution from a central place. You also learned how WebSphere Commerce makes use of the JavaScript object to relay the digital information to the DDX server.


Downloadable resources


Comments

Sign in or register to add and subscribe to comments.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Commerce, Big data and analytics
ArticleID=1025070
ArticleTitle=Integrating WebSphere Commerce and Digital Data Exchange (DDX)
publish-date=01152016