|
| 1 | +# 元素曝光事件采集 |
| 2 | + |
| 3 | +## 功能 |
| 4 | +某视图元素,由不可见到可见,满足一定的限制条件(可见比例、有效停留时长),该插件上报该视图元素曝光事件。 |
| 5 | + |
| 6 | +## 集成 |
| 7 | +### ES Module 方式 |
| 8 | +```javascript |
| 9 | +import exposure from '/dist/wechat/plugin/exposure/index.es6'; |
| 10 | +sensors.use(exposure, { |
| 11 | + class_tags:['sensors-exposure-track'], |
| 12 | + area_rate: 0, |
| 13 | + stay_duration: 2, |
| 14 | + repeated: true |
| 15 | +}); |
| 16 | +``` |
| 17 | +#### 参数配置 |
| 18 | +通过初始化参数设置全局统一的曝光采集逻辑的配置。 |
| 19 | +- `class_tags`: 曝光元素检测标记。默认:['sensors-exposure-track']。类型: Array |
| 20 | +- `area_rate`:曝光比例。默认:0,值域:0~1。类型:Number |
| 21 | +- `stay_duration`: 有效曝光停留时长。 默认:0。类型:Number |
| 22 | +- `repeated`: 重复曝光。 默认:true。类型:Boolean |
| 23 | +### 配置曝光元素 |
| 24 | +1. 通过元素配置统一添加曝光参数 |
| 25 | +通过添加元素曝光 `class` 标记,并设置元素属性 `data-sensors-exposure-option` 统一进行曝光事件采集配置。 |
| 26 | + |
| 27 | +```html |
| 28 | +<view class="sensors-exposure-track" data-sensors-exposure-option="{{option}}"></view> |
| 29 | + |
| 30 | +// Page.js |
| 31 | +Page({ |
| 32 | + data: { |
| 33 | + option: { |
| 34 | + event_name: "exposure_name", |
| 35 | + config: { |
| 36 | + area_rate: 0, |
| 37 | + stay_duration: 0, |
| 38 | + repeated: true |
| 39 | + }, |
| 40 | + properties: { |
| 41 | + propA: "valueA" |
| 42 | + } |
| 43 | + } |
| 44 | + } |
| 45 | +}) |
| 46 | +``` |
| 47 | +- `sensors-exposure-track` 元素 `class` 属性设置曝光标记 (必须添加标记) |
| 48 | +- `data-sensors-exposure-option` 设置曝光事件配置 (必须设置) |
| 49 | +- - `event_name` 设置曝光事件名称 (必须设置) |
| 50 | +- - `config.area_rate` 设置曝光比例 |
| 51 | +- - `config.stay_duration` 设置有效曝光停留时长 |
| 52 | +- - `config.repeated` 设置重复曝光 |
| 53 | +- - `properties` 设置该元素曝光事件自定义属性。支持区分大小写及属性值其他类型。 |
| 54 | + |
| 55 | +2. 通过元素配置单独添加曝光参数 |
| 56 | +通过添加元素曝光 `class` 标记,并单独设置相关元素属性设置曝光事件采集配置。 |
| 57 | +```html |
| 58 | +<view class="sensors-exposure-track" data-sensors-exposure-event-name="home_top_banner" data-sensors-exposure-config-area_rate="1" data-sensors-exposure-config-stay_duration="2" data-sensors-exposure-config-repeated="true" data-sensors-exposure-property-propA="valueA" data-sensors-exposure-property-propB="valueB"></view> |
| 59 | +``` |
| 60 | +- `sensors-exposure-track` 元素 `class` 属性设置曝光标记 (必须添加标记) |
| 61 | +- `data-sensors-exposure-event-name` 设置曝光事件名称 (必须设置) |
| 62 | +- `data-sensors-exposure-config-area_rate` 设置曝光比例 |
| 63 | +- `data-sensors-exposure-config-stay_duration` 设置有效曝光停留时长 |
| 64 | +- `data-sensors-exposure-config-repeated` 设置重复曝光 |
| 65 | +- `data-sensors-exposure-property-*` 设置该元素曝光事件自定义属性。属性值为 String。无法是其他类型。 |
| 66 | + |
| 67 | +3. 通过 API 配置曝光参数 |
| 68 | +```javascript |
| 69 | +exposure.addObserverByClassName('元素 class 标记', { |
| 70 | + area_rate: 0.5, |
| 71 | + stay_duration: 0, |
| 72 | + repeated: true |
| 73 | +}) |
| 74 | +``` |
| 75 | +- `class_tag`:曝光元素标记。类型:String |
| 76 | +- `config`:曝光配置 |
| 77 | + - `area_rate`:曝光比例。默认:0,值域:0~1。类型:Number |
| 78 | + - `stay_duration`: 有效曝光停留时长。 默认:0。类型:Number |
| 79 | + - `repeated`: 重复曝光。 默认:true。类型:Boolean |
| 80 | + |
| 81 | +4. 通过 API 删除曝光标记监听 |
| 82 | +```javascript |
| 83 | +exposure.removeObserverByClassName('元素 class 标记') |
| 84 | +``` |
| 85 | +- `class_tag`:曝光元素标记。类型:String |
| 86 | + |
| 87 | +5. 动态渲染元素添加曝光 |
| 88 | +``` |
| 89 | +// index.wxml |
| 90 | +<view class="sensors-exposure-track" wx:for="{{list}}" wx:key="index" data-sensors-exposure-event-name="exposure_{{index}}" data-sensors-exposure-config-stay_duration="2" data-sensors-exposure-config-repeated="true" data-sensors-exposure-property-propA="{{item.name}}" data-sensors-exposure-property-propB="valueB"> |
| 91 | + {{index}}: {{item.name}} |
| 92 | + </view> |
| 93 | +// index.js |
| 94 | +const exposure = getApp().globalData.exposure |
| 95 | +Page({ |
| 96 | + data(){ |
| 97 | + return { |
| 98 | + list:[] |
| 99 | + } |
| 100 | + }, |
| 101 | + onShow(){ |
| 102 | + // 延迟渲染列表 |
| 103 | + setTimeout(()=>{ |
| 104 | + this.setData({list:[{name:'list1'},{name:'list2'}]},()=>{ |
| 105 | + exposure.addObserverByClassName('sensors-exposure-track',option); // option 同通过 API 配置曝光参数 |
| 106 | + }) |
| 107 | + },3000) |
| 108 | + } |
| 109 | +}) |
| 110 | +``` |
| 111 | + |
| 112 | +## 变动 |
| 113 | +- 新增事件:通过 View 自定义曝光事件名。 |
| 114 | +- 新增属性:通过 View 自定义事件属性。 |
| 115 | + |
| 116 | +## ⚠️ 注意 |
| 117 | +- 已注册的曝光元素标记 `class_tag`,再次注册仅更新之前未注册的元素,已注册的元素不会再次注册,已注册的元素不会因调用注册 API 导致发送曝光事件。 |
| 118 | +- 每个曝光元素 `event-name` (事件名)或 `property`(事件属性) 必须有差异,否则在 `repeated` 为 `false` 时,只会曝光查询到的第一个参数。 |
| 119 | +- 如未设置元素 `ID`,是通过曝光元素 `event-name` (事件名)与 `property`(事件属性)区分曝光元素。 |
| 120 | +- 微信小程序 SDK 版本必须大于或等于 1.18.5。 |
| 121 | +- 插件和 SDK 必须在同一个版本中,请勿混合不同版本的 SDK 和插件进行使用。 |
0 commit comments