log-plugins 埋点插件

安装

<!-- 推荐CDN -->
<script src="https://h5-cdn.58.com/git/sdk/hrg-fe/zp-component/log-plugins/index.js"></script>

// 需配置扩展依赖
module.exports = {
  externals: {
    '@58fe/log-plugins':'LogPlugins'
  }
}

npm i @58fe/log-plugins -S

使用

es6

import { Log } from "@58fe/log-plugins";
Log(args);

vue2

// 引入
import { VueLog } from "@58fe/log-plugins";
Vue.use(VueLog);
// or
// 埋点默认项，参数传‘’会取配置项字段
Vue.use(VueLog, {
    debug: false,  // true: 打印埋点
    pageType: 'home',
    actionType: 'show',
    cate: '9224',
    p1: '1', // p1-p8字段见下列【58app埋点说明】
    ...
    p8: '8',
    openExposure: false, // 曝光数据上报开关
});

指令使用

** args 详见下方参数说明 **

点击埋点：v-log-click="args"

展示埋点：v-log-show="args"

曝光埋点：v-log-exp="args"
曝光埋点需要配置项开启openExposure

停留时长埋点：v-log-stay="args"
停留时长会自动埋在参数params中p5、p6位置。时长需监听返回拦截，例如：
mounted() {
    this.addBackEvent();
},
methods: {
    addBackEvent() {
        if(!window.WBAPP) return;
        window.WBAPP.invoke('device_event', {
        type: 'goback'
        },() => {
            this.$log.stayStop();
            window.WBAPP.action.goback(true) ;
        })
    }
}

原型使用

this.$log(args);

示例

v-log-click="['home','click']"
this.$log(['home','click']);

vue3

// 引入
import { Vue3Log } from "@58fe/log-plugins";
app.use(VueLog);
// or
// 埋点默认项，参数传‘’会取配置项字段
app.use(VueLog, {
    debug: false,  // true: 打印埋点
    pageType: 'home',
    actionType: 'show',
    cate: '9224',
    p1: '1', // p1-p8字段见下列【58app埋点说明】
    ...
    p8: '8',
    openExposure: false, // 曝光数据上报开关
});

指令使用

同vue2指令使用方式

函数调用

import { Vue3Log } from '@58fe/log-plugins';
Vue3Log.log(arg);

react

// 引入
import React from "react";
import { ReactLog } from "@58fe/log-plugins";
ReactLog(React);
// or
// 埋点默认项，参数传‘’会取配置项字段
ReactLog(React, {
    debug: false,  // true: 打印埋点
    pageType: 'home',
    actionType: 'show',
    cate: '9224',
    p1: '1', // p1-p8字段见下列【58app埋点说明】
    ...
    p8: '8'
});

// 组件使用
React.$log(args);

示例

React.$log(['home','click']);

RN

// 引入
import React from "react";
import WBAPP from '@w/wbapp';
import { RNLog } from "@58fe/log-plugins";
RNLog(React, {
    ctx: WBAPP, // RN需要显示传入执行环境，其他用法同react
    debug: false,
    pageType: 'home',
    actionType: 'show',
    cate: '9224',
    p1: '1',
    ...
    p8: '8'
});

// 组件使用
React.$log(args);

初始参数

| 参数 | 必填 | 类型 | 说明 | | ------------ | ----- | ------------- | ---------------------------------------------------------------------------------------------- | | debug | false | boolean | 开启后打印埋点值 | |disabled | false | boolean | 开启后禁止埋点上报 | | pageType | false | string/number | pageType 默认值 | | actionType | false | string/number | actionType 埋点默认值 | | cate | false | string | cate 埋点默认值 | | trackJoin | false | string | PC&M 端 pageType 和 actionType 连接符，默认'_' | | openExposure | false | boolean | 默认 false；是否开启曝光配置 | | stayUnit | false | number | 默认 1000；停留时长单位，默认以秒为单位。 可配合 this.$log.stayStop 触发全部时长埋点 | | stayTimeIndex | false | string | 默认 p5；停留时长在参数params中位置，内容：停留时长(单位：s) | | stayTimestampIndex | false | string | 默认 p6；停留时长时间戳在参数params中位置，内容：进入-离开访问时间戳（单位：s) |

args 调用参数

args 类型为数组

| 参数 | 必填 | 类型 | 说明 | | ---------- | ------------------------- | ------------- | -------------------------------------- | | pageType | true | string/number | 页面类型，args 第一个值 | | actionType | app:true/pc:false/m:false | string/number | 埋点类型，args 第二个值 | | opts | false | object | 其他配置，对应 app opts，args 第三个值，见下方58app埋点说明 |

58app 埋点说明

weblog协议参数文档：http://hybird.58corp.com/wb/action/detail/620cbe2eac4d11748c1f93cd

opts = {
    cate: "",
    params: [],
};

// params 数组值对应埋点表中 p1、p2、p3 等字段，即[p1,p2,p3,p4,p5,p6,p7,p8]

PC & M 说明

1.需引入对应埋点 js，如 m 端：//tracklog.58.com/referrer_m.js

2.pageType 对应埋点 from 参数，actionType、opts 值在 pc 和 m 端无效