Web JS SDK 接入流程主要分为两个步骤（两个文档）：

1、SDK配置：将对应的SDK集成到您的产品项目中，然后进行初始化代码处理；
2、SDK接入：将需要埋点的数据，按照SDK包装不同的方法进行数据上送，其中功能主要包含两大类：全埋点（自动采集数据上送）、自定义埋点（手动设置业务数据上送）。

1. 参数

2. 用户关联

2.1. 介绍

在使用常用功能之前，建议你先了解用户识别规则：
关联标记用户时，用户ID取值有两种：一种是设备ID(随机算法生成)、一种是登录ID(由用户自主设置的ID，如手机号、id、邮箱)。
SDK默认使设备ID，并持久化存储在本地；用户未登录之前，会以设备ID作为用户的唯一标识。
注意:设备 ID 在本地缓存清理时会改变。

2.2. 基本API

2.2.1. 用户登录关联

用户注册成功或登录成功时，您需要调用 SDK 的setUserUId方法，一般为用户在您业务系统中的唯一身份标识（如手机号、id），多次调用 setUserUId 将会覆盖先前的值，代码示例：

//  此数据对应上报数据里的 accountId
hina.setUserUId('您平台用户的唯一标识');

为了准确记录登录用户的行为信息，建议在以下时机各调用一次用户登录方法setUserUId：

• 用户在注册成功时
• 用户登录成功时
• 已登录用户每次打开网站时

2.2.2. 获取设备唯一ID

在初始化SDK完成后执行才能使用，代码示例：

hina.getDeviceUId()

2.2.3. 自定义设备唯一ID

默认情况下，SDK 会生成设备唯一ID 并可以保证该ID的唯一性，如需替换，代码示例：

// 初始化时配置
hina.setDeviceUId('自定义ID')

3. 用户属性

用户属性，可以理解为用户的“标签”或“特征”，它描述了用户的某些固有信息或状态，这些信息通常不会频繁变动，例如性别、手机号、年龄。

3.1. 设置用户属性

设置用户属性的值，如果值存在则覆盖，如城市，代码示例：

hina.userSet({ city: 'Shanghai' });

3.2. 固定初始值的属性

设置用户仅在首次有效的属性。这些属性在用户生命周期内只会被设置一次，即使后续再次设置，也不会覆盖原有的值，如用户首次注册时间，代码示例：

hina.userSetOnce({
  first_register_time: new Date().toISOString()
});

3.3. 数值类型的属性

对数值类型的用户属性做递增或递减，如购买数量、账户余额、访问次数等，代码示例：

// 购买数量，表示递增2（若前值为4，执行后的值为6）
hina.userAdd({ 'purchase_count': 2 })

// 账户余额，表示递减100（若前值为300，执行后的值为200）
hina.userAdd({ 'account_balance': -100 })

// 用户访问次数，表示递增1次（若前值为10，执行后的值为11）
hina.userAdd('visit_count')

3.4. 集合类型的属性

4.0.0及以上版本支持，为数组类型的用户属性添加值，如收藏ID集合，代码示例：

// 增加2个值
hina.userAppend({ 'favorite': ['id1','id2'] })

// 增加1个值
hina.userAppend({ 'favorite': 'id1' })

3.5. 属性取消

重置某些用户属性的值，代码示例：

// 参数为字符串
hina.userUnset('name') // 字符串类型的值重置为：''
hina.userUnset('age') // 数值类型的值重置为：0
hina.userUnset('is_login') // 布尔类型的值重置为：''

// 也可以把上面的参数整合为一个数组，效果一致
hina.userUnset(['name','age','is_login'])

4. 发送事件

在 SDK 初始化完成之后，您就可以进行数据埋点，收集用户的的行为信息。

4.1. 自定义埋点

准备工作：在嗨数云平台创建元事件，如事件名：novel_read_btn_click，属性名：novel_id、novel_chapter。
使用track()方法进行直接埋点，埋点事件支持添加自定义属性。

// 不含自定义属性，比如：点击“开始阅读”按钮；
hina.track("novel_read_btn_click");

// 添加自定义属性，如：点击“开始阅读”按钮，添加属性：小说id、小说的章节
hina.track( 'novel_read_btn_click ', // 事件名称
  { novel_id: "1234567890", novel_chapter : 3 }  // 事件属性
);

5. 事件属性

在进行埋点事件追踪时，您可以根据需求对埋点事件进行属性的定义。 SDK 中提供了公共属性用于给每个埋点事件添加属性。

5.1. 设置事件公共属性

