分析的谷歌标签管理器插件
与 google 标签管理器整合 分析
此分析插件会将 google 标签管理器载入您的应用程序 .
详情 见文件。 。 。 .
安装
安装 analytics 财务报告和审定财务报表 @analytics/google-tag-manager 软件包
npm install analytics
npm install @analytics/google-tag-manager
如何使用
这个 @analytics/google-tag-manager 软件包在 浏览器。要使用、安装软件包,在您的工程中包含并初始化插件 分析。 。 。 .
以下为如何使用浏览器插件的例子.
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleTagManager({
containerId: 'GTM-123xyz'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
初始化后 analytics 与 googleTagManager 插件, 数据将发送到 Google 标签管理器中 分析. p,或 分析. track 被调用.
见 其他执行实例 在您的项目中使用更多细节 .
支持的平台
这个 @analytics/google-tag-manager 软件包在 浏览器
浏览器使用量
Google Tag 管理器客户端浏览器插件使用这些分析的 api 方法:
浏览器 API
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleTagManager({
containerId: 'GTM-123xyz'
})
]
})
浏览器配置选项
| 选项 | 说明 |
|---|---|
containerId 所需经费 - 绳子 | 集装箱标识专门确定GTM集装箱. |
dataLayerName 选项 - 绳子 | 数据Layer-对象的可选名称。 默认数据Layer. |
customScriptSrc 选项 - 绳子 | 从自定义源装入 Google 标签管理器脚本 |
preview 选项 - 绳子 | 预览模式环境 |
auth 选项 - 绳子 | 预览模式认证证书 |
execution 选项 - 绳子 | 脚本执行模式 |
nonce 选项 - 绳子 | 内容-安全政策非现金价值 |
其他例子
以下是其他执行实例.
在 HTML 中使用
以下是通过unpkg CDN导入的例子. 请注意,这将拉入该套件的最新版本.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-tag-manager in HTML</title>
<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
<script src="https://unpkg.com/@analytics/google-tag-manager/dist/@analytics/google-tag-manager.min.js"></script>
<script type="text/javascript">
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'my-app-name',
plugins: [
analyticsGtagManager({
containerId: 'GTM-123xyz'
})
]
})
/* Track a page view */
analytics.page()
/* Track a custom event */
analytics.track('cartCheckout', {
item: 'pink socks',
price: 20
})
</script>
</head>
<body>
....
</body>
</html>
通过 ES 模块在 HTML 中使用
使用 @analytics/google-tag-manager 在无害环境管理模块中.
<!DOCTYPE html>
<html>
<head>
<title>Using @analytics/google-tag-manager 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 analyticsGtagManager from 'https://unpkg.com/@analytics/google-tag-manager/lib/analytics-plugin-google-tag-manager.browser.es.js?module'
/* Initialize analytics */
const Analytics = analytics({
app: 'analytics-html-demo',
debug: true,
plugins: [
analyticsGtagManager({
containerId: 'GTM-123xyz'
})
// ... 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
})
</script>
</head>
<body>
....
</body>
</html>
配置 GTM
确定您设置了谷歌标签管理器来点燃 Page 视图 .
请在电线上看到这个示例 google 标签管理器中的“虚拟页面浏览”。 。 。 .
如果你使用SPA,你也想听听历史的变化.
见 分析提供者插件的完整列表 在主重播时.
使用多个 GTM 实例
如前所述 GTM 文档,可以在页面上加载多例google标签管理器. 这个方法是 不完全建议 由分析专家进行,如果使用单个容器可以避免。 但是,如果你必须! 你办得到!
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'
const GTMOne = googleTagManager({ containerId: 'GTM-123xyz' })
// For instance 2, override the plugin 'name' and provide the 2nd GTM container ID
const GTMTwo = Object.assign({}, googleTagManager({ containerId: 'GTM-456abc'}), {
name: 'google-tag-manager-two'
})
// Load up analytics
const analytics = Analytics({
app: 'awesome-app',
plugins: [
GTMOne,
GTMTwo
]
})
// Both instances will be loaded into the page
此功能已经 已添加 以伟大的盟誓 @ zobzn (英语)来啊!
自定义数据名称Layer-对象
数据Layer默认设置为窗口. dataLayer. 可以通过设置数据Layer来更改 插件配置中的名称 .
import Analytics from 'analytics'
import googleTagManager from '@analytics/google-tag-manager'
const analytics = Analytics({
app: 'awesome-app',
plugins: [
googleTagManager({
containerId: 'GTM-123xyz',
dataLayerName: 'customDataLayer',
})
]
})
// dataLayer is initialized to window.customDataLayer
追踪JS是否残疾
这个 分析库 将加载 Google Tag 管理器 Javascript。 这将为每个网站访问者提供Javascript.
对于少数可能残废了Javascript的人,您需要补充以下内容: <noscript> 标记到您站点的 HTML, 概述于 GTM 安装文件
将以下 HTML 添加到您的站点并替换 GTM-XXXX 带着你的集装箱身份证.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
如果您使用多个容器, 您需要添加一个 <noscript> 每个标签.
这些年,没有JS允许的应用软件一般都无法工作,用户必须打开网站。 因此,如果您想要添加附加内容,则由您和您的使用大小写决定 <noscript> 标签.