Icon

Comments have been closed on this page. Please use AppMon & UEM Open Q & A forum for questions about this plugin.

The Dynatrace FastPack for Salesforce Commerce Cloud (SCC) provides a preconfigured Dynatrace profile custom tailored to SCC environments. This FastPack contains sensors, a template system profile with measures and business transactions, and dashboards for the SCC platform. Because the SCC integration with UEM leverages CORS, there are a few measures that will likely have to be customized to your environment. Please see the Installation section for more details.

The FastPack assumes the user is leveraging the Salesforce Commerce Cloud Dynatrace Link Cartridge or has otherwise integrated Dynatrace UEM into their SCC store via CORS. Click here for more details.

 

 

Fast Pack Details

Name

Salesforce Commerce Cloud (Demandware) FastPack

Version

3.0.0

dynaTrace Version

7.0+

DemandwareVersion 15+

Author

Brian Wilson

License

dynaTrace BSD

Support

Community Supported

FastPack Contents

Fastpack Download contains:

  • Dashboards (see below)
  • Template Profile

AppMon 6.3

AppMon 6.5

AppMon 7

 

Dynatrace Free Trial with Salesforce Commerce Cloud

If you are interested in a Free Trial of Dynatrace User Experience Management on your Demandware platform, please click here.

 

Watch the Performance Clinic below to see how the integration works and witness the fastpack in action

 

   

Web Dashboards

 

Salesforce Commerce Cloud Executive Summary

When the executive team or business owners want to know the health of the business today, it's important not to overload on small details. This first of two executive level dashboards provides a single pane, non-scrolling view of the health of the bottom line. It includes metrics like order revenue, order count, lost revenue and abandoned carts, conversions and bounces. This data, all in graph form, is juxtaposed with user satisfaction metrics, visits counts and user action counts. With this friendly view, the executive team can easily see if business and user satisfaction is trending up or down.

 

Salesforce Commerce Cloud Executive Trends

This second of two executive level dashboards focus on trending data. Instead of focusing on the most recent business cycle as the Executive Summary dashboard does, this dashboard shows current business compared to yesterday, the last 7 days and the last 30 days in order to provide a bigger picture about the health of the business. Besides looking at revenue and lost revenue, this view also incorporates a few performance metrics like Visually Complete, Speed Index and Client Errors to help the team understand if upward or downward trends in these metrics are impacting the bottom line.

 

Salesforce Commerce User Experience Key Metrics

The end user is everything to your business. Your teams spend a lot of time fine tuning the store and setting things up so you can provide a unique, custom tailored experience to your end user. But does that experience live up to both you and your customer’s expectations in the real world? Is the landing page slower than expected? Is there a problem with performance in a particular browser, device or geographical location?

Dynatrace UEM offers a wide range of User Experience KPIs which help the Business and Development teams focus their attention on making improvements where it counts. Geographic user experience can help drive decisions about CDN usage. Tracking both the most frequent and the slowest user actions provides a focus for improvement projects. The UEM KPI dashboard brings these metrics and many more together in a single view to facilitate understanding the many aspects of loading a page that can impact performance for the end user. 

 

Salesforce Commerce Orders & Revenue Analysis

Revenue is not just for the finance department. Performance, and by extension the happiness of your users (their digital experience), is a key factor in converting users visiting the site to sales. Tracking trends in orders and revenue from today vs. same day last week is only one part of understanding what's working. This dashboard also provides trend insight into orders & revenue by Channel, User Experience. Client, and Operating System. For example, are users only making purchases when their user experience is satisfied? If so, that's all the justification you need to concentrate efforts to improve the user experience, and then track the increase in revenue as a result.

Further analysis provides the ability to analysis conversions and revenue by landing page and geographical region. By tracking conversion rate from the different landing pages, the business can focus on where to make improvements first and attain clear feedback as to whether improvements in the performance of those pages leads to increased revenue. Additionally, revenue can be analysed by geographical region. Where are your customers coming from and are there regions that continually under-convert because of performance issues?

Dynatrace User Experience Management is gathering every user’s visit, every user’s click, and more. Why not put that data to work for the business? The Business Dashboard is an excellent tool for tracking Order, Revenue, and Customer trends. It provides some examples of what types of business analytics can be achieved. On top of that, even more complex, multi-dimensional business analytics can be achieved at no extra cost with Dynatrace PureLytics.

 

Salesforce Commerce Abandoned Orders Analysis

Tracking the performance of conversions and revenue alone will not ensure success. In order to see the whole picture, a business must understand why people are abandoning merchandise in their shopping cart. The Abandoned Orders Analysis dashboard provides many ways to analyze and understand why carts are abandoned, as well as how much money is lost. In the Performance Clinic video above, we provide a great example of how client errors are costing the business $18,000 a day due to a simple javascript error.

Abandoned orders are tracked and trended along many metrics besides simply count and revenue lost day over day. The Abandoned Cart Breakdown provides insight into how many carts were abandoned that had either client errors, slow user actions, or not-satisfied visits. In addition, analysis broken down by Channel, User Experience, Client or Operating System helps the team understand if a specific browser version, for example, is leading to more abandonment that others. Also, just like in the Orders & Revenue Analysis dashboard, understanding the User Experience of abandoned carts helps provide business justification for spending time on improving the site.

