End User Monitoring with AppDynamics - AppSphere16

End User Monitoring
with AppDynamics
AppDynamics Version 4.2

APPDYNAMICS CONFIDENTIAL AND PROPRIETARY 2
Notice
The information and materials included in this presentation (collectively,
the “Materials”) are the confidential and proprietary information of
AppDynamics, Inc. (the “Company”). No part of the Materials may be
reproduced, distributed, communicated or displayed in any form or by any
means, or used to make any derivative work, without prior written
permission from the Company. © 2016 AppDynamics, Inc. All rights
reserved.
All third party trademarks, including names, logos and brands, referenced
by the Company in this presentation are property of their respective
owners. All references to third party trademarks are for identification
purposes only and shall be considered nominative fair use under
trademark law.

Course
• Understand how EUM works in AppDynamics
• Navigate EUM in the AppDynamics controller
• Instrument Browser RUM (BRUM)
• CollectBRUM metrics
• Understand Browser Synthetic Monitoring
• Set up Synthetic jobs and snapshots
• Work with Synthetic sessions, pages,and metrics
• Instrument Mobile RUM
• CollectMobile RUM metrics
End User Monitoring with AppDynamics
Labs
• Instrument RUM agents
• Pull RUM metrics by country, device,and pages
• Troubleshootand analyze page performance
issues
• Analyze user behavior in your app
• Create a synthetic job
• Troubleshootusing synthetic sessions
• Pull Mobile RUM metrics by device and country
• Determine and troubleshootperformance issues
using Mobile RUM
Objectives

Topic 1 Introduction to End User Monitoring
Topic 2 Browser Real User Monitoring
Topic 3 Browser Synthetic Transactions
Topic 4 Mobile Real User Monitoring
Agenda

Scenario
Acme Online Book Co. is your company’s eCommerce application,
which sells books. Your company monitors the following pages (desktop)
and network requests (mobile) in the application.
Mobile Network
Requests
Login
www.ecommerce.com/rest/user
View books
…/rest/items
Add an item to shopping cart
…/rest/cart/1
Checkout
…/rest/cart/co
Desktop Page
Requests
Bookstore homepage
www.ecommerce.com/store
View books
…/store/viewitems.action
Add an item to shopping cart
…/store/viewcart!addtocart.action
Checkout
…/store/viewcart!senditems.action

A. What is AppDynamics EUM?
B. Where Does EUM Take Place?
C. Navigating To EUM
Agenda

What Is AppDynamics End User Monitoring?
Monitoring the transaction path
End User
Monitoring
Application
Performance
monitoring
Infrastructure
Visibility

What Is AppDynamics End User Monitoring?
Three EUM products connect your mobile and web apps performance
to your real users’ behavior or experience
Browser
Monitoring
Synthetic
Monitoring
Mobile
RUM
• Pages,AJAX and single
page app performance
• User sessions
• JavaScripterrors
• Global network of real browsers
• Performance and
availability monitoring
• Scripted jobs
• Crash reporting
• User sessions
• Network performance
• Custom data

End User Monitoring Helps Answer
How do crashes
and errors
impact user
experience?
What do
customer
journeys look
like across all
channels?
Are we
complying
with our
SLA?
Is a slow
page/screen
performance
being caused
by the front end
or the back end?
Where are my
users and what
devices,OS’s, and
app versions are
they using?
How does server
performance impact
end user
experience in
aggregate or in
individual cases?
Is my application
performing well
at all times
everywhere
around the world?
Which Ajax
or iframe calls
are slowing
down page load
time?

Agenda

Where Is EUM Data Stored?
Application
Performance
Management
Database
Monitoring
Transaction/
Log Analytics
End User
Monitoring
Controller Platform
Saas/On-Prem

Agenda

Navigating to EUM
1. Select User Experience
from primary navigation.
2. Select the type of app
to monitor.
3. Double-click App to monitor.
A. Add a new app
B. Customize app details
displayed below
1
2
3
A B

Lab 1
Log Into The AppDynamics Controller
URL <<your IP address>>/controller
Username admin
Password admin
Scenario
Your company has been using AppDynamics APM
and recently purchased the EUM productin order
to gain an end to end view of their application.
Note
Your Acme Online application and your AppDynamics
application are hosted on the same server.
Therefore, you will use the same IP address to
access both applications.Your IP address will be
provided by your instructor.

A. What is Browser EUM And How Does It work?
B. Instrumenting Browser RUM
C. Browser RUM Metrics
Agenda

