/uniapp-collect-sdk

用于uniapp的APP、小程序的采集埋点上报

Primary LanguageTypeScriptISC LicenseISC

基于uniapp项目的埋点SDK

平台/框架的兼容性

vue2 vue3
app ✅ ❌
小程序 ✅ ❌
H5 ❌ ❌

接入方式

安装埋点SDK

npm install @llius/uniapp-collect-sdk

安装埋点SDK的loader

npm install @llius/uniapp-inject-loader

配置vue.config.js文件

const path = require('path')
const insetLoader = path.resolve(__dirname, '../node_modules/@llius/uniapp-inject-loader/index.js')
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: {
            loader: insetLoader,
            options: {
              VUE_APP_PLATFORMS: ['app-plus'],
              wxbCollectLogs: true,
              // titleSelector: 自定义标题的选择器
              titleSelector: '.-nav-title-text'
            }
          }
        }
      ]
    }
  }
}

实例化SDK，需要传入Vue实例

// file utils/logs.js
import Vue from 'vue'
import { CollectLogs } from '@llius/uniapp-collect-sdk'

export const collectLogs = new CollectLogs(Vue)

初始化SDK

// file main.js/xxx.vue
import { collectLogs } from '@/utils/logs.js'
collectLogs.init({
  sourcePlatform: '', // 平台类型
  uniqueId: '', // 用户唯一标识
  project: '', // 项目名称
  serverUrl: 'https://example.com/api',
  customFields: { // 自定义字段，解释见下方
    role: {
      value: '置业顾问',
    },
    tel: {
      key: 'phone'
    },
    userInfo: {
      key: 'userInfo'
    },
  },
  isShowLog: false, // 是否显示console输出
  isOnPageLifecycle: true, // 是否监听页面生命周期
  isOnTapEvent: true // 是否开启点击事件监听
})

customFields字段解释

  • role - 自定义字段名称
    • 用于上报时，作为字段名称
    • 如果获取的数据为对象，则忽略该字段
  • key - 自定义字段key值，用于 uni.getStorageSync(key) 获取动态字段数据
    • 如果获取的数据为对象，则会将该对象的所有字段作为自定义字段上报
    • 如果获取的数据为非数组，则会将该数据作为自定义字段上报
  • value - 自定义字段值
    • 直接填写值，会将该值作为自定义字段上报
    • 取值以key为更高优先级，如果key存在，则会以key为准，否则会以value为准

SDK暴露的函数

init 用于初始化SDK

this.$collectLogs.init({
  ...
})

customReport 自定义事件上报

  • 第一个对象参数
    • eventType(必填) - 事件名称，例如：
      • button_click - 按钮点击事件
      • page_view - 页面浏览事件
    • project - 上报项目名称，例如：
      • product - 产品埋点项目
      • product_basic - 全埋点项目
  • 第二个对象参数
    • 自定义上报数据字段
    • 直接赋值即可，格式如下 
      {
  role: '置业顾问',
  tel: '123456789'
}
this.$collectLogs.customReport(
  {
    eventType: '事件名称',
    project: '上报项目名称',
  },
  {
    // 自定义字段
    role: '置业顾问',
    tel: '123456789',
    ...
    // 会将该对象的所有字段作为自定义字段上报
    // 字段取值优先级高于 init & updateCustomFields 中的 customFields 字段
  }
)

customFields 更新自定义字段

this.$collectLogs.updateCustomFields({
  // 慎用，推荐优先使用 init 中的 customFields 字段进行定义数据
  role: '置业顾问',
  tel: '123456789',
  ...
  // 该方法调用后，传入的字段会覆盖 init 中的 customFields 字段
})

点击埋点

APP 通过监听点击事件进行自动上报相关信息

  • 🚫 自动上报限制
    • 不支持APP的app-nvue页面
    • 自动上报仅支持部分元素点击
      • UNI-BUTTON
      • BUTTON
      • UNI-NAVIGATOR
      • A
    • 自动上报的信息，是元素中的 innerText

小程序 通过监听所有的tap事件进行自动上报相关信息

  • 🚫 自动上报限制
    • 仅支持页面中绑定了点击事件的元素
      • @tap
      • @longpress
      • @longtap
    • 自动上报信息为空

tips 自定义补充上报的方式

APP/小程序 通过自定义属性 data-log 进行上报

// 上报的信息是 data-log 的值
<view data-log="xxx"></view>

小程序 通过增加空的点击事件进行上报

// 识别具有点击事件的元素，即可进行上报
<view @tap.stop></view>
<view @tap.prevent></view>

APP接入的注意事项

nvue页面的接入方式

由于APP的app-nvue页面，无法通过vue的生命周期进行埋点，所以需要手动接入

// file xxx.nvue
import { collectLogs } from '@/utils/logs'
const logsMixin = collectLogs.lifecycleMixin()
export default {
  mixins: [logsMixin],
  ...
}