Last, and perhaps most important, is the exit page of the abandoned cart visit. How much revenue is lost per exit page? Was that page slow? Did it have errors? In other words, was there a performance reason for the user abandoning on that page, and if so, what was that performance problem and how much can the company save by fixing that problem?

 

Salesforce Commerce Bounce Analysis

The third component to understanding the performance of your business, in addition to conversions and abandonment, is to understand site bounces. A bounce is when a user doesn't make it past the landing page. They get to your site, and for one reason or another, decide they want to go somewhere else. Was your site slow? Was there an error? How often is this happening and why?

The Bounce Analysis dashboard goes into much greater depth than the standard out-of-the-box bounce metrics. Channel analysis helps you understand if users are bouncing more from desktop browser or mobile devices. Third Party/CDN analysis can help determine if a sudden increase in 3rd Party/CDN time contributes to an increase in bounces. Similarly, the impact can be seen by tracking increases in the number of client errors, DNS time, Request Time (time spent on the SCC backend), Speed Index, and Visually Complete.

Tracking bounce rate by landing page by count or visually complete time of the landing page also helps inform the business as to where to concentrate efforts on site improvement to help eliminate bounces.

 

Salesforce Commerce Third Party & CDN Performance Analysis

The promise of third parties & CDNs, in terms of JavaScript libraries, style sheets and content delivery, is that performance will be faster and more customized, which results in happier users. If deployed properly, and if the third-party & CDN sources remains available, all is well. However, we at Dynatrace have seen way too many examples of websites being impacted by third-party or CDN outages. Even worse, we still see organizations loading non-critical elements like the Facebook, Twitter and Pinterest buttons before the page onload event. The Third-Party & CDN Performance Analysis dashboard provides a simple way to track the performance of your third parties & CDNs and measure their impact on page performance and your customers.

Client Dashboards

 

Salesforce Commerce QA Performance

An all too common mistake is to start monitoring performance in Production. Performance starts before the first line of code is written. The Salesforce Commerce Cloud provides for multiple pre-production environments, so it’s a good idea to monitor performance in some of those environments to catch non-load related performance issues well in advance of deploying to production.

Utilize Dynatrace User Experience Management in these early cycles to detect performance early in the cycle. With the QA Performance dashboard, development teams can leverage the traffic QA and UAT generate to find pages and actions that are slow under no-load. If a page is slow, especially under no load, is the problem in the backend Salesforce Commerce code or is the latency in the browser? Drill down to the User Action PurePath to find out.

Additionally, client JavaScript errors are typically harder to spot. Unless testers are looking at the browser console output, many errors can go undetected. With the QA Performance dashboard, you can get a jump start on finding these errors whenever any tester or browser driven test is running in the environment. No-load performance problems should be found and fixed early.

 

Salesforce Commerce User Experience Key Metrics

The end user is everything to your business. Your teams spend a lot of time fine tuning the store and setting things up so you can provide a unique, custom tailored experience to your end user. But does that experience live up to both you and your customer’s expectations in the real world? Is the landing page slower than expected? Is there a problem with performance in a particular browser, device or geographical location?

Dynatrace UEM offers a wide range of User Experience KPIs which help the Business and Development teams focus their attention on making improvements where it counts. Geographic user experience can help drive decisions about CDN usage. Tracking both the most frequent and the slowest user actions provides a focus for improvement projects. The UEM KPI dashboard brings these metrics and many more together in a single view to facilitate understanding the many aspects of loading a page that can impact performance for the end user. 

 

Salesforce Commerce Business Dashboard

The Salesforce Commerce Cloud provides robust customization to make each user’s visit successful. But how do you, as a business, know what’s working and what’s not? Can you trend sales revenue today vs. same day last week, same day last month or year? How do Cyber Monday’s sales look this year compared to last year? And most importantly, if there is a deviation, positive or negative, can that be traced back to any performance improvements or degradations? Did a poorly performing marketing landing page lead to increased bounces? Did a small change in the checkout workflow lead to an increase in abandoned carts and if so, how much potential revenue was lost?

Dynatrace User Experience Management is gathering every user’s visit, every user’s click, and more. Why not put that data to work for the business? The Business Dashboard is an excellent tool for tracking Order, Revenue, and Customer trends. It provides some examples of what types of business analytics can be achieved. On top of that, even more complex, multi-dimensional business analytics can be achieved at no extra cost with Dynatrace PureLytics.

 

Salesforce Commerce Third Party & CDN Performance Analysis

The promise of third parties & CDNs, in terms of JavaScript libraries, style sheets and content delivery, is that performance will be faster and more customized, which results in happier users. If deployed properly, and if the third-party & CDN sources remains available, all is well. However, we at Dynatrace have seen way too many examples of websites being impacted by third-party or CDN outages. Even worse, we still see organizations loading non-critical elements like the Facebook, Twitter and Pinterest buttons before the page onload event. The Third-Party & CDN Performance Analysis dashboard provides a simple way to track the performance of your third parties & CDNs and measure their impact on page performance and your customers.

 

