npm package: @58fe/log-plugins
Description: A plugin for tracklog.
Author: 58fe
Latest version: 2.0.1

# log-plugins 埋点插件

![npm version](https://img.shields.io/npm/v/@58fe/log-plugins.svg?style=flat-square&logo=npm)
![dm](https://img.shields.io/npm/dm/@58fe/log-plugins.svg?style=flat-square)

## 安装

```html
<!-- 推荐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'
  }
}
```

```bash
npm i @58fe/log-plugins -S
```

## 使用

## es6

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

## vue2

```js
// 引入
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

```js
// 引入
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指令使用方式
```
#### 函数调用
```js
import { Vue3Log } from '@58fe/log-plugins';
Vue3Log.log(arg);
```

## react

```js
// 引入
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

```js
// 引入
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；停留时长单位，默认以秒为单位。<br/> 可配合 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

```js
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 端无效