帮助中心
- 平台介绍
- 接入指引
- 版本信息
- 使用流程
- 功能手册
- 操作视频
- 技术文档
- 基础知识
- 客户端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配置
帮助中心 > 技术文档 > 客户端SDK > Web Js SDK > SDK配置
Web JS SDK 接入流程主要分为两个步骤(两个文档):
1、SDK配置:将对应的SDK集成到您的产品项目中,然后进行初始化代码处理;
2、SDK接入:将需要埋点的数据,按照SDK包装不同的方法进行数据上送,其中功能主要包含两大类:全埋点(自动采集数据上送)、自定义埋点(手动设置业务数据上送)。
1. 集成埋点SDK
// 当前版本 3.1.8
npm i hina-cloud-js-sdk
or
yarn add hina-cloud-js-sdk
同步载入,可在hina-cloud-js-sdk文件中build文件夹下载入hina.min.js;
如图:
注意:
1、采集上报地址serverUrl
获取方式,请参考【采集上报地址获取】;
2.载入方式
2.1 同步载入
对于同步载入
或者服务端渲染
方式,请使用hina.min.js
,将以下代码置入 html 的<head>
,在页面头部通过 script src
的方式引入,将以下代码置入初始化代码中,并配置对应参数:
<!--Hina SDK BEGIN-->
<script src="./hina.min.js"></script>
<script>
// 创建 SDK 全局对象
const hina = window['hinaDataStatistic'];
// 用配置对象初始化 SDK
hina.init({
// 配置采集上报地址URL
serverUrl: '数据接收地址', // 配置采集上报地址URL(在线申请),查看如下【[采集上报地址获取] 链接
showLog: true,
autoTrackConfig: {
// 是否开启自动点击采集, true表示开启,自动采集 H_WebClick 事件
clickAutoTrack: true,
// 是否开启页面停留采集, true表示开启,自动采集 H_WebStay 事件
stayAutoTrack: true,
// 是否开启页面浏览采集,auto 表示开启,singlePage 表示单页面开启,false 关闭,可配合手动开启使用
// 若页面中有锚点设计,需要将该配置设为 false,否则触发锚点会多触发 H_pageview 事件
pageviewAutoTrack:'singlePage',
// 是否开启页面离开采集,true 表示开启,具体配置查看插件集成
pageLeaveAutoTrack: true
},
});
// 将 SDK 实例赋给全局变量 hina,或者其他您指定的变量
window["hina"] = hina;
</script>
<!--Hina SDK END-->
2.2 ES6模块化引入
对于ES6
模块化引入,直接放入主文件中使用
import hina from 'hina-cloud-js-sdk'
hina.init({
serverUrl: '数据接收地址', // 配置采集上报地址URL(在线申请),查看如下【[采集上报地址获取] 链接
showLog: true,
autoTrackConfig: {
// 是否开启自动点击采集, true表示开启,自动采集 H_WebClick 事件
clickAutoTrack: true,
// 是否开启页面停留采集, true表示开启,自动采集 H_WebStay 事件
stayAutoTrack: true,
// 是否开启页面浏览采集,auto 表示开启,singlePage 表示单页面开启,false 关闭,可配合手动开启使用
// 若页面中有锚点设计,需要将该配置设为 false,否则触发锚点会多触发 H_pageview 事件
pageviewAutoTrack: 'singlePage',
// 是否开启页面离开采集,true 表示开启,具体配置查看插件集成
pageLeaveAutoTrack: true
},
});
SDK初始化参数说明
参数 | 默认值 | 说明 |
---|---|---|
serverUrl | 无 | 数据接收地址 |
autoTrackConfig | 无 | 默认配置表示不自动采集元素点击事件和页面停留事件,配置成 {} 表示开启 H_WebClick、H_WebStay、H_pageview和H_WebPageLeave 自动采集,默认 H_WebClick 只采集 a,button,input ,textarea 四个 dom 元素的点击事件。 |
showLog | false | 设置 true 后会在网页控制台打 logger,会显示发送的数据,设置 false 表示不显示。 |
sendType | image | 表示使用image请求方式发数据,默认选用’image’图片get请求方式发送数据,支持’ajax’和’beacon’方式发送,这两种默认都是post请求方式,beacon方式兼容性差 |
dataSendTimeout | 3000 ,单位毫秒 | 表示数据发送超时时间,如果数据发送超过 datasend_timeout 还未返回结果,会强制取消该请求 |
presetProperties | {} | 是否开启 H_latest 相关的最近一次相关事件属性采集以及配置 H_url 作为公共属性,默认值为一个对象 |
performanceErrorConfig | {} | 是否开启性能监测功能,详情参考性能监测文档。可不配置 serverUrl和 showLog,不配置以webSDK 的 serverUrl 为准。 |
maxStringLength | 1024 | 上报属性值最大长度,默认1024,最大5120,超出部分截断 |
3. 集成热力分析SDK
如需使用数据分析
的网页热力分析
功能,需要引入热力分析SDK, 具体功能介绍请查看【网页热力分析介绍】
对于同步载入
或者服务端渲染
方式,请使用hotAnalyse.min.js
,将以下代码置入 html 的<head>
,在页面头部通过 script src
的方式引入,将以下代码置入初始化代码中,并配置对应参数:
<!--hotAnalyse SDK BEGIN-->
<script src="./hotAnalyse.min.js"></script>
<!--hotAnalyse SDK END-->
注意:
1、“数据接收地址”获取方式,请参考【采集上报地址获取】;
2、更多初始化配置,请参考【SDK接入】;
作者:邓昊 创建时间:2023-02-21 16:38
最后编辑:张永健 更新时间:2024-09-05 21:06
最后编辑:张永健 更新时间:2024-09-05 21:06