Salesforce Commerce Visits

User experience is, as the name suggests, all about the user. It’s not enough, though, to look at aggregate data about the performance of a page or action from the user’s perspective. A business should care about each user, individually. User Experience Visits do just that. Dynatrace captures each user’s page loads and page actions and groups, and groups them into a visit. A Visit doesn’t just show each user’s journey through the site, but also provides information on the browser/device they’re using, their location, whether they converted or abandoned, identifies them as a real user, synthetic user or spider/bot and more.  However, most important, when a user reports a problem, either by broadcasting it loudly on social media or by calling customer support, you can look up that user’s visit and see exactly what happened and find out why. You can also answer the question, was that problem a one-off or is it an emerging trend?

 

Salesforce Commerce Web Page Performance Analysis

Select a page and analyse performance metrics specific to the page, including: Load Time vs. Perceived Render Time/Visually Complete/Speed Index, W3C Landmarks: Request Start, Document Interactive & Document Fetch Done, and W3C Navigation Steps: SSL, Document Response, Document Request, DNS, Connect

 

 

 

Installation

First, setup the Demandware store to inject the UEM tag. The easiest way to do this is with the Demandware Dynatrace Link Cartridge.

Because UEM for Demandware is leveraging CORS, a separate Apache web server has to be setup in order to serve and collect UEM data. The apache instance can run on the same box as the dynatrace server, provided it has enough server resources to accommodate the needs of both the Dynatrace components and Apache components.   

To install the fastpack:

Just download and import the FastPack on your Dynatrace Server (see Plugin Management).

The FastPack is looking for a web server agent that starts with the name 'demandware_cors'.  When configuring the Web Server Agent on Apache, be sure to provide this name in the dtwsagent.ini file. If you'd like to use a different name, make sure to change the name in the agent configuration in the system profile. 

Because the Demandware integration with UEM leverages CORS, there are a few measures that will likely have to be customized to your environment.

Customizations:

Dynatrace for Salesforce Commerce Cloud is only for UEM via CORS as java agents are not allowed on the Salesforce Commerce JVMs. As a result, some of the custom measures and business transactions in the fastpack are dependent User Action names and CSS Selectors specific to the Salesforce Commerce supplied SiteGenesis store. Because the web frontend of a Salesforce Commerce store can be customized, there's no guarantee the foundation of the measures will exist in your store. However, these can easily be replaced.

Customization #1: Username Tag

For the Username Tag, this fastpack leverages the CSS Selector:

which is stored in a Page Action Metadata measure called Username. The following Transformation regular expression is run on the result:

In the case of SiteGenesis, when a user is not logged in, the value is filled in with 'Login / Register'. The regex used here excludes this state so that visits are not mis-tagged with the default value. If your store displays the username with a different CSS Selector, adjust the particulars in the corresponding sections.

For more examples of CSS Selectors, please refer to this page on our Answers Community

Username UEM Configuration:



Username Meta Measure Configuration

To learn more about metadata measures, please refer to Dynatrace documentation.

Customization #2: Conversion Goal

The Conversion Goal is a Page/User action used to identify when a user completes an order. Using a conversion goal has many benefits to understanding the conditions under which a user did or did not complete a purchase.

In the Salesforce Commerce Fastpack, we configured the Conversion Goal to be set to a measure called OrderConfirmationNumber. This measures is based on a CSS Selector Meta Measure that picks up the order id from the order confirmation page.

You can change your conversion goal by substituting any other measure you create.

Conversion Goal UEM & CSS Selector:

 

Conversion Goal Measure

Customization #3: Orders and Revenue

In order to track orders and revenue from orders over time, a User Action business transaction called Orders was created. This is slightly different than standard conversions as a conversion is visit based. If a user makes multiple orders in a single visit, that counts as 1 conversion. However, since I've personally made several orders on commerce sites in a single visit, I thought it would be best to track orders and revenue by the occurence based on User Actions. This way, if multiple orders are made in a single visit, each order and revenue value will be tracked. This Business transaction looks for every occurence of a user landing on the OrderConfirmationPage and tracks the number of occurrences, PurchaseValue and Client Errors on the page. These can additionally be split by client type/family, country, User Experience Index of Visit, Operating System or Application

The Business Transaction is reliant on eight measures, two of which you will have to customize to your environment:

  • OrderConfirmationPage
  • PurchaseValue
  • Client Type of Visits
  • Country of Visits
  • User Experience Index of Visits
  • Operating System of Visits
  • Client Family of Visits
  • Application

Orders Business Transaction

The two measures you will likely have to customize are:

  • OrderConfirmationPage
  • PurchaseValue

OrderConfirmationPage

This measure is based upon the destination page URI containing the following, based on the SiteGeneisis store

If your order confirmation URI is different, please adjust this.

OrderConfirmationPage Measure

PurchaseValue

This measure has two parts: 1) custom JavaScript code in your page to capture the order value 2) the measure. This measure captures the total value from the order confirmation page.

Custom javaScript Code

