接入Web & H5應(yīng)用
ARMS用戶體驗監(jiān)控針對Web & H5主要監(jiān)控瀏覽器頁面以及移動應(yīng)用中的H5頁面,通過頁面內(nèi)嵌JS腳本或NPM包的方式,采集應(yīng)用站點運行過程中的性能指標,追蹤異常問題,幫助您提升自身應(yīng)用站點的用戶體驗。
阿里云用戶體驗監(jiān)控于2024年06月24日00:00:00(UTC+8)起正式商用,計費詳情,請參見計費說明。如果您在使用中有任何問題,請聯(lián)系用戶體驗監(jiān)控答疑釘釘群(群號:67370002064)獲取幫助。
創(chuàng)建應(yīng)用
登錄ARMS控制臺。
在左側(cè)導(dǎo)航欄選擇
,并在頂部菜單欄選擇目標地域。在應(yīng)用列表頁面單擊添加應(yīng)用。
在創(chuàng)建應(yīng)用面板單擊Web & H5。
在接入Web & H5面板輸入應(yīng)用名稱和描述,然后單擊創(chuàng)建。
說明應(yīng)用名稱唯一,不能與已創(chuàng)建的應(yīng)用名稱重復(fù)。
創(chuàng)建成功后,當(dāng)前應(yīng)用將會在STEP2區(qū)域自動生成對應(yīng)的pid和endpoint地址。
在STEP2區(qū)域選擇安裝方式并安裝探針SDK。
CDN同步加載
復(fù)制下方代碼,并粘貼至HTML頁面
<body>
中的第一行。說明請將以下代碼中的
pid
和endpoint
替換為當(dāng)前應(yīng)用對應(yīng)的pid和endpoint地址。<script> window.__rum = { pid: "your app id", endpoint: "your endpoint" }; </script> <script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
CDN異步加載
復(fù)制下方代碼,并粘貼至HTML頁面
<body>
中的第一行。說明請將以下代碼中的
pid
和endpoint
替換為當(dāng)前應(yīng)用對應(yīng)的pid和endpoint地址。<script> !(function(c,b,d,a){c[a]||(c[a]={});c[a]={ pid: "your app id", endpoint: "your endpoint" }; with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d) })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js ", "__rum"); </script>
npm包
引入npm包。
npm install @arms/rum-browser --save
初始化應(yīng)用。
說明請將以下代碼中的
pid
和endpoint
替換為當(dāng)前應(yīng)用對應(yīng)的pid和endpoint地址。import ArmsRum from '@arms/rum-browser'; ArmsRum.init({ pid: "your app id", endpoint: "your endpoint" });
各安裝方式說明如下:
異步加載:又稱為非阻塞加載,表示瀏覽器在下載執(zhí)行JS之后還會繼續(xù)處理后續(xù)頁面。若對頁面性能的要求非常高,建議使用此方式。
重要由于是異步加載,ARMS無法捕捉到監(jiān)控SDK加載初始化完成之前的JS錯誤和資源加載錯誤。
同步加載:又稱為阻塞加載,表示當(dāng)前JS加載完畢后才會進行后續(xù)處理。如需捕捉從頁面打開到關(guān)閉的整個過程中的JS錯誤和資源加載錯誤,建議使用此方式。
npm包:使用npm包可以減少頁面中Script的加載個數(shù),可以自行控制頁面Script的CDN業(yè)務(wù)方向,并可以將用戶體驗監(jiān)控作為單獨模塊進行后續(xù)處理。
使用CDN加載情況下,訪問 SDK 監(jiān)控實例,請使用全局命名空間 RumSDK.default
const ArmsRum = window.RumSDK.default; // 訪問 RumSDK 需確保SDK已經(jīng)完成加載 // 如果SDK加載前沒有定義 __rum 配置,可在此初始化 ArmsRum.init({ pid: "your app id", endpoint: "your endpoint", }); // 以下繼續(xù)使用,NPM 和 CDN 一致 ArmsRum.setConfig('env', 'pre');
相關(guān)文檔
ARMS用戶體驗監(jiān)控提供一系列SDK配置項,讓您能夠通過設(shè)置參數(shù)來滿足額外需求。更多信息,請參見SDK配置參考。