vue项目使用火山引擎埋点

1、配置引入SDK脚本文件<script>(function(win, export_obj) {win['TeaAnalyticsObject'] = export_obj;if (!win[export_obj]) {function _collect() {_collect.q.push(arguments);}_collect.q = _collect....

那些年的前端

2746人浏览 · 2022-03-02 10:54:34

那些年的前端 · 2022-03-02 10:54:34 发布

1、配置

引入SDK脚本文件

<script>    
(function(win, export_obj) {
    win['TeaAnalyticsObject'] = export_obj;
    if (!win[export_obj]) {
        function _collect() {
            _collect.q.push(arguments);
        }
        _collect.q = _collect.q || [];
        win[export_obj] = _collect;            
    }
    win[export_obj].l = +new Date();
})(window, 'collectEvent');
</script>
<script async src="https://lf3-data.volccdn.com/obj/data-static/log-sdk/collect/collect-autotrack-rangers.js"></script>

初始化SDK

window.collectEvent('init', {
    app_id: 0000,//  必须替换成申请的 app_id
    channel: 'cn', //数据发送地址
    log: true, // 开启调试日志
    enable_ab_test: true, // boolean类型，是否开启A/B实验功能
    autotrack: false // 开启全埋点采集，默认关闭，需要热力图及圈选功能可开启
});

// 这里可以添加设置用户 id，自定义事件，设置公共属性的代码

window.collectEvent('start'); //通知 SDK 所有设置已经完备，可以真正开始发送事件了。

以上已经基本配置完成，vue中是在public下边的index.html文件中配置，完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 这个地方是为了区分生产环境和测试环境所用的appID不一样 -->
    <% if (process.env.NODE_ENV === 'production' ){ %>
      <script>
        const appID = 100001
      </script>
    <% } else { %>
      <script>
        const appID = 100002
      </script>
    <% } %>
    <script>    
      (function(win, export_obj) {
          win['TeaAnalyticsObject'] = export_obj;
          if (!win[export_obj]) {
              function _collect() {
                  _collect.q.push(arguments);
              }
              _collect.q = _collect.q || [];
              win[export_obj] = _collect;            
          }
          win[export_obj].l = +new Date();
      })(window, 'collectEvent');

      // console.log('.00000000000',appID);

      window.collectEvent('init', {
            app_id: appID,//  必须替换成申请的 app_id
            channel_domain: 'https://196.666.222.7878:0009',//改成你自己的发送地址
            log: true, // 开启调试日志
            enable_ab_test: true, // boolean类型，是否开启A/B实验功能
            autotrack: true // 开启全埋点采集，默认关闭，这里打开了全埋点，整个项目中所有点击事件都做了埋点
        });

        // 这里可以添加设置用户 id，自定义事件，设置公共属性的代码
        // 添加用户id
        window.collectEvent('config', { 
          user_unique_id: "userID"  //设置唯一用户ID 
        });

        // 这里设置的是公共属性，设置之后，每个埋点发送事件中，参数都会有这个属性
        window.collectEvent('config', {
          language: 'us' // 这里的参数名和参数可以自己定义
        });
            

        window.collectEvent('start'); //通知 SDK 所有设置已经完备，可以真正开始发送事件了。
      </script>
      <script async src="https://lf3-data.volccdn.com/obj/data-static/log-sdk/collect/collect-autotrack-rangers.js"></script>
  </body>
</html>

2、使用

配置完毕之后接下来就可以在你需要的地方放入埋点了

比如在一个按钮的点击事件，需要设置一下埋点

// test_event是发送埋点的方法名，可以根据项目需求自己设置，from是属性名，根据你想埋点什么数据来设置名称，index是属性值，是你要埋的数据，这里可以添加多个属性
window.collectEvent('test_event', {
   from: 'index'
});

3、API文档

1、初始化时init参数

init用于初始化SDK的配置项，参数是一个对象，配置如下：

字段	是否必须	字段值	字段说明	示例
app_id	是	预先申请。 number类型	业务产品的唯一标识
channel	否	可选值：cn	上报通道标识。和channel_domain二选一。
channel_domain	否	合法域名。字符串。	和channel二选一。设置该项后 channel 项会被忽略。自定义上报的域名及其路径前缀。	https://mcs.xxxx.org 或 https://mcs.xxxx.org/log
log	否	布尔类型。默认false。	是否打印log信息。是否在控制台打印详细的 log 信息。
disable_sdk_monitor	否	布尔类型。默认false。	用于禁止SDK启动后自身监控事件的上报，（但目前并不会禁止错误日志的上报。）
autotrack	否	布尔类型。默认false。	开启无埋点上报。
enable_stay_duration	否	布尔类型。默认false。	开启停留时长。
enable_ab_test	否	布尔类型。默认false。	开启ab实验能力。版本3.4.0+
cross_subdomain	否	布尔类型。默认false。	是否自动跨子域名识别用户，设置为true时多个子域名下使用同一浏览器访问的匿名用户会被自动识别为同一个用户，比如 a.yourdomain.com 和 b.yourdomain.com的情况。

以上是基础用法，具体详情可以查看官方文档：文档中心-火山引擎

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^