The Dynatrace JavaScript ADK is already embedded in your UEM code. As long as UEM is deployed in your store, the ADK is available. One thing to note - since UEM is being injected asynchronously, this means that the ADK is asynchronously loaded as well. Be sure to only use the ADK and accompanying js code after the ADK is loaded. For more info, please refer to the Dynatrace JavaScript ADK documentation.

In the SiteGenesis store, when a order is successfully completed, the user lands on the order confirmation page which lists the order total, among other things. This script works for SiteGenesis, but you may have to modify it based on your store's design. This example leverages jquery. I should also mention that I'm not a js expert, so any improvements on this are welcome in the comments.

In SiteGeneis store, add the following to templates->default->checkout->confirmation->confirmation.isml

This script captures the payment-amount text, strips the extraneous characters, converts it to a float and then passes it back to dynatrace with the Dynatrace JS ADK function 'dynaTrace.reportValue'. The value is passed in a variable called PurchaseValue. Please note, the function also strips out any commas in the numeric value. This is done because for now, dynatrace cannot handle a comma in a numerica value being passed back. Once this issue is resolved, this can all be done with the CSS Selector like used for UserName.

the Measure

The PurchaseValue measure is simply a JavaScript ADK Value (User Actions) measure, set to pick up the value of PurchaseValue as passed back from the ADK.

PurchaseValue Measure:

Customization #4: Abandoned Cart

The Abandoned Cart measure counts the number of Visits where users added at least one item to their cart but did not purchase. Along with counting how many abandoned carts there are in a given time period, the business transaction also tracks which pages customers are abandoning on, the response time of the exit page, the monetary value of the abandoned cart, the Client Type and Family of the Visits, number of client errors in the visit, user experience of the visit, User Experience Reason of the visit, Landing page of the visit, Operating System and Country.

The Business Transaction is reliant on 14 measures, two of which you will have to customize to your environment:

  • Add to Cart User Action Count: a User Action Count measure based on the syntax of your store's Add To Cart button.
  • miniCartValue: a measure that evaluates the numeric value of the cart passed to Dynatrace via the JavaScript ADK
  • Non Conversion Goal: A conversion goal measure that tracks when users don't convert. This only works when the Conversion Goal is set as in Customization #2
  • User Action Duration: A measure that will track the response time of the Abandoned Cart Visit's Exit page.
  • Count Client Errors: a measure that counts the total client errors during the visit
  • User Experience Index
  • User Experience Index of Visits Reason: a splitting that tells the reason for the UE Index.
  • Client Family of Visits: this measure will split the abandoned carts by Browser make (firefox, chrome mobile, etc)
  • Client Type of Visits: this measure will split the abandoned carts by browser type of visit (Desktop, mobile, synthetic)
  • Visits - Exit Page - BT: a measure that captures the exit page of a visit
  • Country of Visits: A splitting to analyse lost revenue by Country
  • Landing Page of Visits: a splitting to show landing page of visits to help determine lost revenue by site entry point.
  • Operating System of Visits: a splitting which helps track lost revenue by the User's OS
  • Application: If you define more than one application

Abandoned Cart Business Transaction

The two measures you will likely have to customize are:

  • Add to Cart User Action Count
  • miniCartValue

Additional Abandoned Cart Business Transactions

In the AppMon 7 Fastpack, there are 3 additional Abandoned Cart Business Transactions to help with analysis of abandoned carts and are used in the web dashboards.

  • Abandoned Cart - Client Errors: which tracks abandoned carts with client errors.
  • Abandoned Cart - Not Satisfied: which tracks abandoned carts with a user experience of Not Satisfied (Tolerating or Frustrated)
  • Abandoned Cart - Client Errors: which tracks abandoned carts where there were slow user actions. The default threshold is that there is a single user action (max) with a duration of 10 seconds or over. The measure "User Action >= 10 seconds" can be edited if you prefer a different. Or, if you prefer to use a metric like Visually Complete, simply create a new visually complete measure modeled on this measure and replace it in the Business Transaction.

Add to Cart User Action Count

This measure is based upon the button name of Add to Cart. The value the measure is looking for is an action name regular expression:

The regular expression looks for a User Action containing 'add to cart' regardless of capitalization and what precedes or follows it.

 

Add To Cart Measure:

miniCart Value

This measure has two parts: 1) custom JavaScript code in your page to capture the minicart value 2) the measure. This measure also assumes, like in the SiteGenesis store, the minicart value is exposed on every page once a user adds to cart. If your store is setup differently, you'll have to modify to capture the cart value where it's exposed and evaluate the last captured value in your cart.

Custom javaScript Code

The Dynatrace JavaScript ADK is already embedded in your UEM code. As long as UEM is deployed in your store, the ADK is available. One thing to note - since UEM is being injected asynchronously, this means that the ADK is asynchronously loaded as well. Be sure to only use the ADK and accompanying js code after the ADK is loaded. For more info, please refer to the Dynatrace JavaScript ADK documentation.

In the SiteGenesis store, when an item is added to the cart, the minicart is available on all of the rest of the pages in the visit. This script works for SiteGenesis, but you may have to modify it based on your store's design. This example leverages jquery. I should also mention that I'm not a js expert, so any improvements on this are welcome in the comments.