What Is Browser RUM?
You can drill into the data to explore how
users experience your application in their
web browsers and answer questions like
Which clientside resource calls
are slowing down page load time?
How does server performance impactend user
experience in aggregate or in individual cases?
See how your web application is performing from the point of view of an end user

What Are The Benefits Of Browser RUM?
Reduce MTTR
• Quickly resolve web
performance bottlenecks
with end-to-end visibility
• Drill down into individual
user experience to respond
quickly and resolve web
app/site performance issues
Understand Your Users
• Understand End User
web experiences
and sessions across
the globe,in real-time
• Get browser-user insights
to optimize web experiences
Know How Your App
Is Being Used
• Track user sessions
in real-time to understand
and improve the business
impact of browser
performance on your KPIs

Overview Of How Browser RUM Works
AppDynamics manages the EUM cloud for SaaS implementations,
however you can host your own EUM cloud
adrum.js
is injected in
each browser
page,near
the top.
adrum.js starts
timer, configures
and asynchronously
downloads adrum-ext.js.
adrum-ext.js does most
of the work.
The agent
watches the
browser for
certain signals
and times them.
Data is uploaded
to the EUM cloud and
processed into a smaller
dataset for quick access.
Raw data is also stored
and can be accessed by
AppDynamics.It is stored
in the Events Service.
The controller
downloads the
data and you
have access.

Agenda

JavaScript Injection Options
There are five options to inject the adrum.js JavaScript into your code
1. Manual Injection
Download adrum.js and add it to the script tags within the head tags
of your application.
2. Container Assisted Injection
Nginx and Apache users can use the substitution features offered by
container extensions to auto-injectthe agentinto pages.
3. Automatic Injection
Uses AppD server-side agents to automatically add the adrum header
and footer to each of your web pages.
4. Assisted Injection JAVA ONLY
Targets specific Java classes and methods that return html for rewrite to
include adrum.js.
5. Assisted Injection ATTRIBUTE INJECTION
Manually provide hints in the page templates of specific app frameworks
that the server agentcan use to injectadrum.js.
MOST
COMMON

Manual Injection Overview & Configuration
3. Scroll sidebar down and select
Configuration.
4. Select Web JavaScript
Instrumentation tab.
5. Save the JavaScript agent at the
path below. Save it as adrum.js.
6. Add script tags within your head
tag, as close to the top of page as
possible after meta tags.
The EUM JavaScript agent is downloaded from your AppDynamics environment,
and the code is inserted into the head tags of your application
<!—Sample Script--><head>
<script>window['adrum-start-time'] =
new Date().getTime();</script>
<script src="/adrum.js"></script>
...
</head>

Instructor Demo 1
Injecting
the JavaScript Agent

End User Monitoring
Agenda

Browser RUM Apps List
1. Select User Experience from
primary navigation.
2. Select Browser Apps tab.
1
2
3
A
A. How are my apps doing
overall?

Navigating Browser RUM
A
A. Overall summary of all data.
Designed for dashboarding.
B. Filter and search raw session
records.
C.Pre-aggregated data
organized by page,down
to individual snapshots.
Similar to BT.
D.Filter and search
all raw page records.
B
C
D

Browser RUM Dashboard & Overview Tab
A
A. What is the distribution
of end user performance?
B. How is my app performing
over time for real users?
For synthetic tests?
C.How does my app perform
by country and which
countries are requesting
the most pages?
D.What are my users’ top
browsers and devices?
C D
Browser App Dashboard view is good for a high-level understanding of your apps overall
performance. Overview tab contains customizable widgets showing common usage metrics.
B

Lab 2
Know Your Browser Users
Scenario
Your manager has asked you to determine the top
countries accessing your app, and identify countries
with the most issues.This way, your team can develop
a plan to resolve issues in top priority regions.
Your manager has also asked you to determine what
devices,browser, and browser versions are being
used the most, so that your team can ensure that
these resources are closed monitored and issues
related to them can be resolved quickly.
Finally,the UX team is interested in knowing the pages
being requested the most so they can optimize the
user experience for these pages.

Pages & AJAX Requests
A
A. Which page and AJAX
requests are taking
the most time?
B. Double-click Request
to monitor
B
An aggregated view ofhow each
page,Ajax request, iframe, and
virtual page type are performing
over time.
Track the performance of individual pages, components, & understand emerging issues
iFrameAjax
Request
Virtual
Pages
Pages

Pages & AJAX Requests
A
A. Which part of the page load
is taking the most time?
Double-clicking a Page or
AJAX request takes you to a
graphical dashboard showing
a wide range of charted
performances characteristics
for that specific requesttype.
Shown is the dashboard for
a page or iFrame request.

