Bento 下一个.js SDK

[TIP] 需要帮忙吗? 加入我们 解析器 或电子邮件 jesse@ bentonow.com 页面存档备份,存于互联网档案馆 提供个性化支持.

Bento Next.js SDK使得在你的Next.js应用程序中快速而容易地构建出极佳的分析体验. 我们提供强大而可定制的组件和钩子,可以被外出使用来跟踪你的用户行为和管理分析. 我们还揭露低水平的API,以便你们能够建立完全的定制体验.

开始吧 综合指南,或 浏览 SDK 参考文献。 。 。 .

目录

• 特征
• 所需资源
• 开始
  • 安装
  • 配置
• 模块
• 要知道的东西
• 捐款
• 许可证

特征

• 简单整合: 快将 Bento 分析器添加到您的 Next.js 应用程序中,并带有预建组件 .
• 页面视图跟踪: 自动跟踪您 Next.js 应用程序的页面视图.
• 用户识别: 方便地识别用户进行更详尽的分析.
• 自定义事件跟踪:跟踪客户端和服务器端的自定义事件.
• Next.js 版本支持:与"Next.js 13+"和"遗产"两个版本相兼容.
• 服务器端集成:可选服务器侧跟踪与本多节点SDK.

所需资源

• 下册.js 12.0+(具体支持13+)
• 节点.js 14+
• 有效本托账户 SITE UUID 服务器

开始

安装

安装 Bento Next.js SDK :

npm install @bentonow/bento-nextjs-sdk --save

可选地安装用于服务器侧面集成的 Bento 节点 SDK :

npm install @bentonow/bento-node-sdk --save

配置

在您的顶级布局中添加本多分析组件 :

下册.js 13+:

import { BentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <BentoAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
        {children}
      </body>
    </html>
  )
}

下册.js 12(遗产):

import { BentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <BentoLegacyAnalytics siteUuid={process.env.NEXT_PUBLIC_BENTO_SITE_ID!} userEmail={''} />
      <Component {...pageProps} />
    </>
  )
}

模块

页面视图跟踪

自动跟踪页面视图 :

// Next.js 13+
import { useBentoAnalytics } from '@bentonow/bento-nextjs-sdk/analytics'

export default function Layout({ children }) {
  useBentoAnalytics(userEmail)
  return <>{children}</>
}

// Next.js 12 (legacy)
import { useBentoLegacyAnalytics } from '@bentonow/bento-nextjs-sdk/analytics/legacy'

function MyApp({ Component, pageProps }) {
  useBentoLegacyAnalytics(userEmail)
  return <Component {...pageProps} />
}

自定义事件跟踪

跟踪客户端自定义事件 :

window.bento.track('optin', { organisation_name: 'Team Rocket' })
window.bento.tag('customer')

跟踪服务器侧自定义事件 :

import { Analytics } from '@bentonow/bento-node-sdk'

const bento = new Analytics({ /* your configuration */ })

await bento.V1.track({
  email: '[email protected]',
  type: 'optin',
  fields: {
    organisation_name: 'Team Rocket'
  }
})

要知道的东西

1. SDK为Next.js 13+和遗留版本提供了不同的组件.
2. 页面视图跟踪在使用所提供的组件和钩子时是自动的.
3. 用户身份识别可以通过将用户的电子邮件传递到分析组件或钩子来完成.
4. SDK支持客户端和服务器端的事件跟踪.
5. 对于更先进的用法,可以使用Next.js脚本组件自定义集成.

捐款

我们欢迎捐款! 请看我们的 提供指南 关于如何提交拉动请求、报告问题和提出改进建议的详细信息.

许可证

Bento SDK for Next.js 以开源方式提供 MIT 许可证。 。 。 .