Name: Working with Frontend in Dynatrace for SAP Commerce Cloud
Uploaded: 2025-1-17
Duration: 599 s
Description: This video demonstrates the Frontend Monitoring capabilities of Dynatrace in SAP Commerce Cloud. It presents you all the user interface tools, and explains you what type of metrics can be shown by each of them.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div>This video demonstrates the Frontend Monitoring capabilities of Dynatrace in SAP Commerce Cloud. It presents you all the user interface tools, and explains you what type of metrics can be shown by each of them.</div></div></div>

Working with Frontend in Dynatrace for SAP Commerce Cloud

Dynatrace Real User Monitoring,  commonly known as RUM,  is an essential component  of Digital Experience Monitoring.   It offers real-time insights  into how customers interact  with your digital platforms,  allowing you to understand user behavior  and to gain a comprehensive view  of end-user experience  over time through immediate analysis.  RUM collects crucial metrics directly from web browsers,  providing first-hand, accurate data  about user engagement with your applications.  This offers a genuine reflection  of the digital experience.  How does it work?   RUM operates through a JavaScript tag  embedded in the HTML  of your application's web pages.   It meticulously collects data on  every user action and session from the browser.  This enables you to instantly track  user actions on your site,  analyze their impact on performance,  identify problems or errors as they occur,  and access detailed user experience ratings  and geolocation breakdowns, and much more.   Moreover, Dynatrace RUM takes a step further  by correlating browser data  with server-side information  using Dynatrace OneAgent technology.  This provides a comprehensive,  end-to-end view of the user experience,  covering both front-end and back-end aspects.  As shown in the session details page,  the core concepts of RUM  revolve around user sessions and user actions.  A user session encompasses  each visit to your application,  whether through web, mobile, or custom apps,  and can span multiple applications.  The true strength of RUM lies  in real-time performance analysis.  With Dynatrace RUM, you can monitor and analyze application performance  as accessed by actual users.  This empowers you to instantly identify issues and bottlenecks,  allowing for proactive enhancements  to the user experience.   Dynatrace Frontend Application  ensures you have the tools and insights needed  to keep your applications performing  at their best.   We’ll now explore the key features  and use cases of Dynatrace Frontend Application monitoring,  focusing on how infographic-based application views can revolutionize your analysis  of web-based application performance.  The infographics offer intuitive application  views packed with features to streamline the performance analysis of your site.  Each area of the infographic is clickable,  offering access to deeper detail regarding each metric.  The performance analysis section  is a treasure trove of key performance metrics.  From load times to error rates,  each metric is designed  to give you a comprehensive understanding  of your application's efficiency and reliability.  The three dimensions of real user experience are Browsers, User Types, and Locations.  These dimensions offer a multifaceted view  into how users interact with your application,  ensuring every user journey  is smooth and efficient.  Application Performance Index score  is the key to measuring user satisfaction.  This metric aggregates user experiences  into a single, insightful score that shows at a glance how well your application performs from the user's perspective.   The user behavior view is where you'll find vital statistics such as active sessions,  actions per session,  entry and exit actions, bounce rates, and conversion goals.  These metrics provide a vivid picture  of how your users interact with your application,  from start to finish.   Choose Frontend under Applications Observability  to see all the monitored applications  in your environment.  For each application in the Applications table,  you see the general Apdex rating,  number of user actions per minute,  the page load and XML HTTP Request  or XHR action time, error rate, and 3rd party or CDN resources loaded per minute, etc.  Choose the TSA S1 Commerce Cloud Application  to see the application overview page. On the application overview page,  you see all the user actions in your commerce cloud application,  like the load actions and XHR actions etc.  From here you can do user session analysis  by choosing the Analyze user sessions button.  It will take you to the User sessions screen, where you can find the target user sessions,  check out the session details and each event  and action along the session timeline.  If you’re only focusing on a specific user type  and don’t want to see actions of other user types, you can filter the actions  by the user type filter at the top, eg., user type = Real users.  The other user type is Synthetic users,  which are essentially bots designed  to simulate real user interactions  with web applications.  They mimic the behavior of actual or real users and allow proactive monitoring of your application performance and availability.   Under the application name  are the tags and application detection rules.  Similar to any other entities  like services and processes in Dynatrace,  you can attach one or more tags  to an application,  It’s a great tool to group  and quickly find your target applications.  Applications like commerce cloud  are automatically detected by Dynatrace,  you can see the current detection rule applied  is domain starts with jsstorefront  and domain starts with electronics.  However you can configure  or fine tune the application detection rules.  In the Performance analysis section,  you see the throughput, duration  and errors of various actions,  as well as the end user experience rating Apdex and 3rd party resources and service providers.   Click on the Top browser tile  and choose the donut chart  to see a breakdown of all the browser types  like desktop and mobile browsers,  which initiated the user actions.  You will have a better idea  of which browser types are mostly  used by the end users,  and the action times and error rates  of each browser type.  This could be a very useful feedback  to improve the future product design and operation.   The Top user types tile provides a breakdown  of the different types of user  like Real users and Synthetic users,  and their contributions to all the user actions,  along with the action time, error rates  of each type of users.   The View geolocation breakdown allows you  to configure and sort the geolocations  by different metrics like the number of user actions, error rates,  the user Apdex ratings,  and XHR actions etc.   For example, select user action count  to see the min and max user action throughput for each detected geolocation.   The View full world map button  takes you to a visual world map view  of site traffics and user actions.  From there you can see the Apdex,  user actions,   load actions, XHR actions,  and errors distribution across the globe.   For example, select the Errors tab  to see the error distribution in different regions,  and on the right side you see the area chart  of error count and error rate across the selected timeline.  At the bottom right corner  is the region aggregate values for the selected metric.  You can also hover your mouse  over a country or region to see detailed metrics  on a popup.   Going back to the Application overview page,   the Load actions tile shows the visually complete load times  and load action throughput.   You can choose different aggregation methods  like Median, Average, 90th percentile etc. for the metrics.    XHR actions are the XML HTTP Requests  like Restful API AJAX calls  initiated from the storefront.   Next you see a bunch of composite metrics  and the contribution of different part  of response times.   Top 3 pages are based on the number of page views per minute.   At the bottom is the Top 3 included domains  from your application,   Back to the Performance analysis section,   you can click on Apdex rating  to see the end user experience rating distribution across the timeline.   Click on Errors tile to see the bar charts  for different types of errors,  errors by origins including 3rd party  and CDN resource loading errors   and top errors by resources.   On the Resources tab,   you see the 3rd party and CDN resource load action metrics.   In the Resources tile,  click on the different tabs  to see the detailed action throughput,  resource load time,  and action durations across the timeline.   The User behavior section provides  real time insights into the end user behaviors  like active sessions per user,  entry and exit actions and bounce rate, etc.  Choose the Active users pane  to see the percentage of new users  and returning users.   Choose View geolocation breakdown  to see the active sessions, active users,  bounce rate distribution across the globe.   The sessions pane allows you  to see the number of active sessions,  Started sessions, and Ended sessions across the timeline,  User engagement patterns like the number of actions per user session  and session durations.   The Peak activity intervals charts allow you to see the top 3 active session intervals  and top 3 session start intervals,  so that you know how to best schedule your maintenance  and manage your operation workload.   The Entry actions, Exit actions  and Bounce rate tiles  provide the entry and exit action duration,  throughput and end user Apex ratings and the bounce rate across the timeline.   If you define the conversion goals,  you can select the Overall conversion tile  to see real time conversion rates over time.   The problems section lists out  all the detected problems  during the selected timeframe.  Further down the page you can see the Top conversion goals,  Top 3 bounces and Top entry and exit actions.    This concludes the demo.