帮助中心
- 平台介绍
- 接入指引
- 版本信息
- 使用流程
- 功能手册
- 操作视频
- 技术文档
- 基础知识
- 客户端SDK
- 服务端SDK
- 数据导入
- API功能
- SQL手册
- DML
- SQL函数
- 日期函数
- convert_tz
- curdate,current_date
- current_timestamp
- curtime,current_time
- date_add
- date_format
- date_sub
- datediff
- day
- dayname
- dayofmonth
- dayofweek
- dayofyear
- from_days
- from_unixtime
- hour
- makedate
- minute
- month
- monthname
- now
- second
- str_to_date
- time_round
- timediff
- timestampadd
- timestampdiff
- to_date
- to_days
- unix_timestamp
- utc_timestamp
- week
- weekday
- weekofyear
- year
- yearweek
- localtime,localtimestamp
- quarter
- last_day
- extract
- date_trunc
- minutes_add
- minutes_diff
- minutes_sub
- seconds_add
- seconds_diff
- seconds_sub
- hours_add
- hours_diff
- hours_sub
- days_add
- days_diff
- days_sub
- weeks_add
- weeks_diff
- weeks_sub
- months_add
- months_diff
- months_sub
- years_add
- years_diff
- years_sub
- 字符串函数
- append_trailing_char_if_absent
- to_base64
- from_base64
- ascii
- length
- bit_length
- char_length
- lpad
- rpad
- lower
- lcase
- upper
- ucase
- initcap
- repeat
- reverse
- char
- concat
- concat_ws
- substr
- substring
- sub_replace
- ends_with
- starts_with
- trim
- ltrim
- rtrim
- null_or_empty
- not_null_or_empty
- hex
- unhex
- elt
- instr
- locate
- find_in_set
- replace
- left
- right
- strleft
- strright
- split_part
- split_by_string
- substring_index
- money_format
- parse_url
- convert_to
- extract_url_parameter
- uuid
- space
- sleep
- 日期函数
- 数据类型
- 数据管理
- 常见问题
- 合规说明
- 资源下载
- AB测试
全埋点
帮助中心 > 技术文档 > 客户端SDK > Web Js SDK > 全埋点
1. 开启全埋点
1.1 代码示例
<script src="./hina.min.js"></script>
<script>
// 创建 SDK 全局对象
const hina = window['hinaDataStatistic'];
// 用配置对象初始化 SDK
hina.init({
serverUrl: '数据接收地址',
showLog : true,
sendType: 'ajax',
//单页面配置,默认开启,若页面中有锚点设计,需要将该配置删除,否则触发锚点会多触发 H_pageview 事件
isSinglePage: true,
autoTrackConfig: {
// 是否开启自动点击采集, true表示开启,自动采集 H_WebClick 事件
clickAutoTrack: true,
// 是否开启页面停留采集, true表示开启,自动采集 H_WebStay 事件
stayAutoTrack: true,
// 是否开启页面浏览采集,auto 表示开启,singlePage 表示单页面开启,false 关闭,可配合手动开启使用
// 若页面中有锚点设计,需要将该配置设为 false,否则触发锚点会多触发 H_pageview 事件
pageviewAutoTrack:'singlePage',
// 是否开启页面离开采集,true 表示开启,具体配置查看插件集成
pageLeaveAutoTrack: true
},
});
</script>
Web SDK全埋点包括三种事件:Web页面浏览、Web元素点击、Web视区停留。如果需要针对全埋点类型进行单独配置,可以参考下面单个全埋点类型使用的文档
1.2 Web页面浏览(H_pageview)
1.2.1 自动模式
配置参数 isSinglePage,默认值为 false ,表示是否开启自动采集 web 页面浏览事件 H_pageview 的功能
autoTrackConfig: {
// 是否开启页面浏览采集,auto 表示开启,singlePage 表示单页面开启,false 关闭,可配合手动开启使用
// 若页面中有锚点设计,需要将该配置设为 false,否则触发锚点会多触发 H_pageview 事件
pageviewAutoTrack:'singlePage',
},
1.2.2 手动模式
在页面切换的时候,手动调用 hn.quick(‘autoTrackSinglePage’) 来采集 web 页面浏览事件 H_pageview ,这个方法在页面 url 切换后调用
//在react中的全局onUpdate里调用
onUpdate(){
hn.quick('autoTrackSinglePage');
}
//在vue路由切换时调用
router.afterEach(() => {
hn.quick("autoTrackSinglePage");
});
1.3 Web元素点击(H_WebClick)
// SDK初始化参数配置
autoTrackConfig: {
//是否开启触达图,true表示开启,自动采集H_WebClick事件
//默认只有点击 a input button textarea 四种元素时,才会触发该事件
clickAutoTrack: true
}
1.4 视区停留(H_WebStay)
// SDK初始化参数配置
autoTrackConfig: {
//是否开启触达图,true表示开启,自动采集H_WebStay事件
stayAutoTrack: true
}
2.其他元素类型的元素点击事件采集
2.1. 支持 div 元素的自动采集
在原来的全埋点(采集 a、button、input 、textarea 标签)基础上新增对 div 标签的采集,采集规则为:
1.div 为子结点(无子元素)时采集 div 的点击;
2.div 中有且只有样式标签([‘mark’,’strong’,’b’,’em’,’i’,’u’,’abbr’,’ins’,’del’,’s’,’sup’])时,点击 div 或者样式标签都采集 div 的点击。
collectTags:配置是否开启 div 的全埋点采集,默认不采集。
autoTrackConfig: {
collectTags: {
div: true
},
},
2.2. 支持任意类型元素的自动采集
通过 collectTags 配置是否开启其他任意元素的全埋点采集(默认不采集)。
autoTrackConfig: {
collectTags: {
div: {
maxLevel: 1, // 默认是 1,即只支持子div,可配置范围是 [1, 2, 3],非该范围配置值,会被当作 1 处理。
},
li: true,
span: true,
img: true,
// 其他标签
...
},
},
2.3. 配置特殊属性来支持其他类型元素的自动采集
2.3.1.配置特殊属性
开启全埋点时,给需要自动采集点击事件的元素增加属性:hn-click。
<span hn-click>测试元素</span>
2.3.2.配置页面元素点击的自定义属性
开启全埋点时,支持配置带有指定属性的页面元素点击,自动采集点击事件。
autoTrackConfig: {
trackAttr: ['c-click','data-prop'],
}
————————————
<span c-click>测试元素</span>
<div data-prop>测试元素</div>
3. 全埋点相关参数配置
3.1 Web视区停留
stayAutoTrackConfig相关参数
参数 | 默认值 | 说明 |
---|---|---|
isCollectUrl | – | 返回true则采集当前页面的视区停留事件,返回false则不采集 |
autoTrackConfig相关参数,提供对于H_WebStay事件的自定义设置处理
参数 | 默认值 | 说明 |
---|---|---|
stayAutoTrack | true | 是否开启页面停留采集,默认true为开启,设置false可关闭 |
stayDelayTime | 4000(ms) | 有效停留时长超过多少毫秒过开始采集 |
maxStayPageDuration | 18000(s) | 预置属性停留时长 event_duration 的最大值,默认 18000 秒,5 小时 |
stayAutoTrackConfig: {
isCollectUrl: function(){
//如果页面地址为xxx.com/index 以下配置返回true时表示只才采集首页地址
if(location.href == 'xxx.com/index'){
return true;
}
return false;
}
},
autoTrackConfig: {
stayAutoTrack: true,
stayDelayTime: 4000,
maxStayPageDuration: 18000
}
3.2 点击事件的自定义设置和处理
参数 | 默认值 | 说明 |
---|---|---|
collectTags | div: false | 是否开启 div 的全埋点采集 |
trackAttr | [] | 开启全埋点时,配置带有指定属性的页面元素点击,自动采集点击事件 |
作者:石文华 创建时间:2023-02-23 15:57
最后编辑:张永健 更新时间:2024-09-05 21:06
最后编辑:张永健 更新时间:2024-09-05 21:06