npm 包 portm-sdk 使用教程

简介

Portm 是一个轻量级的跨平台无侵入性打点 SDK，支持 Web、移动端、小程序等多种平台。本教程将详细介绍如何使用 npm 包 portm-sdk，使您的前端项目具备数据统计能力。

安装

在前端项目根目录下，命令行执行以下命令:

npm install portm-sdk

安装成功后，您需要在需要统计的页面中引入 portm-sdk:

import Portm from 'portm-sdk'

初始化

在使用 portm-sdk 之前，您需要初始化 Portm 实例:

const portm = new Portm({
  token: 'YOUR-PORTM-TOKEN', // 在 Port 洞察中项目设置中可查看到
  debug: true // 是否开启调试模式，默认 false
});

页面打点

在 Portm 中，您可以通过 trackPage 方法对页面进行打点。一般情况下，每次进入一个新页面时需要调用该方法，代码示例如下:

portm.trackPage({
  pageName: 'pageName', // 页面名称
  pageTitle: 'pageTitle' // 页面标题
})

事件打点

在 Portm 中，您还可以通过 trackEvent 方法对发生在页面上的事件进行打点。以下是一些使用场景:

监听按钮点击事件

您可以在某个按钮的点击事件中添加以下代码，对按钮点击行为进行打点:

portm.trackEvent({
  eventName: 'buttonClick', // 事件名称
  eventParams: { // 事件参数
    buttonText: '按钮文字'
  }
})

监听表单提交事件

您可以在表单的提交事件中添加以下代码，对表单提交行为进行打点:

portm.trackEvent({
  eventName: 'formSubmit', // 事件名称
  eventParams: { // 事件参数
    formName: '表单名称'
  }
})

总结

本文通过介绍 npm 包 portm-sdk 的使用，使您具备在前端项目中进行数据统计的能力。希望本文能够对您有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b4f