通過Web & H5 SDK監控網站使用者資料 - Application Real-Time Monitoring Service

如果您需要瞭解瀏覽器頁面、行動裝置 AppH5頁面的使用者Session數、PV、UV、頁面載入時間等資料，或者根據使用者ID快速定位問題，從而提升網站的使用者體驗，可以在網頁程式中引入ARMS使用者體驗監控的Web & H5 SDK。

重要

阿里雲使用者體驗監控於2024年06月24日00:00:00（UTC+8）起正式商用，計費詳情，請參見計費說明。如果您在使用中有任何問題，請聯絡使用者體驗監控答疑DingTalk群（群號：67370002064）擷取協助。

方案概覽

建立應用：在控制台建立一個用於監控Web & H5頁面的應用，複製和儲存JavaScript指令碼，該指令碼以CDN方式引入Web & H5 SDK。
引入SDK：對於單個HTML檔案，可以在<body>部分插入指令碼代碼。對於多個HTML檔案，可以通過布局檔案引入指令碼，然後在所有頁面中引用該布局檔案。
查看監控：SDK會自動上報資料，您可以在應用詳情頁查看訪問網站的使用者資料。
建立警示：配置警示規則和通知策略，查看警示歷史。

資料準備

本文提供一個簡單的網站樣本程式，並以一台綁定公網IP的ECS執行個體作為網站的伺服器。登入ECS的步驟，請參見通過密碼或密鑰認證登入Linux執行個體。

使用者體驗監控按照會話（Session）數、自訂上報次數進行計費，一個OCU對應一定數量的會話數和自訂上報次數，每個使用者每個月有100 OCU的免費額度，計費資訊請參見計費說明。

1. 建立應用

登入ARMS控制台，進入使用者體驗監控>應用列表頁面，單擊添加應用。
在右側面板輸入應用程式名稱，單擊建立，其他參數保持預設，然後複製JavaScript指令碼代碼。
```
<script>
window.__rum = {
  "pid": "jjd****@37****",
  "endpoint": "https://jjd****-default-cn.rum.aliyuncs.com"
};
</script>
<script type="text/javascript" src="https://jjd****-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
```
參數
說明
pid
Web & H5應用的ID。
endpoint
Web & H5應用資料的上報地址。
<script type="text/javascript" src="...">
通過CDN方式載入Web & H5 SDK。

2. 引入SDK

對於單個HTML檔案，可以在<body>部分插入指令碼代碼。對於多個HTML檔案，可以通過布局檔案引入指令碼，然後在所有頁面中引用該布局檔案。本文的網站樣本程序shopping.zip通過布局檔案引入，您需要用上一步驟中的指令碼替換layout.html檔案中的<script>標籤的內容。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Site</title>
    <script>
        window.__rum = {
            "pid": "jj*****",  // 替換為實際的應用資訊
            "endpoint": "https://jj****-default-cn.rum.aliyuncs.com"
        };
    </script>
    <script type="text/javascript" src="https://jj******-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

引入SDK後，在伺服器的終端輸入python app.py運行網站程式。

3. 查看監控詳情

在瀏覽器輸入${ECS執行個體的公網IP:5000}訪問網站並操作。
在ARMS控制台的使用者體驗監控>應用列表頁面，單擊目標應用程式名稱，查看應用概覽、會話跟蹤、頁面訪問、資源載入等頁面，監控頁面的詳細說明請參見Web & H5監控詳情。

4. 建立警示

建立警示規則：配置警示應用、警示條件，通知策略配置為不指定通知策略。建立完成後複製警示規則ID：
建立通知策略：配置警示事件的匹配規則，條件配置為警示規則ID等於上一步中複製的ID，按照設定精靈配置事件分組和通知對象。
查看警示歷史：參見查看警示事件歷史。

後續步驟

本文使用預設的CDN同步載入方式，使用者體驗監控還支援CDN非同步載入和npm包的安裝方式，三種方式的配置步驟和使用情境，請參見接入Web & H5應用。
Web & H5 SDK支援應用ID、上報地址、應用環境等配置項，請參見SDK配置參考。

參數	說明
`pid`	Web & H5應用的ID。
`endpoint`	Web & H5應用資料的上報地址。
`<script type="text/javascript" src="...">`	通過CDN方式載入Web & H5 SDK。