# @58fe/log-plugins

> A plugin for tracklog.

Latest version **2.0.1** (published 2023-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @58fe/log-plugins
pnpm add @58fe/log-plugins
yarn add @58fe/log-plugins
bun add @58fe/log-plugins
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2023-12-26 |
| First published | 2020-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 58fe |
| Maintainers | skybjf, rockolin, reking, imlimiao, xiaoyuya, felix_xue, zhangboyu, marinamumu, bestvist, liuhanbing |
| Keywords | log, tracklog |

## Links

- npm: https://www.npmjs.com/package/@58fe/log-plugins
- Repository: http://igit.58corp.com/zp-component/log-plugins
- npm.io page: https://npm.io/package/@58fe/log-plugins

## Dependencies (1)

- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.12.0

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2023-12-26
- 2.0.0 — 2023-04-14
- 1.5.0 — 2023-03-08
- 1.4.5 — 2022-06-10
- 1.3.2 — 2021-08-09
- 1.3.1 — 2021-08-09
- 1.3.0 — 2021-08-09
- 1.2.0 — 2021-07-11
- 1.1.2 — 2021-06-18
- 1.1.1 — 2020-12-22
- 1.1.0 — 2020-12-22
- 1.0.8 — 2020-11-11
- 1.0.7 — 2020-09-04
- 1.0.6 — 2020-09-03
- 1.0.5 — 2020-08-21
- … 11 more at https://npm.io/package/@58fe/log-plugins/versions

## README

# 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 端无效

---
_Source: https://npm.io/package/@58fe/log-plugins · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._