In SiteGeneis store, add the following to templates->default->checkout->cart->minicart.isml

This script captures the minicart subtotal, strips the extraneous characters, converts it to a float and then passes it back to dynatrace with the Dynatrace JS ADK function 'dynaTrace.reportValue'. The value is passed in a variable called miniCartValue. Please note, the function also strips out any commas in the numeric value. This is done because for now, dynatrace cannot handle a comma in a numerica value being passed back. Once this issue is resolved, this can all be done with the CSS Selector like used for UserName.

the Measure

The miniCartValue measure is simply a JavaScript ADK Value (User Actions) measure, set to pick up the value of miniCartValue as passed back from the ADK.

miniCartValue Measure:

Contribution

Feel free to contribute any changes on Github

 

Fast Pack Details

Name

Salesforce Commerce Cloud (Demandware) FastPack

Version

2.0.0

dynaTrace Version

6.5

DemandwareVersion 15+

Author

Brian Wilson

License

dynaTrace BSD

Support

Community Supported

FastPack Contents

Fastpack Download contains:

  • Dashboards (see below)
  • Template Profile

fastpack 2.0.0 (dynaTrace 6.5)

 

Dynatrace Free Trial with Salesforce Commerce Cloud

If you are interested in a Free Trial of Dynatrace User Experience Management on your Demandware platform, please click here.

 

Dashboards

 

Salesforce Commerce UEM Key Metrics Client Version

The end user is everything to your business. Your teams spend a lot of time fine tuning the store and setting things up so you can provide a unique, custom tailored experience to your end user. But does that experience live up to both you and your customer’s expectations in the real world? Is the landing page slower than expected? Is there a problem with performance in a particular browser, device or geographical location?

Dynatrace UEM offers a wide range of User Experience KPIs which help the Business and Development teams focus their attention on making improvements where it counts. Geographic user experience can help drive decisions about CDN usage. Tracking both the most frequent and the slowest user actions provides a focus for improvement projects. The UEM KPI dashboard brings these metrics and many more together in a single view to facilitate understanding the many aspects of loading a page that can impact performance for the end user. 

 

Salesforce Commerce UEM Key Metrics Web Version

This is the Web version of the UEM Key Metrics Dashboard.

Salesforce Commerce Business Client Dashboard
The Salesforce Commerce Cloud provides robust customization to make each user’s visit successful. But how do you, as a business, know what’s working and what’s not? Can you trend sales revenue today vs. same day last week, same day last month or year? How do Cyber Monday’s sales look this year compared to last year? And most importantly, if there is a deviation, positive or negative, can that be traced back to any performance improvements or degradations? Did a poorly performing marketing landing page lead to increased bounces? Did a small change in the checkout workflow lead to an increase in abandoned carts and if so, how much potential revenue was lost?

Dynatrace User Experience Management is gathering every user’s visit, every user’s click, and more. Why not put that data to work for the business? The Business Dashboard is an excellent tool for tracking Order, Revenue, and Customer trends. It provides some examples of what types of business analytics can be achieved. On top of that, even more complex, multi-dimensional business analytics can be achieved at no extra cost with Dynatrace PureLytics.

Salesforce Commerce Business Web Dashboard
This is the Web Version of the Business Dashboard

Salesforce Commerce Third Party Performance Analysis Web Dashboard
The promise of third parties, in terms of JavaScript libraries, style sheets and content delivery, is that performance will be faster and more unique, which results in happier users. If deployed properly, and if the third-party source remains available, all is well. However, we at Dynatrace have seen way too many examples of websites being impacted by third-party outages. Even worse, we still see organizations loading non-critical elements like the Facebook, Twitter and Pinterest buttons before the page onload event. The Third-Party Performance Analysis dashboard provides a simple way to track the performance of your third parties and measure their impact on page performance and your customers.

Salesforce Commerce Third Party Performance Analysis Client Dashboard
This is the client version of the Third Party Performance Analysis Dashboard

Salesforce Commerce Visits Dashboard
User experience is, as the name suggests, all about the user. It’s not enough, though, to look at aggregate data about the performance of a page or action from the user’s perspective. A business should care about each user, individually. User Experience Visits do just that. Dynatrace captures each user’s page loads and page actions and groups, and groups them into a visit. A Visit doesn’t just show each user’s journey through the site, but also provides information on the browser/device they’re using, their location, whether they converted or abandoned, identifies them as a real user, synthetic user or spider/bot and more.  However, most important, when a user reports a problem, either by broadcasting it loudly on social media or by calling customer support, you can look up that user’s visit and see exactly what happened and find out why. You can also answer the question, was that problem a one-off or is it an emerging trend?

Salesforce Commerce QA Performance Dashboard
An all too common mistake is to start monitoring performance in Production. Performance starts before the first line of code is written. The Salesforce Commerce Cloud provides for multiple pre-production environments, so it’s a good idea to monitor performance in some of those environments to catch non-load related performance issues well in advance of deploying to production.

Utilize Dynatrace User Experience Management in these early cycles to detect performance early in the cycle. With the QA Performance dashboard, development teams can leverage the traffic QA and UAT generate to find pages and actions that are slow under no-load. If a page is slow, especially under no load, is the problem in the backend Salesforce Commerce code or is the latency in the browser? Drill down to the User Action PurePath to find out.

