JS探针部署

一、自动嵌码

  • 登录平台，左侧菜单选择全部功能，选择系统设置下的应用管理；

部署中心

  • 创建或编辑已有的web项目对应的应用，选择Web选项卡；

Web_SDK

  • 选中需要嵌入探针的服务移动到右侧，点击保存；

添加应用

  • 刷新服务页面后，页面元素中看到探针的JS文件，且网络中有upload数据上报，说明探针嵌码成功。

二、手动嵌码

注：以下嵌码方式仅支持探针1.2.0及以上版本

H5页面script标签嵌码

  • 解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip暂存本地，拷贝解压文件中的BonreeSDK_JS.min.js文件，将该文件放到项目根目录下js文件夹中

  • 在项目根目录下的index.html文件的head中引入script标签

<script id="BonreeAgent" src="./js/BonreeSDK_JS.min.js"></script>

注：引入探针的script标签必须被head标签包裹

  • 若项目中有多个HTML页面，每个HTML页面均需要用script标签引入探针（如在html文件夹下的user.html文件中引入探针）

1-1.引入探针

  • 探针的启动有script标签启动和JS代码启动两种方式

  • script标签直接启动

  • 在script标签中直接设置data参数，如果参数中存在特殊字符，需对data参数值的字符串整体做urlencode编码（以在该项目根目录下的index.html文件中嵌入探针为例）

<script
     id="BonreeAgent"
     src="./js/BonreeSDK_JS.min.js"
     data='{"appId":"203d83434b6f4247923025cf849erfc3",
         "uploadAddrHttps": "https://sdkupload.bonree.com/upload",
         "uploadAddrHttp": "http://sdkupload.bonree.com/upload"}'
></script>

image-20230113165951155

  1. 代码启动

  2. 通过代码启动，需在head中另加script标签，调用探针启动接口进行配置与启动，启动代码如下

<script id="BonreeAgent" src="./js/BonreeSDK_JS.min.js"></script>
<script>
    window.BonreeAgent &&
        window.BonreeAgent.BonreeStart({
          appId: "203d83434b6f4247923025cf849erfc3",            
          uploadAddrHttp: "http://sdkupload.bonree.com/upload",
          uploadAddrHttps: "https://sdkupload.bonree.com/upload", 
        });
</script>

image-20230113170543490

项目启动后，用浏览器运行该应用，在浏览器开发者工具的调试器中查看Network，有upload请求（如下图所示），则说明嵌入探针成功

1-4.运行结果

单页面应用嵌码

React应用嵌码

以下探针配置以React（17）为例

  • 解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip，暂存本地，拷贝解压文件中的BonreeSDK_JS.min.esm.js文件，将拷贝的探针文件放到项目根目录下src/文件夹中

  • 打开项目src/文件夹下的App.js文件，在导入react,react-router-dom之后，再导入BonreeSDK_JS.min.esm.js文件

import { BonreeStart,BonreeReact } from './BonreeSDK_JS.min.esm.js';

注：此处必须导入以.esm.js后缀名结尾的探针包

  • 引入探针之后，还需对探针进行配置，其配置代码如下
BonreeStart({
  'appId': '203d83434b6f4247923025cf849erfc3',
  'uploadAddrHttp': 'http://sdkupload.bonree.com/upload',
  'uploadAddrHttps': 'https://sdkupload.bonree.com/upload'
})

详细配置如下图所示：

image-20230113171431987

  • 若需采集react框架中的路由数据，还需使用BonreeReact方法，使用调用方式如下图所示：

image-20230113171631639

项目启动后，用浏览器运行该应用，在浏览器开发者工具的调试器中查看Network，有upload请求（如下图所示），则说明探针在React框架中嵌码成功

2-3.react嵌码结果

Vue应用嵌码

  • 解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip，暂存本地，拷贝解压文件中的BonreeSDK_JS.min.esm.js文件，将拷贝的探针文件放到项目根目录下src/文件夹中

  • 打开项目src/文件夹下的main.js文件，在导入vue,vue-router之后，再导入BonreeSDK_JS.min.esm.js文件

import { BonreeStart, BonreeVUE } from './BonreeSDK_JS.min.esm'

注：此处必须导入以.esm.js后缀名结尾的探针包

  • 引入探针之后，还需对探针进行配置，才可启动探针，其配置代码如下
BonreeStart({
  'appId': '203d83434b6f4247923025cf849erfc3',
  'uploadAddrHttp': 'http://sdkupload.bonree.com/upload',
  'uploadAddrHttps': 'https://sdkupload.bonree.com/upload'
})

详细配置如下图所示：

image-20230113173533583

  • 若需采集Vue框架中的路由数据，还需使用BonreeVUE方法，使用调用方式如下图所示：

image-20230113173644665

注：BonreeVUE方法需在Vue.use(VueRouter)方法之后调用

项目启动后，用浏览器运行该应用，在浏览器开发者工具的调试器中查看Network，有upload请求（如下图所示），则说明探针在React框架中嵌码成功

3-3.vue嵌码结果

AngularJS应用嵌码

以下探针配置以angularJs 2为例

  • 解压获取到的探针包BonreeSDK_TDEM_JS.v${VERSION_NAME}.zip，暂存本地，拷贝解压文件中的BonreeSDK_JS.min.js文件，将拷贝的探针文件放到项目根目录下app/文件夹下的lib/文件夹中

  • 打开项目app/下的index.html文件，在引入的lib/angular/angular.js,lib/angular-route/angular-route.js之后，再通过script标签引入BonreeSDK_JS.min.js文件

  • 在引入探针文件的script标签中设置id参数、data参数，如果参数中存在特殊字符，需对data参数值的字符串整体做urlencode编码

<script id="BonreeAgent" src="lib/BonreeSDK_JS.min.js" 
    data='{"appId":"203d83434b6f4247923025cf849erfc3",
    "uploadAddrHttps":"https://sdkupload.bonree.com/upload",
    "uploadAddrHttp":"http://sdkupload.bonree.com/upload"}'
  ></script>

image-20230113175002543

项目启动后，用浏览器运行该应用，在浏览器开发者工具的调试器中查看Network，有upload请求（如下图所示），则说明探针在AngularJS框架中嵌码成功

4-2.angular嵌码结果

results matching ""

    No results matching ""