RUM脚本注入

Applications Manager的实时用户监控通过使用JavaScript代码片段监控您的应用网页，为您提供用户与应用交互的洞察。一旦在Applications Manager中添加了实时用户监控器，监控仪表板会提供一个JavaScript代码片段，您需要将其复制并粘贴到 <head> 标签中您应用视图里。您可以使用此代码片段跟踪来自您的网页应用的自定义事件和用户活动。

在本帮助文档中，您将了解基于应用中使用的框架和模板，在哪里以及如何注入JavaScript代码片段。

脚本注入的先决条件

在注入RUM脚本之前，请确保满足以下先决条件：

JavaScript代码片段： 在Applications Manager中添加实时用户监控器并获取JavaScript代码片段。
应用代码访问权限： 您需要访问应用的源代码。

如何手动注入JavaScript代码片段？

JavaScript代码片段需要放置在网页应用中需要监控的HTML页面。这应当注入到所有HTML页面的head部分，作为第一个可执行脚本，或者注入到您想监控的应用或网站的公共头部或底部页面。

脚本注入的框架示例

以下是为不同框架和模板的各种网页应用设置浏览器监控的一些示例：

Node.js应用

Express和Pug

本示例使用Express，网页应用框架，以及pug，模板模块。尽管其他框架的细节不同，但这种通用方法在大多数情况下都适用。

复制以下代码片段并粘贴到您的 layout.pug 文件中：

html
head
title 我的Express.js应用
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 欢迎使用我的Express.js应用
// 您的Pug模板内容的其余部分

Express和Swig

本示例使用Express，网页应用框架，以及swig，模板模块。复制以下代码片段并粘贴到您的 views/index.html 文件中：

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>您的网站</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和Handlebar

复制以下代码片段并粘贴到您的 templates/homepage.html 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>您的网站</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应用

Wordpress

复制以下代码片段并粘贴到您的 website-home/wordpress/wp-content/themes/your-theme-name/index.php 文件中：

Drupal

复制以下代码片段并粘贴到您的 website-home/drupal/themes/your-theme-name/index.html.twig 文件中：

.NET应用

复制以下代码片段并粘贴到您的 app-dir/Views/index.cshtml 文件中：

Java应用

Apache Struts

复制以下代码片段并粘贴到您的 app-dir/webapp/jsp/header.jsp 文件中：

Java Server Faces

复制以下代码片段并粘贴到您的 app-dir/webapp/xhtml/header.xhtml 文件中：