你可以选择 NPM 包的安装方式来集成浩客 SDK，NPM 包地址：https://github.com/jinshuju/howxm-js
npm install --save howxm-js
NPM 包的接口方法依然遵循了 X-SDK WEB 端的接口，参数和回调都是类似的，详细可以参看：https://howxm.com/help/articles/web-sdk-intro#x-sdk
示例代码如下
import React from 'react'
import { initHowxm } from 'howxm-js'
const myLogger = console.info
const HowxmReadyApp = () => {
const appId = '<Your App ID>'
useEffect(() => {
initHowxm(appId, myLogger)
}, [])
return <App />
}
接口信息，详细可查看：identify
示例代码如下
import React from 'react'
import { identifyHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const customerInfo = {
uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
}
const handleUserInfo = (userInfo) => {
identifyHowxm(customerInfo)
}
}
接口信息，详细可查看：event
示例代码如下
import React from 'react'
import { eventHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const eventCode = '<event code>'
const eventAttrs = {
plan: 'free',
age: 17,
}
const handleTriggerEvent = () => {
eventHowxm(eventCode, eventAttrs, () => {
myLogger('triggerEvent success')
})
}
}
接口信息，详细可查看：checkOpen
示例代码如下
import React from 'react'
import { checkOpenHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const campaignId = '<You Campaign ID>'
const uid = '00000001'
const handlecCheckOpenCampaign = () => {
checkOpenHowxm(
campaignId,
customerInfo,
() => {
myLogger('checkOpenHowxm success')
},
(data) => {
myLogger('checkOpenHowxm faield', data)
}
)
}
}
接口信息，详细可查看：open
示例代码如下
import React from 'react'
import { openHowxm } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const campaignId = '<You Campaign ID>'
const customerInfo = {
uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型
}
const extra = {
plan: 'free',
}
const handleOpenCampaign = () => {
openHowxm(campaignId, customerInfo, extra, () => {
myLogger('openHowxm finished')
})
}
}
设置自定义属性，一般是跟场景相关信息，如某次课程、某个动作、某次场景等。扩展属性的信息，会附属到用户提交的当条数据上。
示例代码如下
import React from 'react'
import { setExtraAttributes } from 'howxm-js'
const myLogger = console.info
const MyCustomComponent = () => {
const extraAttrs = {
plan: 'basic',
vip_level: '1',
}
const handleTriggerEvent = () => {
setExtraAttributes(eventAttrs, myLogger)
}
}