bjx-expose

上报 曝光和点击

传统项目

<script src="https://cdn.jsdelivr.net/npm/bjx-expose"
        reportClick="true"
        debug="true"
        delay="500"
        opts="{&quot;reportClick&quot;:true, &quot;debug&quot;:true, &quot;delay&quot;:500}"
></script>

vue项目

import BjxExpose from 'bjx-expose'
const ins = new BjxExpose({
  reportClick: true, // false: 不上报; true(1): 点击元素的父级有A元素的就上报点击;  2: 点击元素到绑定事件元素之间有A元素的就上报点击
  debug: true,
  delay: 500,
})
console.log(ins)

HTML埋点

<!-- 
    data-expose-id 为必填项 其他属性为选填

    自定义属性:
        // data-expose-custom_property 支持自定义属性 data-expose-后面的第一个字母会变成小写 即:
        data-expose-custom_property => bjx_bigdata_custom_property
        data-expose-custom-property => bjx_bigdata_customProperty
        data-expose-customproperty => bjx_bigdata_customproperty
        // --分割的 不拼接前缀
        data-expose--custom_property => custom_property
        data-expose--custom-property => customProperty
        data-expose--customproperty => customproperty

    dataset值类型:
        data-expose-xxx="1" => bjx_bigdata_xxx: '1'
        data-expose-xxx="+1" => bjx_bigdata_xxx: 1
        data-expose-xxx="-1" => bjx_bigdata_xxx: -1
        data-expose-xxx="{&quot;a&quot;:&quot;1&quot;,&quot;b&quot;:2}" => bjx_bigdata_xxx: {a: '1', b: 2}
        data-expose-xxx="[&quot;a&quot;,2]" => bjx_bigdata_xxx: ['1', 2]

    缓存是key: 
        `${type}_${dataset.exposeScene || ''}_${dataset.exposeSlot || ''}_${dataset.exposeType || ''}`

    框架定义的字段:
        data-expose-scene 场景     > bjx_bigdata_scene_type
        data-expose-slot 位置      > bjx_bigdata_slot_name
        data-expose-index 位置下标  > bjx_bigdata_slot_indexs
        data-expose-type 上报类型   > bjx_bigdata_item_type
        data-expose-id 上报ID      > bjx_bigdata_item_ids

	URL中存在 scene_type 参数时, 上报时 bjx_bigdata_scene_type 使用该参数的值
-->
<ul>
    <!-- 自动上报 -->
    <li
        data-expose
        data-expose-scene=""
        data-expose-slot=""
        data-expose-index=""
        data-expose-type=""
        data-expose-id=""
    >
        1111
    </li>
    
    <!-- 单条设置上报点击（1: 点击元素的父级有A元素的就上报点击  2: 点击元素到绑定事件元素之间有A元素的就上报点击） -->
    <li
        data-expose="1"
        data-expose-scene=""
        data-expose-slot=""
        data-expose-index=""
        data-expose-type=""
        data-expose-id=""
    >
        222
    </li>
    
    <!-- 手动上报 -->
    <li
        data-expose-mt
        data-expose-scene=""
        data-expose-slot=""
        data-expose-index=""
        data-expose-type=""
        data-expose-id=""
    >
        333
    </li>
</ul>

开发与构建

npm run dev
npm run build