Additionally, client JavaScript errors are typically harder to spot. Unless testers are looking at the browser console output, many errors can go undetected. With the QA Performance dashboard, you can get a jump start on finding these errors whenever any tester or browser driven test is running in the environment. No-load performance problems should be found and fixed early.

Salesforce Commerce Web Page Performance Analysis
Select a page and analyse performance metrics specific to the page, including: Load Time vs. Perceived Render Time, W3C Landmarks: Request Start, Document Interactive & Document Fetch Done, and W3C Navigation Steps: SSL, Document Response, Document Request, DNS, Connect

 

Installation

First, setup the Demandware store to inject the UEM tag. The easiest way to do this is with the Demandware Dynatrace Link Cartridge.

Because UEM for Demandware is leveraging CORS, a separate Apache web server has to be setup in order to serve and collect UEM data. The apache instance can run on the same box as the dynatrace server, provided it has enough server resources to accommodate the needs of both the Dynatrace components and Apache components.   

To install the fastpack:

Just download and import the FastPack on your Dynatrace Server (see Plugin Management).

The FastPack is looking for a web server agent that starts with the name 'demandware_cors'.  When configuring the Web Server Agent on Apache, be sure to provide this name in the dtwsagent.ini file. If you'd like to use a different name, make sure to change the name in the agent configuration in the system profile. 

Because the Demandware integration with UEM leverages CORS, there are a few measures that will likely have to be customized to your environment.

Customizations:

Dynatrace for Salesforce Commerce Cloud is only for UEM via CORS as java agents are not allowed on the Salesforce Commerce JVMs. As a result, some of the custom measures and business transactions in the fastpack are dependent User Action names and CSS Selectors specific to the Salesforce Commerce supplied SiteGenesis store. Because the web frontend of a Salesforce Commerce store can be customized, there's no guarantee the foundation of the measures will exist in your store. However, these can easily be replaced.

Customization #1: Username Tag

For the Username Tag, this fastpack leverages the CSS Selector:

which is stored in a Page Action Metadata measure called Username. The following Transformation regular expression is run on the result:

In the case of SiteGenesis, when a user is not logged in, the value is filled in with 'Login / Register'. The regex used here excludes this state so that visits are not mis-tagged with the default value. If your store displays the username with a different CSS Selector, adjust the particulars in the corresponding sections.

For more examples of CSS Selectors, please refer to this page on our Answers Community

Username UEM Configuration:



Username Meta Measure Configuration

To learn more about metadata measures, please refer to Dynatrace documentation.

Customization #2: Conversion Goal

The Conversion Goal is a Page/User action used to identify when a user completes an order. Using a conversion goal has many benefits to understanding the conditions under which a user did or did not complete a purchase. While there is only one CSS Selector used, two measures exist as the syntax captured by web vs. mobile web is very different. As with the example in the fastpack, you may find there's a different conversion target for mobile vs. desktop web. You can add multiple conversion goals.

In the Salesforce Commerce Fastpack, we configured the Conversion Goal to be set to a measures called OrderConfirmationNumber and OrderConfirmationMobileWeb. Both of these measures are based on CSS Selector Meta Measures that pick up the order id from the order confirmation page.:

You can change your conversion goal by substituting any other measure you create.

Conversion Goal UEM & CSS Selector:

Conversion Goal Measure

Customization #3: Orders and Revenue

In order to track orders and revenue from orders over time, a User Action business transaction called Orders was created. This is slightly different than standard conversions as a conversion is visit based. If a user makes multiple orders in a single visit, that counts as 1 conversion. However, since I've personally made several orders on commerce sites in a single visit, I thought it would be best to track orders and revenue by the occurence based on User Actions. This way, if multiple orders are made in a single visit, each order and revenue value will be tracked. This Business transaction looks for every occurence of a user landing on the OrderConfirmationPage and tracks the number of occurences and PurchaseValue. These can additionally be split by client type/family, country, User Experience Index of Visit, Operating System or Application

The Business Transaction is reliant on eight measures, two of which you will have to customize to your environment:

  • OrderConfirmationPage
  • PurchaseValue
  • Client Type of Visits
  • Country of Visits
  • User Experience Index of Visits
  • Operating System of Visits
  • Client Family of Visits
  • Application

Orders Business Transaction

The two measures you will likely have to customize are:

  • OrderConfirmationPage
  • PurchaseValue

OrderConfirmationPage

This measure is based upon the destination page URI containing the following, based on the SiteGeneisis store

If your order confirmation URI is different, please adjust this.

OrderConfirmationPage Measure


PurchaseValue

This measure has two parts: 1) custom JavaScript code in your page to capture the order value 2) the measure. This measure captures the total value from the order confirmation page.

Custom javaScript Code

The Dynatrace JavaScript ADK is already embedded in your UEM code. As long as UEM is deployed in your store, the ADK is available. One thing to note - since UEM is being injected asynchronously, this means that the ADK is asynchronously loaded as well. Be sure to only use the ADK and accompanying js code after the ADK is loaded. For more info, please refer to the Dynatrace JavaScript ADK documentation.