Page Timing Breakdown
navigationStart
or start time
cookie
responseStart
or script timer
starts
responseEnd domContentLoadedEventStart
or onready
FRONT END TIME
loadEventEnd
or onload

Analyze Web Requests
Every single load eventis
collected and stored for a
limited period of time in the
AppDynamics Platform
Events Service. Using the
Analyze view you can filter
this cumulative data and
visualize the results.
What subset of my traffic is loading slowly and why?

Business Transaction Snapshots
A
A. Which transactions are performing slowly
or have errors?
Provides access to detailed information for individual requests and includes periodic
snapshots of normal as well as problematic requests.
1. Select User Experience from primary navigation.
3. Select Browser Snapshots tab.
4. Double-click Snapshotto monitor .
1
3
4
Normal UX Slow UX Very Slow UX Stall JS Error Correlated server side
transaction snapshot
Partial
Snapshot
Snapshot includes
resource timing info

Lab 3
Troubleshoot With Pages & AJAX Requests And Analyze
Scenario A
You were notified that a particular page in your
application is performing slowly.You would like to
check how the frontend of the page is performing,
to see if the issue is related to frontend resources.
If the backend is causing the lag, you would like to
navigate to troubleshootthe problem using
AppDynamics APM.
Scenario B
You would like to see what pages had browser
transactions with the very slowestresponse times.
You would then like to filter performance data by one
of the pages, and look for browser snapshots with
correlating backend transaction snapshots.Using
this information,you can troubleshootthe slow
transactions on both the frontend and the backend.

What Is A Browser Session?
A browser session tracks an individual user’s journey using page loads,
virtual page loads, iFrames, and Ajax requests (if customers opt in).
In this example,a session might capture the session data involved in a user
logging in (start), selecting and paying for products, and logging out(end).
This is an example e-commerce session:
09:30:04.01 to
09:30:07.50
09:30:10.05 to
09:30:10.50
09:30:11.30 to
09:30:12.10
09:30:12.15 to
09:30:14.20
09:30:15.01 to
09:30:15.20

Browser Session
Scan the data or filter and sort to get exactly the data you’re looking
for through Data and Visualization views

Filter & Sort Browser Sessions
A
A. The filter will display
at the top and is editable
1. Select Sessions
in the sidebar.
2. Click Field Name
to view filter values.
3. Click Value Name to filter.
4. Click the table header to sort.
5. Double-click Session
for details.
1
3
4
2
5

Session Details
A
A. What Components took
the longest?
B. Which Resources were
the slowest?
C.Which Business Transactions
took the longest?
1. Select a Page to view details.
1
B C

Lab 4
Know How Your Browser App Is Being Used
Scenario A
The product team would like to know how many
users abandon the app after visiting a single page.
Scenario B
The UX department is interested in optimizing the
experience of using the browser app on mobile and
tablet devices. It is only necessary to access three
pages to complete a purchase. The team would like
to know what percent of users take more than three
pages to complete a purchase. They would also like
to know which pages are visited.

A. What is Browser Synthetic Monitoring?
B. Schedule Synthetic Jobs
C. On Demand Synthetic Snapshots
D. Synthetic Sessions,Pages, & Metrics
Agenda

What Is Browser Synthetic Monitoring?
Geographically distributed agents monitor Browser Synthetic Transactions
Browser synthetic monitoring allows you
to monitor the performance and availability
of critical pages independently ofuser
generated load.
It can help with troubleshooting
and measuring SLA compliance.
Synthetic agents are currently delivered
as a SaaS service only. SaaS customers
can immediately getaccess to Browser
Synthetic monitoring.

What Is Browser Synthetic Monitoring?
Monitoring the transaction path
Synthetic TestsSynthetic Agents Can Test
Scheduled
Jobs
On-Demand
Snapshots
URL Selenium
Script

Real User v. Synthetic Monitoring?
Strengths
Real
User
Synthetic
Test
Predictable and repeatable tests
Establishing a baseline
Breadth of view into whatusers are experiencing
End to end analysis with backend correlation

Synthetic Overview
A
A. Jobs — Create, schedule,
and administer your
synthetic jobs.View
license consumption.
B. Sessions — Filter, search,
and view the results of
your synthetic jobs.
C. Pages — Pre-aggregated
data organized by page,
comparable to user data.
D. On-Demand — Run a single
synthetic test of any URL.
B
C
D

Agenda

