# 接入Web\&H5监控前端站点指标
APM Agent会周期性采集一些前端监控的性能指标数据，用来衡量浏览器/H5端、小程序端的总体健康状况。可以采集加载性能、API请求、JS错误、访问分析、自定义上报、会话追踪、场景分析以及网络分析等数据，帮助用户全面掌握前端应用的运行情况。
本文以接入Web\&H5前端站点为例，帮助您快速上手使用应用性能管理服务的前端监控功能。首先需要接入Web\&H5前端站点；然后在APM界面查看接入是否成功。待Web\&H5接入成功后，即可在APM控制台上查看前端监控指标。
#### 操作流程
1. [首次开通APM 2.0并授权](https://support.huaweicloud.com/qs-apm2/apm_02_0003.html#apm_02_0003__section2115201717217)。
2. [接入Web\&H5前端站点]。
3. [查看前端监控总览指标]。
 
#### 前提条件
- 使用APM 2.0前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接跳过如下操作。
  1. 进入[华为云](https://www.huaweicloud.com/)官网，单击页面右上角的"注册"。
  
  2. 参考[注册华为账号并开通华为云](https://support.huaweicloud.com/usermanual-account/account_id_001.html)中操作，完成注册。
  
  3. 注册后参考[实名认证](https://support.huaweicloud.com/usermanual-account/zh-cn_topic_0071343161.html)完成个人或企业账号实名认证。
   
- 为账户充值。如果您的账户有足够金额，请跳到下一个任务。如果您的账户还没有足够金额，请先为账户充值。
  - 关于应用性能管理 APM的价格，请参见[前端监控计费项](https://support.huaweicloud.com/price-apm2/apm_07_0017.html)。
  
  - 关于充值，请参见[账户充值](https://support.huaweicloud.com/usermanual-billing/bills-topic_30000002.html)。
   
- 为用户添加应用性能管理 APM的操作权限。 您需要有APM的管理员权限"APM FullAccess"，具体操作请参考[授权IAM用户使用APM](https://support.huaweicloud.com/usermanual-apm2/apm_07_0037.html)。
  
 
#### 首次开通APM 2.0并授权
1. 使用APM 2.0 前，需要先开通APM 2.0。如果您已开通APM 2.0，可直接跳过如下操作。 
   1. 登录[APM控制台](https://auth.huaweicloud.com/authui/login.html?service=https://console.huaweicloud.com/console/#/login)。
      首次登录APM控制台，您可以选择使用应用性能管理的"免费体验"或"开通企业版"。"免费体验"与"开通企业版"的差异参见[产品规格差异](https://support.huaweicloud.com/productdesc-apm2/apm_01_0006.html)。
      图1APM控制台首页   
      ![](https://support.huaweicloud.com/qs-apm2/zh-cn_image_0000002542173331.png "点击放大") 
   
   2. 单击"免费体验"，进入免费体验应用性能管理页面。
      图2免费体验应用性能管理   
      ![](https://support.huaweicloud.com/qs-apm2/zh-cn_image_0000002502494970.png "点击放大")
      
      
   
   3. 阅读[《APM应用性能管理服务声明》](https://www.huaweicloud.com/declaration/tsa_apm.html) 、 [《法律声明》](https://www.huaweicloud.com/declaration/statement.html)以及[《隐私政策声明》](https://www.huaweicloud.com/declaration/sa_prp.html)后，选择"□ 我已阅读 《APM应用性能管理服务声明》以及《法律声明及隐私权政策》"。
   
   4. 单击"立即体验 "，弹出"请确认已阅读《华为APM应用性能管理服务声明》及《法律声明及隐私权政策》。"提示框。
   
   5. 单击"确定"，最多可以免费使用10个Agent。
   
   
   
   
2. 自动创建访问密钥。 
   APM 2.0通过AK/SK进行签名验证，通过授权的账户才能上报数据。
   1. 登录[APM控制台](https://auth.huaweicloud.com/authui/login.html?service=https://console.huaweicloud.com/console/#/login)。
   
   2. 单击左侧导航栏"系统管理 \> 访问密钥"，进入访问密钥页面。
   
   3. 在访问密钥页面查看自动创建的访问密钥。
   
   
   
   
 
 #### 接入Web\&H5前端站点
1. 登录[APM控制台](https://auth.huaweicloud.com/authui/login.html?service=https://console.huaweicloud.com/console/#/login)。
2. 单击左侧![](https://support.huaweicloud.com/qs-apm2/zh-cn_image_0000001592837685.png)，选择"管理与监管\> 应用性能管理 APM"，进入APM服务页面。
3. 在左侧导航栏选择"前端监控 \> 前端站点"，单击"接入前端站点"，填写相关信息。 
   - "创建前端站点"成功后，appId会自动生成。
   
   - 站点名称填写前，"创建前端站点"按钮置灰。
   
   - 前端站点创建成功后，在"前端监控 \> 前端站点"操作列单击"编辑"，可以查看SDK拓展配置项参数对应的参数。
   
   - 前端监控数据通过自动生成的appId上报，没有经过有效鉴权，可能产生脏数据。
   
   - 小程序 SDK接入相关操作，参见SDK参考。
   
   
   
   - Web\&H5接入。
     1. 选择"Web\&H5"。
     
     2. 在下拉列表中选择"所属应用"为"APM（默认）"，填写"站点名称"为：test001，用于区分前端站点。
     
     3. 单击"创建前端站点"，完成操作。
      
   
   
   
   
4. 业务埋码探针。 
   复制下方代码，将其粘贴在Index.html的\<body\>中。注意，需要将代码粘贴在\<body\>内容的第一行。
   - 固定版本接入
     ```
     <script>
         !function(x, n) {
           window[n] = window[n] || {};
           window[n].config = { domain: "https://rum.rnd.*****.com",appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: true,traceType: "apm"};
         var o = document.createElement('script');
         o.src = x, o.async = !0;
         var d = document.body.firstChild;
         document.body.insertBefore(o, d);
       }('https://test-static-resource.obs.*****.ulanqab.****.com/js-agent/jsagent.min.js', '__fr');
     </script>
     ```
     
   
   - 最新版本接入
     ```
     <script>
         !function(x, n) {
           window[n] = window[n] || {};
           window[n].config = { domain: "https://rum.rnd.****.com",appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: true,traceType: "apm"};
         var o = document.createElement('script');
         o.src = x, o.async = !0;
         var d = document.body.firstChild;
         document.body.insertBefore(o, d);
       }('https://test-static-resource.obs.****.ulanqab.****.com/js-agent/jsagent.min.js', '__fr');
     </script>
     ```
     
   
   
   
   
5. 在左侧导航栏选择"前端监控 \>前端站点"，在搜索栏中输入"test001"。
6. 单击"回车"，展示"站点名称"为"test001"的相关信息。
 
 #### 查看前端监控总览指标
Web\&H5接入成功后，可以在APM控制台上查看"前端监控 \>总览"指标数据。
1. 在左侧导航栏选择"前端监控 \>前端站点"页面，搜索到"站点名称"为"test001"的相关信息。
2. 单击"前端站点列"的蓝色字体"test001"，跳转至"总览"页面，展示"test001"的前端监控指标总览。