部件插件 analytics
详情 见文件。 。 。 .
单击以扩展
安装
npm install analytics
npm install @analytics/segment
如何使用
这个 @analytics/segment 软件包在 浏览器 财务报告和审定财务报表 在节点.js的服务器侧。要使用、安装软件包,在您的工程中包含并初始化插件 分析。 。 。 .
以下为如何使用浏览器插件的例子.
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
初始化后 analytics 与 segmentPlugin 插件, 数据将随时发送到片段 分析. p, (中文(简体) ), 分析. track,或 分析 识别 被调用.
见 其他执行实例 在您的项目中使用更多细节 .
支持的平台
这个 @analytics/segment 软件包在 浏览器 财务报告和审定财务报表 在节点.js的服务器侧
浏览器使用量
片段客户端浏览器插件使用这些分析的 api 方法:
- 分析. p - 将页面视图发送到部分
- 分析. track - 跟踪自定义事件并发送到片段
- 分析 识别 - 确定访客身份,并将详情发送给分部
- 分析. 重置 - 为分块值重置浏览器存储 cookie 和本地存储器
浏览器 API
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
})
]
})
浏览器配置选项
| 选项 | 说明 |
|---|---|
writeKey 所需经费 - 绳子 | 您的部分写入关键 |
disableAnonymousTraffic 选项 - 布尔 | 禁用匿名访客的加载段 |
customScriptSrc 选项 - 布尔 | 覆盖段片断 URL, 用于通过自定义的 CDN 代理加载 |
integrations 选项 - 对象 | 启用/ 残疾部分目的地 https://bit.ly/38nRBj3 页面存档备份,存于互联网档案馆 |
服务器侧用法
段服务器侧节点.js插件使用这些分析的 api 方法:
服务器侧 API
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
})
]
})
服务器侧配置选项
| 选项 | 说明 |
|---|---|
writeKey 所需经费 - 绳子 | 与您的 Session.io 项目相对应的密钥 |
disableAnonymousTraffic 选项 - 布尔 | 禁用匿名访客的加载段 |
host 选项 - 绳子 | API的基础URL. 默认:"https://api.segment.io" |
path 选项 - 绳子 | API路径. 默认 : "/v1/ batch" |
maxRetries 选项 - 数目 | 重试冲出批次的次数 。 默认: 3 |
maxEventsInBatch 选项 - 数目 | 冲洗前要排队的消息数 。 默认: 15 |
flushInterval 选项 - 数目 | 自动冲出队列前需要等待的毫秒数 。 默认: 10000 |
httpRequestTimeout 选项 - 数目 | 等待 http 请求的最大毫秒数 。 默认: 10000 |
disable 选项 - 布尔 | 禁用分析库 。 所有电话都会是无谓的 默认:虚假. |
httpClient 选项 - HTTPFetchFn (美国英语) | 提供默认 http 客户端执行 |
其他例子
以下是其他执行实例.
服务器侧 ES6
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
})
// ...other plugins
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
具有共同JS的服务器端节点.js
如果使用节点,您将想要导入 .default
const analyticsLib = require('analytics').default
const segmentPlugin = require('@analytics/segment').default
const analytics = analyticsLib({
app: 'my-app-name',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
在 HTML 中使用
以下是通过unpkg CDN导入的例子. 请注意,这将拉入该套件的最新版本.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/segment in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/segment/dist/@analytics/segment.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsSegment({
writeKey: '123-xyz'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>
通过 ES 模块在 HTML 中使用
使用 @analytics/segment 在无害环境管理模块中.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/segment in HTML via ESModules</title>
<script>
// Polyfill process.
// **Note**: Because `import`s are hoisted, we need a separate, prior <script> block.
window.process = window.process || { env: { NODE_ENV: 'production' } }
</script>
<script type="module">
import analytics from 'https://unpkg.com/analytics/lib/analytics.browser.es.js?module'
import analyticsSegment from 'https://unpkg.com/@analytics/segment/lib/analytics-plugin-segment.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsSegment({
writeKey: '123-xyz'
})
// ... add any other third party analytics plugins
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify('user-id-xyz', {
firstName: 'bill',
lastName: 'murray'
})
</script>
</head>
<body>
....
</body>
</html>
自定义页面名称字段
默认情况下,页面名称是 document.title 数值.
使用更短的名字
analytics.page({
name: 'HomePage'
})
这会很快变得很棘手,我们建议不要这样.
从自定义代理机装入脚本
在特定情况下,您可能想要从不同的URL中加载您自己版本的片段分析.
要做到这一点,你可以添加 customScriptSrc 选项指向您的自定义段脚本.
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
segmentPlugin({
writeKey: '123-xyz',
// Load segment's analytics.js from somewhere else
customScriptSrc: 'https://yoursite.com/my-custom-loader.js'
})
]
})
组织电话
这个 .group 调用是专为部分的,分析器的 lib 默认不会暴露这一点。 但你很幸运,谢谢 自定义方法 打开插件!
发送一个组呼叫到 Spart 运行 analytics.plugins.segment.group() 定制方法.
这个 analytics.plugins.segment.group 函数的签名如下:
analytics.group(groupId, [traits], [options], [callback]);
浏览器示例
import Analytics from 'analytics'
import segmentPlugin from '@analytics/segment'
// Initialize analytics instance with plugins
const analytics = Analytics({
app: 'your-app-name',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
}),
]
})
// Usage:
// Now you can call segment.group in your app like so
analytics.plugins.segment.group('Group ID XYZ', {
principles: ['Bill', 'Bob'],
site: 'Apple co',
statedGoals: 'Do awesome stuff',
industry: 'Technology'
})
服务器侧示例
const analyticsLib = require('analytics').default
const segmentPlugin = require('@analytics/segment')
// Initialize analytics instance with plugins
const analytics = Analytics({
app: 'your-app-name',
plugins: [
segmentPlugin({
writeKey: '123-xyz'
}),
]
})
analytics.plugins.segment.group('Group ID XYZ', {
principles: ['Bill', 'Bob'],
site: 'Apple co',
statedGoals: 'Do awesome stuff',
industry: 'Technology'
})