帮助中心 > 技术文档 > 客户端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