{"id":65,"type":"Article","title":"X-SDK 集成（NPM 方式）","slug":"npm-web-sdk-intro","content":"你可以选择 NPM 包的安装方式来集成浩客 SDK，NPM 包地址：https://github.com/howxm/howxm-js\r\n\r\nNPM 包的集成方式支持 react 和 vue，我们在 github 上放置了浩客的集成 demo repo 代码库，[可以进行查看](https://github.com/howxm/howxm-js). \u003cbr\u003e\r\n\r\n# NPM 包安装\r\n```\r\nnpm install --save howxm-js\r\n```\r\n\r\n# NPM 安装接口\r\n\r\nNPM 包的接口方法依然遵循了 X-SDK WEB 端的接口，参数和回调都是类似的，详细可以参看：https://howxm.com/help/articles/web-sdk-intro#x-sdk \r\n\r\n# InitializingHowxm 初始化接口\r\n示例代码如下\r\n\r\n```\r\nimport React from 'react'\r\nimport { initHowxm } from 'howxm-js'\r\n\r\nconst myLogger = console.info\r\n\r\nconst HowxmReadyApp = () =\u003e {\r\n  const appId = '\u003cYour App ID\u003e'\r\n\r\n  useEffect(() =\u003e {\r\n    initHowxm(appId, myLogger)\r\n  }, [])\r\n\r\n  return \u003cApp /\u003e\r\n}\r\n```\r\n\r\n# 1. identifyHowxm 用户身份信息传递接口\r\n接口信息，详细可查看：[identify](https://howxm.com/help/articles/x-sdk-api#1-identify)\r\n\r\n\r\n示例代码如下\r\n\r\n```\r\nimport React from 'react'\r\nimport { identifyHowxm } from 'howxm-js'\r\n\r\nconst myLogger = console.info\r\n\r\nconst MyCustomComponent = () =\u003e {\r\n  const customerInfo = {\r\n    uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型\r\n  }\r\n\r\n  const handleUserInfo = (userInfo) =\u003e {\r\n    identifyHowxm(customerInfo)\r\n  }\r\n}\r\n```\r\n\r\n\r\n# 2. eventHowxm 抛出事件接口\r\n接口信息，详细可查看：[event](https://howxm.com/help/articles/x-sdk-api#2-event)\r\n\r\n\r\n示例代码如下\r\n\r\n```\r\nimport React from 'react'\r\nimport { eventHowxm } from 'howxm-js'\r\n\r\nconst myLogger = console.info\r\n\r\nconst MyCustomComponent = () =\u003e {\r\n  const eventCode = '\u003cevent code\u003e'\r\n  const eventAttrs = {\r\n    plan: 'free',\r\n    age: 17,\r\n  }\r\n\r\n  const handleTriggerEvent = () =\u003e {\r\n    eventHowxm(eventCode, eventAttrs, () =\u003e {\r\n      myLogger('triggerEvent success')\r\n    })\r\n  }\r\n}\r\n```\r\n\r\n\r\n# 3. checkOpenHowxm 弹出策略检查接口接口\r\n接口信息，详细可查看：[checkOpen](https://howxm.com/help/articles/x-sdk-api#3-checkopen)\r\n\r\n\r\n示例代码如下\r\n\r\n```\r\nimport React from 'react'\r\nimport { checkOpenHowxm } from 'howxm-js'\r\n\r\nconst myLogger = console.info\r\n\r\nconst MyCustomComponent = () =\u003e {\r\n  const campaignId = '\u003cYou Campaign ID\u003e'\r\n  const uid = '00000001'\r\n\r\n  const handlecCheckOpenCampaign = () =\u003e {\r\n    checkOpenHowxm(\r\n      campaignId,\r\n      customerInfo,\r\n      () =\u003e {\r\n        myLogger('checkOpenHowxm success')\r\n      },\r\n      (data) =\u003e {\r\n        myLogger('checkOpenHowxm faield', data)\r\n      }\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n# 4. openHowxm 弹出问卷接口\r\n接口信息，详细可查看：[open](https://howxm.com/help/articles/x-sdk-api#4-open)\r\n\r\n\r\n示例代码如下\r\n\r\n```\r\nimport React from 'react'\r\nimport { openHowxm } from 'howxm-js'\r\n\r\nconst myLogger = console.info\r\n\r\nconst MyCustomComponent = () =\u003e {\r\n  const campaignId = '\u003cYou Campaign ID\u003e'\r\n  const customerInfo = {\r\n    uid: '00000001', // 用户唯一ID, 默认字段, 必填，string 类型\r\n  }\r\n  const extra = {\r\n    plan: 'free',\r\n  }\r\n\r\n  const handleOpenCampaign = () =\u003e {\r\n    openHowxm(campaignId, customerInfo, extra, () =\u003e {\r\n      myLogger('openHowxm finished')\r\n    })\r\n  }\r\n}\r\n```\r\n\r\n# 5. register 注册事件回调\r\n通过此方法可注册全局回调事件，在问卷展示和回收过程的不同阶段进行自定义处理。调用方法如下：\r\n\r\n  ```\r\n\tonBeforeOpenHowxm((campaignId, uid, attributes) =\u003e {\r\n\t\tconsole.log('onBeforeOpenHowxm: ', campaignId, uid, attributes)\r\n\t})\r\n\r\n\tonOpenHowxm((campaignId, uid, attributes) =\u003e {\r\n\t\tconsole.log('onOpenHowxm: ', campaignId, uid, attributes)\r\n\t})\r\n\r\n\tonCloseHowxm((campaignId, uid) =\u003e {\r\n\t\tconsole.log('onCloseHowxm: ', campaignId, uid)\r\n\t})\r\n\r\n\tonPageCompleteHowxm((campaignId, uid, fieldsEntry) =\u003e {\r\n\t\tconsole.log('onPageCompleteHowxm: ', campaignId, uid, fieldsEntry)\r\n\t})\r\n\r\n\tonCompleteHowxm((campaignId, uid) =\u003e {\r\n\t\tconsole.log('onCompleteHowxm: ', campaignId, uid)\r\n\t})\r\n  ```\r\n\r\n回调阶段定义\r\n\r\n| 名称                            | 说明                                                       |\r\n|--------------------------|---------------------------------------------|\r\n| onBeforeOpenHowxm            | 问卷展示前调用                                    |\r\n| onOpenHowxm                      | 问卷展示后调用                                     |\r\n| onCloseHowxm                      | 问卷在屏幕消失后调用                          |\r\n| onPageCompleteHowxm               | 用户提交了最后一页题目后调用            |\r\n| onCompleteHowxm       | 用户每提交一页，系统调用一次            |\r\n","featured":false,"category_id":3,"created_at":"2023-03-27T08:39:23.663Z","updated_at":"2023-11-23T06:55:59.215Z"}