Creating A Scheduled Synthetic Job
Only users with edit access can create/edit schedules
and users with read-only access can view them
1. Select Jobs from the sidebar.
2. Click Create a New Job
or Add.
3. Follow Steps 1-7 in
modal panel.
4. Double-click Snapshot
to monitor .
1
2 3

Agenda

Creating On-Demand Synthetic Snapshots
1. Select On-Demand
in the sidebar.
2. Click Generate
A Snapshotor (+).
3. Enter Info and click
Generate Snapshot.
4. Snapshotappears
in table list, double-click
to view details. 1
2
4
3

D. Synthetic Sessions, Pages, & Metrics
Agenda

Synthetic Data
SESSIONS
1. Select Sessions in the sidebar.
2. Double-click on Session in the table list.
P1
2
4
P2
PAGES
1. Select Pages in the sidebar & double-click
on a Page in the table list for metrics.
2. Optionally,click Compare RUM and Synthetic button.
S1
S2

Lab 5
Create A Synthetic Job And Troubleshoot Using Synthetic Sessions
Scenario
You wantto ensure that you’re complying with
your SLA requirements around the world.If you
are not meeting your SLA, you would like to
troubleshootany issues that are causing slow
performance.
Synthetic transactions will give you a reliable
way to strategically check performance around
the world.You will selectspecific browsers and
locations,and the script will specify a specific
user journey for the transactions.

A. What is Mobile RUM and how does it work?
B. Instrumenting Mobile RUM
C. Mobile RUM Metrics
Agenda

What Is Mobile RUM?
Mobile RUM allows you to understand your
native iOS or Android mobile application as
your end users actually use it. It provides
you with visibility into the functioning of the
application itselfand the application's
interactions with the network it uses and
any server-side applications itmay talk to.
You can answer questions like:
How many crashes have there been
in a certain region?
Which network requests are the slowest?

What Are The Benefits Of Browser RUM?
Reduce MTTR
• Get deep code level visibility
to identify and resolve crashes
and errors quickly and
efficiently.
• With AppDynamics APM,
discover business transactions
to provide mobile application
to back-end application
dependencies.
Understand Your Users
• Get accurate user insights
and visibility into every
user and their mobile
application activity.
• Get detailed visibility into
all network requests from
your mobile app.
Know How Your App
Is Being Used
• Track mobile user sessions
in real-time to understand
and improve the business
impact of your mobile apps
performance on your KPIs.

Overview Of How Mobile RUM Works
adrum.js starts
timer, configures
and asynchronously
downloads adrum-ext.js.
adrum-ext.js does most
of the work.
The agent
watches the
app for certain
signals and
times them.
Metrics are uploaded to the EUM
cloud and processed into a
smaller dataset.
Raw data is also stored and can
be accessed by AppDynamics.It
is stored in the Events Service.
The controller
downloads the
data and you
have access.

Agenda

Instrumenting Mobile RUM
To use Mobile RUM you add a small piece of highly
performantcode (i.e., the mobile agent) to the source
of your mobile application.
For iOS, the mobile agentis Objective-C code.
For Android,the mobile agentis Java code.
Metrics collected are similar to those collected for browser RUM with some differences

Several Ways To Instrument A Mobile Application
CocoaPods
Manual
Gradle
Maven
Ant
Manual
You will need to upload a dSYM (iOS) or ProGuard
(Android) file to ensure that your crash reports are
human readable.Normally you upload the file at the
time that you instrumentyour mobile application.

Agenda

Mobile RUM Apps List
How are my mobile apps doing overall?
1
2
A
3
A. How are my mobile apps
doing over all?
2. Select the Mobile Apps
tab to monitor.
3. Double-click App to access
performance data.

Mobile App Dashboard & Overview Tab
How are my mobile apps doing overall?
A
A. What is the distribution of network requesttime?
B. Are there HTTP and network errors?
C.How is my network speed over time?
D.What networks and OS versions are users on?
E. How many crashes have there been?
F. Which app versions and devices are crashing?
The Mobile App Dashboard view is good for getting
a high-level understanding ofhow your mobile app
is performing overall.
The Overview tab is made up of a set of widgets
showing common usage metrics and crash
information.The widgets can be customized. B
D
E
F
C

Lab 6
Know Your Mobile Users
Scenario
Your manager has asked you to determine what
mobile devices,mobile OS versions,and other
mobile resources are being used the most, so
that your team can ensure these resources are
closely monitored and issues related to them
can be resolved quickly.
Your manager has also asked you to determine
the top countries accessing your app, and
identify countries with the most issues. This
way, your team can develop a plan to resolve
issues in top priority regions.

