谷歌分析
此分析插件会将 google 分析 v. 4 载入您的应用程序 .
详情 见文件。 。 。 .
安装
npm install analytics
npm install @analytics/google-analytics
如何使用
这个 @analytics/google-analytics 软件包在 浏览器。要使用、安装软件包,在您的工程中包含并初始化插件 分析。 。 。 .
以下为如何使用浏览器插件的例子.
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
measurementIds: ['G-abc123']
})
]
})
/* 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 与 googleAnalytics 插件, 数据将发送到 Google 分析器 分析 识别, (中文(简体) ), 分析. p,或 分析. track 被调用.
见 其他执行实例 在您的项目中使用更多细节 .
支持的平台
这个 @analytics/google-analytics 软件包在 浏览器
浏览器使用量
Google Analytics客户端浏览器插件使用这些分析的api方法:
浏览器 API
import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleAnalytics({
measurementIds: ['G-abc123']
})
]
})
浏览器配置选项
| 选项 | 说明 |
|---|---|
measurementIds 所需经费 - 阵列. | Google 分析计量标识 |
debug 选项 - 布尔 | 启用 Google 分析调试模式 |
dataLayerName 选项 - 绳子 | 数据Layer对象的可选名称。 默认为 ga4DataLayer . |
gtagName 选项 - 绳子 | 数据Layer对象的可选名称。 默认为 gtag。 。 。 . |
gtagConfig.anonymize_ip 选项 - 布尔 | 启用 IP地址匿名化 发送到谷歌分析. |
gtagConfig.cookie_domain 选项 - 对象 | 配置时的额外 cookie 属性 饼干 |
gtagConfig.cookie_expires 选项 - 对象 | 配置时的额外 cookie 属性 饼干 |
gtagConfig.cookie_prefix 选项 - 对象 | 配置时的额外 cookie 属性 饼干 |
gtagConfig.cookie_update 选项 - 对象 | 配置时的额外 cookie 属性 饼干 |
gtagConfig.cookie_flags 选项 - 对象 | 配置时的额外 cookie 属性 饼干 |
customScriptSrc 选项 - 绳子 | 如果代理调用, 自定义谷歌分析脚本的 URL |
nonce 选项 - 绳子 | 内容-安全政策非现金价值 |
其他例子
以下是其他执行实例.
在 HTML 中使用
以下是通过unpkg CDN导入的例子. 请注意,这将拉入该套件的最新版本.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-analytics in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/google-analytics/dist/@analytics/google-analytics.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsGa.init({
measurementIds: ['G-abc123']
})
]
})
/* 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/google-analytics 在无害环境管理模块中.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-analytics 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 analyticsGa from 'https://unpkg.com/@analytics/google-analytics/lib/analytics-plugin-ga.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsGa({
measurementIds: ['G-abc123']
})
// ... 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>
修复"双页浏览"
Google analytics 4有时会自动为单页应用程序发送页面视图. 要禁用此选项, 您需要进入您的流的设置, 点击“ 增强度量” 部分, 并取消检查“ 根据浏览器历史事件更改 ” 设置 。 这只能确保 analytics.page() 电话将发送页面浏览到 Google 分析 v4.
谷歌分析 v3
有关谷歌分析的更古老版本,请参见: @analytics/google-analytics-v3 软件包 或 GA3 插件文件
一起使用GA3和GA4
如下所示,可以同时使用GA3和GA4。 记住GA3 从2023年7月开始 将会贬值
import Analytics from 'analytics'
import googleAnalyticsPlugin from '@analytics/google-analytics'
import googleAnalyticsV3Plugin from '@analytics/google-analytics-v3'
/* Initialize analytics instance */
const analytics = Analytics({
app: 'my-app',
plugins: [
/* Load Google Analytics v4 */
googleAnalyticsPlugin({
measurementIds: ['G-abc123'],
}),
/* Load Google Analytics v3 */
googleAnalyticsV3Plugin({
trackingId: 'UA-11111111-2',
}),
],
})
analytics.page()