❤
npm
Sign UpSign In

authing-insight-js-sdk
TypeScript icon, indicating that this package has built-in type declarations

0.0.66 • Public • Published

你可以使用 authing-insight-js-sdk 快速的集成到你的应用中。authing-insight 会自动捕捉用户行为并发送事件

快速集成

1. 网站事件自动捕捉

要将 Authing Insight 集成到您的网站并无需额外工作即可自动捕获事件，包括 以下片段在你 站点 HTML. 理想情况下，将其放在 标签中.

<script>
    !function(t,i){if(!i.__SV){var n,e,p,s;window.authingInsight=i,i._i=[],i.init=function(r,a,o){function c(t,i){var n=i.split(".");2==n.length&&(t=t[n[0]],i=n[1]),t[i]=function(){t.push([i].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=a.api_host+"/static/array.full.js",(s=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,s);var u=i;for(void 0!==o?u=i[o]=[]:o="authingInsight",u.people=u.people||[],u.toString=function(t){var i="authingInsight";return"authingInsight"!==o&&(i+="."+o),t||(i+=" (stub)"),i},u.people.toString=function(){return u.toString(1)+".people (stub)"},n="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset".split(" "),e=0;e<n.length;e++)c(u,n[e]);i._i.push([r,a,o])},i.__SV=1}}(document,window.authingInsight||[]);
    authingInsight.init('你的 Authing Insight 项目 API 密钥',{api_host:'你的 Authing Insight 服务地址'});
</script>

2. 安装依赖包

npm i authing-insight-js-sdk

3. 在项目中初始化(还没有获取到用户信息)

// 基于 React 构建的前端项目
import authingInsight from "authing-insight-js-sdk";
const authingInsightInstance = authingInsight.init(key, {
  api_host: api,
  enable_recording_console_log: true,
  loaded: (instance) => {
    instance.startSessionRecording();
    // 如果这里获取到用户信息
    if (window.__user__) {
      instance.identify("你的用户 id");
      instance.people.set("你的用户信息");
    }
  },
});
window.__authingInsightInstance__ = authingInsightInstance;

4. 还没有登录或者注册的用户访问你的应用，我们会根据浏览器指纹生成一个唯一标识 ，一旦注册成功后，需要将用户 id 通知 Authing Insight，它会自动的合并用户，并使用你提供的用户 id 作为唯一标识

// 在注册成功后调用
export const identifiedByInsight = (userInfo: UserInfo) => {
  try {
    const authingInsightInstance = window.__authingInsightInstance__;
    const persistence = authingInsightInstance.persistence;
    const $user_state = persistence.props.$user_state;
    /**
     * 如果用户状态是 anonymous 说明当前客户端口的用户是没有确认过的
     * 此时我们需要手动的将注册好的用户与 匿名用户进行关联
     **/
    if ($user_state === "anonymous") {
      authingInsightInstance.identify(userInfo.id, userInfo);
    }
  } catch (error) {
    console.log(JSON.stringify(error));
  }
};

5. 在项目中初始化(已经获取到了用户信息)

// 基于 React 构建的前端项目
import authingInsight from "authing-insight-js-sdk";

const api_host = "你的 Authing Insight 服务地址";
const key = "你的 Authing Insight 项目 API 密钥";

// 你的用户信息
const userInfo = {};

// 在保证你能获取到用户信息的前提下
if (userInfo.userId) {
  authingInsight.init(key, {
    api_host: api_host,
    enable_recording_console_log: true,
    on_xhr_error(failedRequest) {},
    loaded: function (instance) {
      instance.identify(userInfo.userId);
      instance.people.set({
        ...userInfo,
      });
      instance.startSessionRecording();
    },
  });
}

自定义捕获页面元素信息

我们还提供自动捕获页面元素信息的事件，在初始化后调用 authingInsight.autoCaptureElem(config) 方法并传入相关配置

config 参数

参数名称 类型 描述 示例
urlPath string authingInsight.autoCaptureElem 方法要应用在哪些页面， /* 代表所有页面 /*
elements element[] 传入一个列表，列表成员必须符合 element 类型 [element1,element2]
eventName string Authing Inisght 事件名称，默认值： 🕹️ 自定义捕获页面元素 🕹️ 自定义捕获页面元素
countPageActiveTime boolean 默认是关闭状态，如果开启则会上报三种时间: 1.进入时间;2.停留时间;3.离开时间 true

element 参数

参数名称 类型 描述 示例
selector string HTML CSS 选择器 .page-title
propertiesName string propertiesName 会展示到 Authing Inisght 控制台事件详情页面 页面标题
captureChangeEvt boolean 默认是关闭状态，如果开启则代表是否要捕获用户输入事件，获取输入结果，不会捕获密码等重要信息 true

示例代码 1 添加一段 JavaScript 代码片段

<script>
    !function(t,i){if(!i.__SV){var n,e,p,s;window.authingInsight=i,i._i=[],i.init=function(r,a,o){function c(t,i){var n=i.split(".");2==n.length&&(t=t[n[0]],i=n[1]),t[i]=function(){t.push([i].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=a.api_host+"/static/array.full.js",(s=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,s);var u=i;for(void 0!==o?u=i[o]=[]:o="authingInsight",u.people=u.people||[],u.toString=function(t){var i="authingInsight";return"authingInsight"!==o&&(i+="."+o),t||(i+=" (stub)"),i},u.people.toString=function(){return u.toString(1)+".people (stub)"},n="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset".split(" "),e=0;e<n.length;e++)c(u,n[e]);i._i.push([r,a,o])},i.__SV=1}}(document,window.authingInsight||[]);
    authingInsight.init('你的 Authing Insight 项目 API 密钥',{
      api_host:'你的 Authing Insight 服务地址',
      loaded: function(instance){
            const config = [
                  {
                      urlPath: "/*",
                      elements: [
                        {
                          selector: ".page-title"
                          propertiesName: "页面标题",
                        },
                      ],
                  }
              ]
          instance.autoCaptureElem(config);
      }
    });
</script>

示例代码 2 在你的前端工程中使用 authingInsight sdk

// 引用 sdk
import authingInsight from "authing-insight-js-sdk";
// 调用方法
authingInsight.init(key, {
  api_host: api_host,
  loaded: function (instance) {
    const config = [
          {
              urlPath: "/*",
              elements: [
                {
                  selector: ".page-title",
                  propertiesName: "页面标题",
                },
              ],
        }
    ]
    instance.autoCaptureElem(config);
}

开启自动捕获用户输入时间以及开启上报事件时间的代码片段

<script>
    !function(t,i){if(!i.__SV){var n,e,p,s;window.authingInsight=i,i._i=[],i.init=function(r,a,o){function c(t,i){var n=i.split(".");2==n.length&&(t=t[n[0]],i=n[1]),t[i]=function(){t.push([i].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=a.api_host+"/static/array.full.js",(s=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,s);var u=i;for(void 0!==o?u=i[o]=[]:o="authingInsight",u.people=u.people||[],u.toString=function(t){var i="authingInsight";return"authingInsight"!==o&&(i+="."+o),t||(i+=" (stub)"),i},u.people.toString=function(){return u.toString(1)+".people (stub)"},n="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset".split(" "),e=0;e<n.length;e++)c(u,n[e]);i._i.push([r,a,o])},i.__SV=1}}(document,window.authingInsight||[]);
    authingInsight.init('你的 Authing Insight 项目 API 密钥',{
      api_host:'你的 Authing Insight 服务地址',
      loaded: function(instance){
            const config = [
                  {
                      urlPath: "/*",
                      elements: [
                        {
                          selector: 'input[type="text"][id="user_name"]' // 示例填写的是 css 选择器，查询一个输入框类型是 text & id 是 user_name 的 dom 元素。
                          propertiesName: "捕获输入用户名",
                          captureChangeEvt: true // 默认是关闭的，取获取到的元素的内容，如果开启则会捕获用户输入的事件，以及用户输入的内容
                        },
                      ],
                      countPageActiveTime: true // 默认是关闭的，如果开启则会上报三种时间  1.进入时间;2.停留时间;3.离开时间
                  }
              ]
          instance.autoCaptureElem(config);
      }
    });
</script>

示例代码 2 在你的前端工程中使用 authingInsight sdk

// 引用 sdk
import authingInsight from "authing-insight-js-sdk";
// 调用方法
authingInsight.init(key, {
  api_host: api_host,
  loaded: function (instance) {
    const config = [
          {
              urlPath: "/*",
              elements: [
                {
                  selector: 'input[type="text"][id="user_name"]' // 示例填写的是 css 选择器，查询一个输入框类型是 text & id 是 user_name 的 dom 元素。
                  propertiesName: "捕获输入用户名",
                  captureChangeEvt: true // 默认是关闭的，取获取到的元素的内容，如果开启则会捕获用户输入的事件，以及用户输入的内容
                },
                countPageActiveTime: true // 默认是关闭的，如果开启则会上报三种时间  1.进入时间;2.停留时间;3.离开时间
              ],
        }
    ]
    instance.autoCaptureElem(config);
}

MIT

Copyright (c) 2023 Authing

Readme

Keywords

none

Package Sidebar

Install

npm i authing-insight-js-sdk

Weekly Downloads

2

Version

0.0.66

License

MIT

Unpacked Size

3.47 MB

Total Files

18

Last publish

Collaborators

  • lixpng
  • zhaojingjing
  • donglyc
Try on RunKit
Report malware