对于所有事件都需要添加的属性，可在初始化 SDK 后，调用 registerCommonProperties将属性注册为公共事件属性，如设置用户等级为公共事件属性，代码示例：

hina.registerCommonProperties({
    role: '黄金会员'
})

当设置动态公共属性的时候，需要使用函数类型作为属性值，函数返回值只能是string、bool、number、date、array类型，代码示例：

hina.registerCommonProperties({
  afterTwoHour: function(){
    return new Date().addHours(2)
  }
})

5.2. 获取预置属性

获取预置属性，如：页面地址，页面标题，前向地址，SDK 类型及版本，屏幕宽高，最近一次的相关属性等，代码示例：

hina.quick('isReady',function(){
  const presetProperties = hina.getPresetProperties();
})

6. 上报数据方式

SDK上报数据的方式分为实时发送和批量发送：

• 实时发送：事件触发之后会立即上报一条最新数据到海纳分析平台，常见的数据发送有image、ajax、beacon发送。
• 批量发送: 触发事件后会先保存起来再批量定时发送到海纳分析平台。

6.1. 实时发送数据

常见的实时发送数据方式有 img 发送、ajax 发送和 beacon 发送：

• ajax 发送：默认，采用 post 形式发送数据，数据较为安全，且发送数据的大小基本不受限制。
• img 发送：使用 img 发送数据，对于跨域的兼容比较好，发送的形式就是创建一个 img 元素，src 带上所有要发送的数据。
• beacon发送：beacon是浏览器的最新发送策略，采用post形式发送数据，可以避免页面关闭时数据发送丢失的问题，但不兼容老版本浏览器。
  代码示例：

hina.init({
  // img发送
  sendType: 'image'，
  // ajax发送
  sendType: 'ajax'，
  // beacon发送
  sendType: 'beacon'，
  // 其他属性...
})

6.2. 批量发送数据

触发事件之后会将数据写入localStorage中，如果浏览器不支持 localStorage存储，请使用实时发送数据的方式。
数据发送请求必须成功后，才会删除数据，否则会一直请求直到存储最大条数。代码示例：

hina.init({
  // 关闭批量发送
  batchSend: false,
  // 开启批量发送
  batchSend: true,
  // 开启批量发送
  batchSend:{
    dataSendTimeout: 6000, // 单次请求超时多少毫秒则自动取消，以防请求无响应，默认6000毫秒
    sendInterval: 6000, // 间隔多少毫秒发一次数据，默认6000毫秒
    storageLimit: 200, // 存储 localStorage 条数最大值，默认200条
  },
  // 其他属性...
})

注意：

1. 批量发送功能和回调函数功能不可以同时使用，比如track加了callback，使用批量发送后callback不会执行。
2. 批量发送默认使用 ajax 的方式发送数据，如果不支持跨域ajax发送数据，会使用img且实时发送数据。
3. 如果localStorage 里已经存了超过 200 条数据，会导致批量发送功能失效，localStorage 中只保存这 200 条数据，新产生的数据使用 img 且实时发送数据的方式。当进入同域名的新页面时，会自动检查缓存中是否有数据，如果有会继续发送缓存的数据。
4. useAppBridge和batch_send只能选择一个，开启了打通App就不能再用批量发送。

7. 渠道追踪和广告

准备工作：手动开启Web浏览页面事件(H_pageview)，配置{pageviewAutoTrack：’singlePage’}。
渠道追踪是记录用户访问您网站的来源，帮助分析用户通过哪些途径（如搜索引擎、社交媒体、电子邮件等）进入，从而优化营销效果。

7.1. 首次渠道属性

新用户首次访问网站时，SDK会收集该用户的渠道来源属性，并为这些属性设置以’H_first_’为前缀的名称。每位用户的此类数据仅采集一次，相关文档。
举例：您在百度推广电商网站时，新用户通过搜索关键字进入网站，SDK内部自动采集以下数据，源码示例：

hina.userSetOnce({
  "H_first_referrer": "https://www.baidu.com?...", // 首次前向地址
  "H_first_referrer_host": "www.baidu.com",        // 首次前向域名
  "H_first_traffic_source_type": "付费广告流量",     // 首次流量来源类型
  "H_first_search_keyword": "拍照手机",             // 首次搜索引擎关键词
});

7.2. 广告系列参数(utm_开头)

UTM参数 （全称Urchin Traffic Monitor，流量监控器）是一组附加在 URL 后的标签，用于追踪流量来源，SDK默认采集以下5个UTM参数：

举例：您经营一个电商网站，在百度投放手机广告，设置广告链接为：https://www.myshop.com/phone?utm_source=baidu&utm_medium=cpc&utm_term=手机&utm_content=image&utm_campaign=双11大促，那么UTM信息如下：