Mobile Network Request
Display types of network requests to your applications that initiated on a mobile device
A
A. How is each request type
performing?
Click Network Request
in the sidebar.
B. Why is this request type
so slow?
Double-click to view:
• Summary stats
• Key performance times
• Load info
• Errors
• Related business
transactions
• Links to related business
transactions
B

Mobile Network Request Analyze
What subset of my traffic is loading slowly and why?
A
A. What subset of my traffic
is slow?
Every single network request
is collected and stored for a
limited amountof time in the
AppDynamics Platform Events
Service.
Using the Mobile Network
RequestAnalyze view,you
can filter this cumulative data
and visualize the results.

Crash Dashboard
1
1. Double-click a Unique Crash
to view details.
The Crash Dashboard
aggregates mobile application
crash data over time, using
the Events Service.
This service collects and
stores all the data collected
by the mobile agent.

If your application crashes,the agentcreates a crash
snapshotwith information to help analyze what
happened,including:
• the crashed function
• the source file containing the crashed function
• the line number,if available
• a stack trace of the app at the time of the crash
• breadcrumbs and user data (manual APIs)
Crash Snapshots
A
1. Double-click a Snapshotto view details.
A. What events led to the crash?
B. What are the key properties of the crash?
C.What is the full stack trace for the crash?
B
C
1

Mobile Sessions
1
1. Double-click a Unique Crash
to view details.
Mobile sessions allow you to
track your users' interactions
across time, as they navigate
an entire session with your app.
A session begins when a user
starts using your application and
ends after a configurable period
of user inactivity.
Data and Visualization views to scan data or filter & sort to get exactly the data
you’re looking for
A. Only Sessions with 1 crash
are showing.
A

Session Details
Session details show you the user’s session
journey,and let you see the front-end performance
for each screen view during the session.
You can also navigate to any related business
transaction snapshotthat was captured.
What was the users journey before the crash?
A. Crashes are shown in red.
Select a Screen View to see details.
B. What’s happening on the backend during
this session request? How long were events
during the selected screen view?
Click Event to View Details
C. Click blue icon to view related BT.
A
B
B
C

Lab 7
Troubleshooting Crashes Using Mobile RUM
Scenario A
You would like to gather information aboutthe app
crashes that have been occurring.In particular,you’ve
been asked to locate the issue in your code that is
causing the most crashes.You would like to collect
information aboutthe issue and related crashes in
order to develop a resolution plan.
Scenario B
Kyle Duffy, one of your customers, has called in
complaining ofan unusually long waittime that he
experienced while shopping on your website.You
would like to locate his session and determine what
caused this slow performance.

Lab 8
Know How Your Mobile App Is Being Used
Scenario
One type of network requestis performing slower
than the others.You would like to reach out to one
of the users who experienced this slow requestin
order to do some user research.You would also
like to troubleshootthe slow requesttype by
examining a related backend snapshot.

University
Appdynamics.com/university
Community
community.appdynamics.com Tech Webinars
Additional Learning Opportunity
What are the Resources?
Fan Club

University
Multiple Track Courses and Certifications @ appdynamics.com/university
Sign Up for Multiple Tracks and Course Dates
for Live Training Sessions
Watch quick task-based tutorials
Take Self-Paced courses to learn at your own pace
Access subscriber only contents

Community
Connect With Other Users And Experts @ community.appdynamics.com
Exchange information with other
Power Users and AppDynamics experts
Get AppDynamics-supported
and author-supported extensions

Tech Webinars
Attend for free
Every other Wednesday at10:00am PT
45 Min presentation followed by a Q&A session
View the Tech Webinars Schedule to register for
upcoming webinars and watch pastpresentations.

Join The FanClub
We love our customers and partners. Let us thank you for your ongoing support.
See new features and roadmaps
Try new products and beta programs
Access custom extensions and training
MeetAppDynamics Executives
Get premium swag and invitations to events
Sign up and claim your benefits
by clicking here to submit the request!

Thank You
Please fill out the survey:
https://www.surveymonkey.com/r/AppDynamicsUniversity
Your feedback is very important to us. We use it to help us improve our content
and incorporate new features to keep our courses relevantfor our audience.
Bradley King
bradley.king@appdynamics.com

End User Monitoring with AppDynamics - AppSphere16

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to End User Monitoring with AppDynamics - AppSphere16 (20)

More from AppDynamics (18)

Recently uploaded (20)

End User Monitoring with AppDynamics - AppSphere16