用于 HubSpot 插件 analytics
与 HubSpot 合并 分析
这个分析插件将把 HubSpot 的客户端侧跟踪脚本加载到您的应用程序中并发送自定义事件,页面视图,以及HubSpot内部识别访问者.
安装
安装 analytics 财务报告和审定财务报表 @analytics/hubspot 软件包
npm install analytics
npm install @analytics/hubspot
如何使用
这个 @analytics/hubspot 软件包在 浏览器。要使用、安装软件包,在您的工程中包含并初始化插件 分析。 。 。 .
以下为如何使用浏览器插件的例子.
import Analytics from 'analytics'
import hubSpotPlugin from '@analytics/hubspot'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
hubSpotPlugin({
portalId: '234576'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify({
name: 'bob',
email: '[email protected]' // email is required
})
初始化后 analytics 与 hubSpotPlugin 插件, 数据将随时发送到 HubSpot 分析 识别, (中文(简体) ), 分析. p,或 分析. track 被调用.
见 其他执行实例 在您的项目中使用更多细节 .
支持的平台
这个 @analytics/hubspot 软件包在 浏览器
浏览器使用量
HubSpot客户端侧浏览器插件使用这些分析的api方法:
- 分析 识别 - 确定访客身份,并向HubSpot发送详情
- 分析. p - 将页面视图发送到 HubSpot
- 分析. track - 跟踪自定义事件并发送到 HubSpot
- 分析. 重置 - 为 HubSpot 值重置浏览器存储 cookie 和本地存储器
浏览器 API
import Analytics from 'analytics'
import hubSpotPlugin from '@analytics/hubspot'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
hubSpotPlugin({
portalId: '234576'
})
]
})
浏览器配置选项
| 选项 | 说明 |
|---|---|
portalId 所需经费 - 绳子 | HubSpot门户网站(或Hub) 您的 HubSpot 账户代码 |
customScriptSrc 选项 - 绳子 | 从自定义源装入中枢点脚本 |
flushOnIdentify 选项 - 布尔 | 立即开火页面视图以发送识别信息 |
其他例子
以下是其他执行实例.
在 HTML 中使用
以下是通过unpkg CDN导入的例子. 请注意,这将拉入该套件的最新版本.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/hubspot in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/hubspot/dist/@analytics/hubspot.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsHubspot({
portalId: '234576'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
/* Identify a visitor */
analytics.identify({
name: 'bob',
email: '[email protected]' // email is required
})
</script>
</head>
<body>
....
</body>
</html>
通过 ES 模块在 HTML 中使用
使用 @analytics/hubspot 在无害环境管理模块中.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/hubspot 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 analyticsHubspot from 'https://unpkg.com/@analytics/hubspot/lib/analytics-plugin-hubspot.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsHubspot({
portalId: '234576'
})
// ... 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({
name: 'bob',
email: '[email protected]' // email is required
})
</script>
</head>
<body>
....
</body>
</html>
使用标识
重要内容: HubSpot 需要一个 email 用于发出识别电话的字段.
如果您的识别电话不包含 email HubSpot不会被通知新用户.
发送属性时 identify 所有电话 camelCase 特性自动转换为 snake_case。这里有一个例外: firstName 打开 lastName 发送日期 firstname 打开 lastname。 。 。 .
示例
analytics.identify('user-xzy-123', {
email: '[email protected]',
accountLevel: 'pro' // trait will be `account_level`
})