7.3. 首次广告系列参数(H_utm_开头)

接着上述案例。若新用户通过百度访问手机广告的链接，SDK采集以下数据（属性详情），属性名以H_utm_为前缀，打印日志：

{
  "properties": {      
    "H_utm_source": "baidu",     // 首次广告来源
    "H_utm_medium": "cpc",       // 首次广告媒介
    "H_utm_term": "手机",         // 首次广告字词
    "H_utm_content": "image",    // 首次广告内容
    "H_utm_campaign": "双11大促", // 首次广告名称

    "H_latest_utm_source": "baidu",    // 最近一次广告来源
    "H_latest_utm_medium": "cpc",      // 最近一次广告媒介
    "H_latest_utm_term": "手机",        // 最近一次广告字词
    "H_latest_utm_content": "image",    // 最近一次广告内容
    "H_latest_utm_campaign": "双11大促", // 最近一次广告名称
    // 其他属性...
  },
  // 其他属性...
}

7.4. 最近一次广告系列参数(H_latest_utm_开头)

接着上述案例。后来，您又在微博投放空调广告，设置广告链接为：https://www.myshop.com/air?utm_source=weibo&utm_medium=banner&utm_term=空调&utm_content=video&utm_campaign=618大促，当老用户通过微博访问您的网站时，SDK采集以下数据，属性名以H_latest_为前缀，打印日志：

{
  "properties": {      
    "H_utm_source": "baidu",     // 首次广告来源
    "H_utm_medium": "cpc",       // 首次广告媒介
    "H_utm_term": "手机",         // 首次广告字词
    "H_utm_content": "image",    // 首次广告内容
    "H_utm_campaign": "双11大促", // 首次广告名称

    "H_latest_utm_source": "weibo",   // 最近一次广告来源
    "H_latest_utm_medium": "banner",  // 最近一次广告媒介
    "H_latest_utm_term": "空调",       // 最近一次广告字词
    "H_latest_utm_content": "video",   // 最近一次广告内容
    "H_latest_utm_campaign": "618大促", // 最近一次广告名称
    // 其他属性...
  },
  // 其他属性...
}

7.5. 最近一次相关的属性

您可以设置是否采集最近一次相关的属性（如utm、前向地址等），SDK会把数据存储在浏览器的 Cookie 中（用于你的其他网址共享数据），Cookie名称为hinasdk_crossdata，如果对 Cookie 存储大小有要求，可选择性的开启下列属性：

配置项如下：

hina.init({
  presetProperties: {
    latest_utm: true,
    latest_traffic_source_type:true,
    latest_search_keyword:true,
    latest_referrer:true,
  }
  // 其他属性...
})

接着上述案例，打印cookie数据：

{
  "props": {
    "H_utm_source": "baidu",     // 首次广告来源
    "H_utm_medium": "cpc",       // 首次广告媒介
    "H_utm_term": "手机",         // 首次广告字词
    "H_utm_content": "image",    // 首次广告内容
    "H_utm_campaign": "双11大促", // 首次广告名称

    "H_latest_utm_source": "weibo",              // 最近一次广告来源
    "H_latest_utm_medium": "banner",             // 最近一次广告媒介
    "H_latest_utm_term": "空调",                  // 最近一次广告字词
    "H_latest_utm_content": "video",             // 最近一次广告内容
    "H_latest_utm_campaign": "618大促",           // 最近一次广告名称
    "H_latest_traffic_source_type": "付费广告流量", // 最近一次流量来源类型
    "H_latest_search_keyword": "新款空调",         // 最近一次搜索引擎关键字
    "H_latest_referrer": "https://weibo.com",     // 最近一次前向地址
    // 其他属性...
    },
    // 其他属性...
}

7.6. 自定义渠道属性(非UTM参数)

如果您想采集URL中的其他数据（不包括utm_source、utm_medium、utm_term、utm_content、utm_campaign），例如采集URL中的字段bd_vid和abc，广告地址为：https://www.myshop.com/phone?utm_source=baidu&utm_medium=cpc&utm_term=手机&utm_content=image&utm_campaign=双11大促&bd_vid=1234567890&abc=888，代码示例：

hina.init({
  sourceChannel:['bd_vid','abc']
  // 其他属性...
})

SDK会提取URL中的bd_vid和abc字段信息，并将这些信息上报，打印日志：

{
  "properties": {
    "bd_vid": "1234567890",
    "abc": "888",
    // 其他属性...
  },
  // 其他属性...
}