RUM Script Injection

Applications Manager's Real User Monitoring offers insights into user interactions with your application by using a JavaScript snippet to monitor your application's webpages. Once the Real User Monitor is added in Applications Manager, a JavaScript snippet is provided in the monitor dashboard, which you need to copy and paste into the <head> tag of views in your application. You can track your own events and user activities from your web application using this code snippet.

In this help document, you will learn where and how to inject the JavaScript code snippet based on the frameworks and templates used in your application.

Prerequisites for script injection

Before injecting the RUM script, ensure that the following prerequisites are met:

JavaScript Snippet: Add Real User Monitor in Applications Manager and get the JavaScript Snippet.
Application code access: You need access to the source code of your application.

How to inject the JavaScript snippet manually?

JavaScript snippet needs to be placed in the HTML pages to be monitored in your web application. It should be injected in the head section of all the HTML pages as the first executable script or a common header or footer page of your application or website which you would like to monitor.

Framework examples for script injection

Following are some examples of how to set up browser monitoring for various web applications with different frameworks and templates:

Node.js application
PHP application
.NET application
Java application

Express and Pug

This example uses Express, a web application framework, and pug, a template module. Although the specifics are different with other frameworks, this general approach should work in most cases.

Copy the following code snippet and paste it in your layout.pug file:

html
head
title My Express.js Application
script(type="text/javascript").
| (function(w,d,s,r,k,h,m){
| if(w.performance && w.performance.timing && w.performance.navigation) {
| w[r] = w[r] || function(){(w[r].q = w[r].q || []).push(arguments)};
| h=d.createElement('script');h.async=true;h.setAttribute('src',s+k);
| d.getElementsByTagName('head')[0].appendChild(h);
| (m = window.onerror),(window.onerror = function (b, c, d, f, g) {
| m && m(b, c, d, f, g),g || (g = new Error(b)),(w[r].q = w[r].q || []).push(["captureException",g]);})
| }
| })(window,document,'http://localhost:7071/RUMScript.js?appKey=','apmr','********************');
body
h1 Welcome to My Express.js Application
// Rest of your Pug template content

Express and Swig

This example uses Express, a web application framework, and swig, a template module. Copy the following code snippet and paste it in your views/index.html file:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<script type="text/javascript">
(function(w,d,s,r,k,h,m){
if(w.performance && w.performance.timing && w.performance.navigation) {
w[r] = w[r] || function(){(w[r].q = w[r].q || []).push(arguments)};
h=d.createElement('script');h.async=true;h.setAttribute('src',s+k);
d.getElementsByTagName('head')[0].appendChild(h);
(m = window.onerror),(window.onerror = function (b, c, d, f, g) {
m && m(b, c, d, f, g),g || (g = new Error(b)),(w[r].q = w[r].q || []).push(["captureException",g]);})
}
})(window,document,'http://localhost:7071/RUMScript.js?appKey=','apmr','********************');
</script>
</head>
<body>

</body>
</html>

Hapi.js and Handlebar

Copy the following code snippet and paste it in your templates/homepage.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<script type="text/javascript">
(function(w,d,s,r,k,h,m){
if(w.performance && w.performance.timing && w.performance.navigation) {
w[r] = w[r] || function(){(w[r].q = w[r].q || []).push(arguments)};
h=d.createElement('script');h.async=true;h.setAttribute('src',s+k);
d.getElementsByTagName('head')[0].appendChild(h);
(m = window.onerror),(window.onerror = function (b, c, d, f, g) {
m && m(b, c, d, f, g),g || (g = new Error(b)),(w[r].q = w[r].q || []).push(["captureException",g]);})
}
})(window,document,'http://localhost:7071/RUMScript.js?appKey=','apmr','********************');
</script>
</head>
<body>

</body>
</html>

PHP application

Wordpress
Drupal

Wordpress

Copy the following code snippet and paste it in your website-home/wordpress/wp-content/themes/your-theme-name/index.php file:

Drupal

Copy the following code snippet and paste it in your website-home/drupal/themes/your-theme-name/index.html.twig file:

.NET application

Copy the following code snippet and paste it in your app-dir/Views/index.cshtml file:

Java application

Apache Struts
Java Server Faces

Apache Struts

Copy the following code snippet and paste it in your app-dir/webapp/jsp/header.jsp file:

Java Server Faces

Copy the following code snippet and paste it in your app-dir/webapp/xhtml/header.xhtml file: