数据埋点

前言

为了获悉用户的行为,我们的业务计划在项目中加入埋点的能力,得到用户的行为,以此好对我们系统可以更好的分析去优化

在下面,我要对什么是数据埋点?为什么需要数据埋点?数据埋点的意义和实现,进行一个简单的介绍

一、何为数据埋点

数据埋点,一种常用的数据采集方法,在应用中特定的流程收集一些信息,后续用来进一步优化产品或提供运营的数据支撑。比如访问数、访客数、停留时长、页面浏览数和跳出率。

二、数据埋点

2.1 数据埋点的意义

可以根据用户在APP上的一系列操作线索,提炼信息,进行数据分析,进而分析输出业务分析结论。

  1. 分析运营机制的合理性
  2. 分析产品功能的合理性
  3. 分析用户消费行为,挖掘流失点
  4. 监控产品的流畅性
  5. 分析不同渠道的用户行为差异

2.2 埋点级别划分

  • 初级埋点

    在产品流程关键部位植入相关统计代码,用来追踪用户每次的行为,统计关键流程的使用程度;

  • 中级埋点

    在产品中植入多段代码追踪用户连续行为,建立用户模型来具体化用户在使用产品中的操作行为;

  • 高级埋点

    与研发及数据分析师团队合作,通过数据埋点还原出用户画像及用户行为,建立数据分析后台,通过数据分析、优化产品

2.3 数据埋点的信息收集

  • 页面统计
  • 统计操作行为

2.4 埋点技术

埋点技术划分,以及他们的优缺点:

  • 全埋点
    • 优点:成本低
    • 缺点:只覆盖基本行为
    • 适用场景:业务简单
  • 可视化埋点
    • 优点:自主采集
    • 缺点:不支持与服务端交互
    • 适用场景:业务标准化
  • 代码埋点
    • 前端埋点(H5、PC)
      • 优点:采集全面
      • 缺点:非登录场景采集复杂
      • 适用场景:业务复杂
    • 客户端埋点(APP埋点)(Android、ios)
      • 优点:采集标准
      • 缺点:依赖版本、延迟上报
      • 适用场景:业务复杂
    • 后端埋点(服务端埋点)
      • 优点:实时有效、属性整合
      • 缺点:只支持调接口
      • 适用场景:整合属性

三、埋点应用

3.1 神策埋点

神测数据 - 新手入门

神策埋点有一些名词的概念介绍,在这里我就赘述了,可自行去神策官网查看,例如:什么是用户行为分析

关于神策埋点的使用,官网里也有教程:Web JS SDK集成文档(Web)

3.1.1 神策埋点的事件模型

事件模型是用来描述用户的各种行为,事件模型包括事件(Event)和用户(user)

我们在描述用户行为时,往往只需要描述清楚几个要点,即可将整个行为描述清楚,要点包括:是谁、什么时间、什么地点、以什么方式、干了什么。

3.1.2 神策埋点的使用

后面的内容是基于Web JS SDK 的一些简单介绍,框架是Vue2

sa-sdk-javascript - Github

sa-sdk-javascript - npm

  • 埋点安装

    js 复制代码
    npm i sa-sdk-javascript
  • 参数配置

    全埋点 - Web JS SDK

    全局引入:

    js 复制代码
    // main.js
    var sensors = require("sa-sdk-javascript");
    sensors.init({
      server_url: "", // 服务端接受数据地址
      // is_track_single_page:true, // 单页面配置,默认开启,若页面中有锚点设计,需要将该配置删除,否则触发锚点会多触发 $pageview 事件
      // use_client_time: true,
      show_log: true/false, //是否显示conlog到控制台
      // heatmap: 点击图设置,默认配置表示不自动采集元素点击事件和页面保留事件,配置成 {} 表示开启 $WebClick 采集 和 $WebStay 自动采集,默认 $WebClick 只采集 a,button,input ,textarea 四个 dom 元素的点击事件。
      heatmap: {
        // //是否开启点击图,default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭。
        clickmap: "not_collect",
        // //是否开启触达图,not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启。
        scroll_notice_map: "not_collect",
        // //  collect_tags:配置是否开启div的全埋点采集,默认不采集。如需开启,配置 collect_tags 参数如下:
        //  collect_tags:{
        //   div: {
        //    max_level: 3 // 默认是 1,即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值,会被当作 1 处理。
        //   },
        //   li: true,
        //   img: true,
        //   svg: true
        //   ...其它标签
        //   },
        // // 配置自定义属性支持可视化
        // track_attr: ['hotrep', 'anotherprop', "data-prop2"],
      },
    });
    // sensors.quick('autoTrack'); //用于采集 $pageview 事件。
    Vue.prototype.$sensors = sensors;

    Web JS SDK全埋点包括三种事件:Web 页面浏览、Web 元素点击、Web 视区停留

    使用示例:

    js 复制代码
    // index.vue
    
    methods: {
        // track:自定义事件的方法
        shortcutLinkClick(item) {
          this.$sensors.track("ShortcutLinkClick", {
            key1: XXXX,
            key2: XXXX,
          });
          func();
        },
    
        // setProfile: 设置用户属性
        loadData() {
            this.$sensors.setProfile({
                email:'xxx@xx'
            });
        },
    }
  • 事件分析如下

  • 自定义查询 在右侧的编辑框,编辑完成后,点击点头指向的三角形按钮,运行

资料来源

相关推荐
CXDNW3 分钟前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
neter.asia5 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫5 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年25 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_26 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891128 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾29 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking29 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu31 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym36 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化