Asp-yxpt-collection NPM

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

安装

npm install asp-yxpt-collection

使用

// 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)

功能介绍

埋点功能-有痕埋点

    /**
     * 业务有痕埋点
     * @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

内容曝光方法说明

    /**
     * 选择曝光内容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)

示例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)
    }
  }