X-SDK 集成(NPM 方式)

你可以选择 NPM 包的安装方式来集成浩客 SDK,NPM 包地址:https://github.com/jinshuju/howxm-js

NPM 包安装

npm install --save howxm-js

NPM 安装接口

NPM 包的接口方法依然遵循了 X-SDK WEB 端的接口,参数和回调都是类似的,详细可以参看:https://howxm.com/help/articles/web-sdk-intro#x-sdk

InitializingHowxm 初始化接口

示例代码如下

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 />
}

1. identifyHowxm 用户身份信息传递接口

接口信息,详细可查看: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)
  }
}

2. eventHowxm 抛出事件接口

接口信息,详细可查看: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')
    })
  }
}

3. checkOpenHowxm 弹出策略检查接口接口

接口信息,详细可查看: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)
      }
    )
  }
}

4. openHowxm 弹出问卷接口

接口信息,详细可查看: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')
    })
  }
}

5. setExtraAttributes 扩展参数接口

设置自定义属性,一般是跟场景相关信息,如某次课程、某个动作、某次场景等。扩展属性的信息,会附属到用户提交的当条数据上。

示例代码如下

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)
  }
}