In the SiteGenesis store, when a order is successfully completed, the user lands on the order confirmation page which lists the order total, among other things. This script works for SiteGenesis, but you may have to modify it based on your store's design. This example leverages jquery. I should also mention that I'm not a js expert, so any improvements on this are welcome in the comments.

In SiteGeneis store, add the following to templates->default->checkout->confirmation->confirmation.isml

This script captures the payment-amount text, strips the extraneous characters, converts it to a float and then passes it back to dynatrace with the Dynatrace JS ADK function 'dynaTrace.reportValue'. The value is passed in a variable called PurchaseValue. Please note, the function also strips out any commas in the numeric value. This is done because for now, dynatrace cannot handle a comma in a numerica value being passed back. Once this issue is resolved, this can all be done with the CSS Selector like used for UserName.

the Measure

The PurchaseValue measure is simply a JavaScript ADK Value (User Actions) measure, set to pick up the value of PurchaseValue as passed back from the ADK.

PurchaseValue Measure:

Customization #4: Abandoned Cart

The Abandoned Cart measure counts the number of Visits where users added at least one item to their cart but did not purchase. Along with counting how many abandoned carts there are in a given time period, the business transaction also tracks which pages customers are abandoning on, the response time of the exit page, the monetary value of the abandoned cart, the Client Type and Family of the Visits as well as the User Experience Reason of the visit.

The Business Transaction is reliant on nine measures, two of which you will have to customize to your environment:

  • Add to Cart User Action Count: a User Action Count measure based on the syntax of your store's Add To Cart button.
  • miniCartValue: a measure that evaluates the numeric value of the cart passed to Dynatrace via the JavaScript ADK
  • Non Conversion Goal: A conversion goal measure that tracks when users don't convert. This only works when the Conversion Goal is set as in Customization #2
  • User Action Response Time: A measure that will track the response time of the Abandoned Cart Visit's Exit page.
  • Client Family of Visits: this measure will split the abandoned carts by Browser make (firefox, chrome mobile, etc)
  • Client Type of Visits: this measure will split the abandoned carts by browser type of visit (Desktop, mobile, synthetic)
  • Visits - Exit Page - BT: a measure that captures the exit page of a visit
  • Application: If you define more than one application

Abandoned Cart Business Transaction

The two measures you will likely have to customize are:

  • Add to Cart User Action Count
  • miniCartValue

Add to Cart User Action Count

This measure is based upon the button name of Add to Cart. The value the measure is looking for is an action name regular expression:

The regular expression looks for a User Action containing 'add to cart' regardless of capitalization and what precedes or follows it.

 

Add To Cart Measure:

miniCart Value

This measure has two parts: 1) custom JavaScript code in your page to capture the minicart value 2) the measure. This measure also assumes, like in the SiteGenesis store, the minicart value is exposed on every page once a user adds to cart. If your store is setup differently, you'll have to modify to capture the cart value where it's exposed and evaluate the last captured value in your cart.

Custom javaScript Code

The Dynatrace JavaScript ADK is already embedded in your UEM code. As long as UEM is deployed in your store, the ADK is available. One thing to note - since UEM is being injected asynchronously, this means that the ADK is asynchronously loaded as well. Be sure to only use the ADK and accompanying js code after the ADK is loaded. For more info, please refer to the Dynatrace JavaScript ADK documentation.

In the SiteGenesis store, when an item is added to the cart, the minicart is available on all of the rest of the pages in the visit. This script works for SiteGenesis, but you may have to modify it based on your store's design. This example leverages jquery. I should also mention that I'm not a js expert, so any improvements on this are welcome in the comments.

In SiteGeneis store, add the following to templates->default->checkout->cart->minicart.isml

This script captures the minicart subtotal, strips the extraneous characters, converts it to a float and then passes it back to dynatrace with the Dynatrace JS ADK function 'dynaTrace.reportValue'. The value is passed in a variable called miniCartValue. Please note, the function also strips out any commas in the numeric value. This is done because for now, dynatrace cannot handle a comma in a numerica value being passed back. Once this issue is resolved, this can all be done with the CSS Selector like used for UserName.

the Measure

The miniCartValue measure is simply a JavaScript ADK Value (User Actions) measure, set to pick up the value of miniCartValue as passed back from the ADK.

miniCartValue Measure:

Contribution

Feel free to contribute any changes on Github

 

Fast Pack Details

Name

Salesforce Commerce Cloud (Demandware) FastPack

Version

1.0.0

dynaTrace Version

6.3

DemandwareVersion 15+

Author

Brian Wilson

License

dynaTrace BSD

Support

Community Supported

FastPack Contents

Fastpack Download contains:

  • Dashboards (see below)
  • Template Profile

fastpack 1.0.0 (dynaTrace 6.3)

 

Dynatrace Free Trial with Salesforce Commerce Cloud

If you are interested in a Free Trial of Dynatrace User Experience Management on your Demandware platform, please click here.

 

Dashboards

 

