# asp-yxpt-collection

> ## 安装

Latest version **1.0.13** (published 2023-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install asp-yxpt-collection
pnpm add asp-yxpt-collection
yarn add asp-yxpt-collection
bun add asp-yxpt-collection
```

## 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 | 1.0.13 |
| Published | 2023-03-08 |
| First published | 2021-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 169.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fengxiqiu@aspcn.com |
| Maintainers | tomfeng |

## Links

- npm: https://www.npmjs.com/package/asp-yxpt-collection
- npm.io page: https://npm.io/package/asp-yxpt-collection

## Dependencies (2)

- [in-view](https://npm.io/package/in-view.md) ^0.6.1
- [asp-smart-collection](https://npm.io/package/asp-smart-collection.md) ^1.0.10

## Recent versions

- 1.0.13 (latest) — 2023-03-08
- 1.0.12 — 2022-04-01
- 1.0.11 — 2022-03-29
- 1.0.10 — 2022-03-14
- 1.0.9 — 2022-01-19
- 1.0.8 — 2022-01-14
- 1.0.7 — 2022-01-13
- 1.0.6 — 2022-01-12
- 1.0.5 — 2022-01-10
- 1.0.4 — 2022-01-04
- 1.0.1 — 2021-11-10
- 1.0.0 — 2021-11-10

## README

# 营销工具埋点插件asp-yxpt-collection

## 安装

```bash

npm install asp-yxpt-collection

```

## 使用
``` sh
// main.js引入
import yxptCollection from "asp-yxpt-collection"
// 注册挂载
Vue.prototype.$yxptCollection = yxptCollection
// 初始化
const config={ 
    apiUrl: "", //埋点地址
    timeFormat: "" //自定义时间格式，默认{y}{m}{d}{h}{i}{s} 例子：20220101120000
}
yxptCollection.init(config)
```

## 功能介绍

### 埋点功能-有痕埋点
``` sh
    /**
     * 业务有痕埋点
     * @param {*} exposureType
     * 埋点类型参数：
     * 页面曝光：pageExposure；编码：10001
     * 内容曝光：contentExposure；编码：10002
     * 访问行为：access；编码：10003
     * 页面点击：pageClick；编码：10004
     * 功能点击：functionClick；编码：10005
     * 订购行为：order；编码：10006
     * @param {*} data
     */
    yxptTrackEvent(exposureType, data)

    具体行为示例：
    注： data默认可以不传，如果有自定义，按自己需求传
    // 访问行为
    this.$yxptCollection.yxptTrackEvent("access", data)
    // 内容曝光
    this.$yxptCollection.yxptTrackEvent("contentExposure", data)
    // 页面点击
    this.$yxptCollection.yxptTrackEvent("pageClick", data)
    // 功能点击
    this.$yxptCollection.yxptTrackEvent("functionClick", data)
    // 订购行为
    this.$yxptCollection.yxptTrackEvent("order", data)
``` 

### 埋点功能参数data详细说明

在线文档：https://docs.qq.com/sheet/DYmpqVFdETE15THdO?tab=fpd3ma


### 内容曝光方法说明

``` sh

    /**
     * 选择曝光内容dom节点
     * @param {Array}} els #dom,.class tag等css选择器字符串
     * 例:['#yxpt', '.yxpt', 'img']
     * @param {Function} callback 回调,可用于处理自己需要曝光的内容
     */
    exposureContentInit(els, callback)
    // 初始化需要曝光内容，建议要曝光的都添加上；完成页面元素收集
    this.$yxptCollection.exposureContentInit(['#id', '.class', 'tag'], (res)=>{})

    
    /**
     * 添加单个滚动dom曝光内容滚动事件
     * @param {String} el #dom,.class tag等css选择器字符串
     * @param {Array}} listenerEls el内的css选择器数组
     * @param {Function} callback 回调
     */
     // exposureContentListenerScroll(el, listenerEls, (res)=>{})
     // 加强监听内容曝光
     // 具有滚动条的dom，即时监听变化，作为初始化的补充记录。
    // 也可以在初始化时候监听，不过监听效果一般，需要用户有滑动页面才能准备曝光记录
    this.$yxptCollection.exposureContentListenerScroll('#gundong', [
        '.right-content',
        '.bottom-content'
    ], ()=>{
        // 获取唯一值
        let curVal = this.$yxptCollection.getExporsureContentAttrValue(
                "id",
                true
            )
            // 获取埋点内容
            const {
                exposureBaseInfo,
                baseContentParams
            } = this.$yxptCollection.changeExposureData(collectionData)
            // 记录在本地，下次访问页面或者离开页面适合曝光
            localStorage.setItem(
                "exposureContentParams",
                JSON.stringify({
                    ...exposureBaseInfo,
                    ...baseContentParams
                })
            )
    })
    // 参考方法
    /**
    * 曝光内容；下次访问页面或者离开页面适合曝光
    */
    export function exposureLastContent() {
        if (localStorage.getItem("exposureContentParams")) {
            this.$yxptCollection.yxptTrackEvent(
                "contentExposure",
                JSON.parse(localStorage.getItem("exposureContentParams"))
            )
            localStorage.removeItem("exposureContentParams")
        }
    }

    // 具有隐藏dom的(v-if)，手动曝光记录
    this.$yxptCollection.exposureContentManually(['.tag1', '.tag2'])

    // 获取所有内容曝光dom的日志
    this.$yxptCollection.getExporsureContentLog()
    
    /**
     * 筛选曝光内容dom的属性值
     * @param {String} attr 属性名  
     * @param {Bollean} unique 默认：false； 数组值去重
     * @returns {Array} 属性数组
     */
     getExporsureContentAttrValue(attr, unique = false) 
    // 获取指定属性的所有值，默认不去重
      const attrVal = this.$yxptCollection.getExporsureContentAttrValue(
        attr,
        true
      )

``` 

### 内容曝光示例

借助in-view插件，见【插件】（https://www.npmjs.com/package/in-view)

``` javascript

示例vue代码片段：
  mounted () {
      // 初始化需要曝光内容，建议要曝光的都添加上
    this.$yxptCollection.exposureContentInit(['.tag-item'])
    // 具有滚动条的dom，即时监听变化，作为初始化的补充记录。
    // 也可以在初始化时候监听，不过监听效果一般，需要用户有滑动页面才能准备曝光记录
    this.$yxptCollection.exposureContentListenerScroll('#gundong', [
      '.right-content',
      '.bottom-content'
    ])
  },
  methods: {
    toggleD () {
      this.isDisplay = !this.isDisplay
      this.$nextTick(() => {
        // 具有隐藏dom的，手动曝光记录
        this.$yxptCollection.exposureContentManually(['.tag1', '.tag2'])
      })
    },
    getExporsureEls () {
        // 获取所有内容曝光dom的日志
      const allEls = this.$yxptCollection.getExporsureContentLog()
      console.log(allEls)
    },
    getAttrByName (attr) {
      // 获取指定属性的所有值，默认不去重
      const attrVal = this.$yxptCollection.getExporsureContentAttrValue(
        attr,
        true
      )
      console.log(attrVal)
    }
  }
```

``` javascript
    
```

### 详细功能介绍
[功能应用详细介绍](https://docs.qq.com/sheet/DYmpqVFdETE15THdO?tab=BB08J2)

### 埋点功能-业务无痕埋点

自动化无痕埋点a标签跳转离开页面

## 落地项目码表

1. [拼装系统码表](https://docs.qq.com/sheet/DYm9iSEpNU2dZWnhI?tab=BB08J2)

---
_Source: https://npm.io/package/asp-yxpt-collection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._