In this guided, hands-on lab, you will learn how to use the CA Application Performance Management (APM) browser agent to quickly and easily monitor applications. The CA APM browser agent can report on end-user business transactions in addition to simple URL reporting for better visibility into AJAX, Angular JS, desktop and mobile applications. Gain insights into full page load time, monitor AJAX checkout to determine what’s happening with errors and learn how to extend the agent to effectively monitor anything that your browser is capable of picking up. For more information, please visit http://cainc.to/Nv2VOe

1. Hands-on Lab: Quickly and Easily
Monitor Applications using CA
Application Performance
Management Browser Agent
Corey Cohen
DevOps: Agile Ops
CA Technologies
CA APM Product Management
DO5X241L

2. 2 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
© 2015 CA. All rights reserved. All trademarks referenced herein belong to their respective companies.
The content provided in this CA World 2015 presentation is intended for informational purposes only and does not form any type of
warranty. The information provided by a CA partner and/or CA customer has not been reviewed for accuracy by CA.
For Informational Purposes Only
Terms of this Presentation

3. 3 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Abstract In this guided, hands-on lab, you will learn how
to use the CA Application Performance
Management (CA APM) browser agent to
quickly and easily monitor applications. The CA
APM browser agent can report on end-user
business transactions in addition to simple URL
reporting for better visibility into AJAX, Angular
JS, desktop and mobile applications. Gain
insights into full page load time, monitor AJAX
checkout to determine what’s happening with
errors and learn how to extend the agent to
effectively monitor anything that your browser
is capable of picking up.
Corey Cohen
CA Technologies
APM Product
Management

4. 4 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Agenda
WHAT IS CA APM BROWSER AGENT?
HOW DOES BROWSER AGENT WORK?
QUESTIONS/ANSWERS
BASIC BROWSER AGENT DEPLOYMENT LAB
ADVANCED BROWSER AGENT DEPLOYMENT
CUSTOMIZING BROWSER AGENT
1
2
3
4
5
6

5. 5 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
What is CA APM Browser Agent?
 Lets you monitor web page load performance metrics
– Browser web timings:
 W3C Navigation Timing API
 Dynamic web pages in structured frameworks (AJAX, AngularJS)
 Mobile device breakdown
– Metric aggregation by browser type
– Integration into APM transaction traces
– breakdown of framework calls to an application
– Easy deployment by using the APM Java agent servlet tracer/filter
Formerly known as BRTM

6. 6 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
How Does Browser Agent Work?
The basics

7. 7 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
How Does Browser Agent Work?
Sequence of events

8. 8 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
How Does Browser Agent Work?
Naming Business Services and Business Transactions

9. 9 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
How Does Browser Agent Work?
 Average Browser Render Time (ms)
 Average Connection Establishment Time (ms)
 Average DNS Lookup Time (ms)
 Average Round Trip Time (ms)
 Average DOM Construction Time (ms)
 Average Page Load Complete Time (ms)
 Average Previous Page Unload Time (ms)
 Average Time to First Byte (ms)
 Average Time to Last Byte (ms)
 Responses Per Interval
Javascript Injection of W3C Instrumentation

10. 10 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
How Does Browser Agent Work?
 Total Resource Load Time
 Time to First Byte
 Response Download Time
 Callback Execution Time
 Invocation Count Per Interval
Note: Many frameworks are based on
Ajax such as AngularJS. Browser Agent
will collect information for these
frameworks out of the box.
Javascript Injection of Ajax Instrumentation

11. 11 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Basic Browser Agent Deployment Lab
 Navigate ATC GUI using Chrome, Firefox or IE
– localhost:8088
– User: user@example.com, password:acc
 Observe
– Browser Agent BT vertex’s in ATC
– Browser Agent Metrics under Business Segment in the Investigator
– Browser Agent rolled up metrics under Custom Metric Process
– Browser Agent component and key/value pairs in a transaction trace
Hands on lab (10-15 minutes)

12. 12 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Advanced Browser Agent Deployment
 introscope.agent.brtm.enabled=true
 introscope.agent.brtm.snippetInsertionEnabled=true
 introscope.agent.brtm.excludeURLList=
 introscope.agent.brtm.includeURLList=
 introscope.agent.brtm.jsFunctionMetricsEnabled=false
 introscope.agent.brtm.geolocation.enabled=false
 introscope.agent.brtm.resourceLimit=100
 introscope.agent.brtm.snippet.maxSearchingLength=32768
Commonly used Introscope Agent properties

13. 13 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Customizing Browser Agent
 Extend the Agent
– extFuncMap
 Add Custom Metrics for Web Pages
– extAddCustomPageMetric
 Add Custom Metrics for AJAX
– extAddCustomAjaxMetric
 Add Custom Metrics for JavaScript Function
– extAddCustomJSFuncMetric
 Add Miscellaneous Metrics
– extCollectMiscMetrics
Custom Java Script Instrumentation - apmbrtmextensibility.js

14. 14 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Customizing Browser Agent
 Adding custom transaction trace invocation data
– extAddCustomOptionalProperty
 Adding a custom name formatter for metric aggregation
– extNameFormatter
Custom Java Script Instrumentation - apmbrtmextensibility.js

15. 15 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Recommended Sessions
SESSION # TITLE DATE/TIME
DO5X189S
How to Achieve a Customer-Centric View in an Omni-
Channel World
11/18/2015 at 1:00 pm
DO5X194S
Monitor Microservices, Containers, Cloud Foundry and
Node with CA Application Performance Management
11/18/2015 at 4:30 pm
DO5X193S
Customize CA Application Performance Management
with Tips for Using the CA Application Performance
Management Open APIs
11/19/2015 at 4:30 pm

16. 16 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Must See Demos
Application Performance
Management and DevOps,
featuring APM use in
preproduction scenarios
Application Performance
Management
Theater 5
Application Performance
Management, Modern
Monitoring, featuring the
new APM Team Center
Application Performance
Management
Theater 5
Ensuring a “5 star” mobile
app experience with CA
Mobile App Analytics
Mobile App Analytics
Theater 5
Unified Monitoring: APM
Integrations including UIM
Application Performance
Management
Theater 5

17. 17 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Follow on Conversations At…
Smart Bar
Application
Performance
Management
Theater 5
Tech Talks
Application
Performance
Management
Theater 5

18. 18 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
Q & A

19. 19 © 2015 CA. ALL RIGHTS RESERVED.@CAWORLD #CAWORLD
For More Information
To learn more, please visit:
http://cainc.to/Nv2VOe
CA World ’15