Demandware Business Dashboard
Track visit metrics, Conversions, Abandoned Carts and Bounces. Track Conversions and Bounces by landing pages. Track Abandoned carts by Exit page to determine if there was a performance issue causing the user to abandon. Track Performance of the most common or slowest User Actions as well as learn which countries most users are visiting from and what page performance is like in different geographical zones.

Demandware Third Party Metrics
How are third parties components impacting the performance of your Demandware Store? This dashboard trends Page Actions with slow third party components over the last 6 hours, 24 hours, yesterday and last week. Understand the impact of third party components by comparing Third Party Load time with Document Load time and Page Load time compared to site traffic.

Demandware Third Party Metrics - Web Dashboard
This dashboard is a Web Dashboard that captures similar data to the Demandware Third Party Metrics Dynatrace client dashboard.

 

Demandware Web Page Performance Analysis
Select a page and analyse performance metrics specific to the page, including: Load Time vs. Perceived Render Time, W3C Landmarks: Request Start, Document Interactive & Document Fetch Done, and W3C Navigation Steps: SSL, Document Response, Document Request, DNS, Connect

Demandware User Experience - Key Analytic Metrics
Track User Experience and Visits across the globe, across browsers and devices.

Demandware Site Metrics
This dashboard juxtaposes Visit, Conversion, Abandonment and Bounce Rates with graphs detailing Load Time vs. Perceived Render Time (the time to load all images in the visible browser window) and W3C performance metrics - Connect, DNS, Document Request, Document Response

 

Site Metrics - Web Dashboard
This web dashboard is an analogue of the client Site Metrics dashboards with the addition of the User Experience World Map

Demandware Visits
The Visits dashboards shows the details of every user's visit, including every page action, their location, Browser, OS and more. If a user calls in with a complaint, you can easily find the user by their Username to see what went wrong.

Demandware Visit Metrics
Another variation on visit metrics such as Visits, Conversions, etc. This one contains Failed User Action statistics as well as a breakdown on geographical performance, visits by browser type, browser version and operating system.

Installation

First, setup the Demandware store to inject the UEM tag. The easiest way to do this is with the Demandware Dynatrace Link Cartridge.

Because UEM for Demandware is leveraging CORS, a separate Apache web server has to be setup in order to serve and collect UEM data. The apache instance can run on the same box as the dynatrace server, provided it has enough server resources to accommodate the needs of both the Dynatrace components and Apache components.   

To install the fastpack:

Just download and import the FastPack on your Dynatrace Server (see Plugin Management).

The FastPack is looking for a web server agent that starts with the name 'demandware_cors'.  When configuring the Web Server Agent on Apache, be sure to provide this name in the dtwsagent.ini file. If you'd like to use a different name, make sure to change the name in the agent configuration in the system profile. 

Because the Demandware integration with UEM leverages CORS, there are a few measures that will likely have to be customized to your environment.

Customizations:

Dynatrace for Demandware is only for UEM via CORS, as java agents are not allowed on the Demandware JVMs. As a result of this, some of the custom measures and business transactions in the fastpack are dependent User Action names and CSS Selectors specific to the Demandware supplied SiteGenesis store. Because the web frontend of a Demandware store can be customized, there's no guarantee the foundation of the measures will exist in your store. However, these can easily be replaced.

Customization #1: Username Tag

For the Username Tag, this fastpack leverages the CSS Selector:

which is stored in a Page Action Metadata measure called Username. The following Transformation regular expression is run on the result:

In the case of SiteGenesis, when a user is not logged in, the value is filled in with 'Login / Register'. The regex used here excludes this state so that visits are not mis-tagged with the default value. If your store displays the username with a different CSS Selector, adjust the particulars in the corresponding sections.

For more examples of CSS Selectors, please refer to this page on our Answers Community

Username UEM Configuration:



Username Meta Measure Configuration

To learn more about metadata measures, please refer to Dynatrace documentation.

Customization #2: Conversion Goal

The Conversion Goal is a Page/User action used to identify when a user completes an order. Using a conversion goal has many benefits to understanding the conditions under which a user did or did not complete a purchase. 
In the Demandware Fastpack, we configured the Conversion Goal to be set to a measure called Place Order Count. Place Order Count is a User Action Count measure based on the Action Name:

You can change your conversion goal by substituting any other measure you create.

Conversion Goal UEM:

Conversion Goal Measure

Customization #3: Abandoned Cart

The Abandoned Cart measure counts the number of Visits where users added at least one item to their cart but did not purchase. Along with counting how many abandoned carts there are in a given time period, the business transaction also tracks which pages customers are abandoning on.
The Business Transaction is reliant on three measures:

  • Add to Cart: a User Action Count method
  • Non Conversion Goal: A conversion goal measure that tracks when users don't convert. This only works when the Conversion Goal is set as in Customization #2
  • Visits - Exit Page - BT: a measure that captures the exit page of a visit

The only measure you may have to customize is Add to Cart, as it is based upon the button name of Add to Cart. The value the measure is looking for is an action name regular expression:

The regular expression looks for a User Action containing 'add to cart' regardless of capitalization and what precedes or follows it.

Add To Cart Business Transaction Measure:

Contribution

Feel free to contribute any changes on Github