什么是 Google Tag Manager？
Google Tag Manager (简称 GTM) 是一款用于管理网站标签的工具。通过在网站上添加 GTM 代码，可以使网站管理者轻松添加、更新和删除各种跟踪代码和营销标签，而不需要修改网站代码。GTM 可以用于跟踪网站流量、用户行为、广告转化，以及用于执行其他与网站相关的任务。
为什么要使用 vue-google-tag-manager？
在使用 GTM 进行网站跟踪时，需要在网站代码中添加一些 JavaScript 代码。而在使用 vue-cli 生成的 Vue.js 项目中，网站代码是由 Vue.js 相关的模块组成的，对于 GTM 的 JavaScript 代码的添加并不方便。此时，使用 vue-google-tag-manager 可以方便地在 Vue.js 项目中使用 GTM。
vue-google-tag-manager 的安装和使用
安装
在 Vue.js 项目中使用 npm 安装 vue-google-tag-manger。
npm install vue-google-tag-manager
使用
在 main.js 中导入 vue-google-tag-manager，并将其添加到 Vue.js 实例的 plugins 中。
import Vue from 'vue'
import VueGtm from 'vue-google-tag-manager'
Vue.use(VueGtm, {
id: 'GTM-XXXXXXX',
enabled: true,
});其中 id 为 GTM 提供的 ID，enabled 为 true 表示启用 GTM。如果需要在开发模式下禁用 GTM，可以通过以下方式设置：
Vue.use(VueGtm, {
id: 'GTM-XXXXXXX',
enabled: process.env.NODE_ENV === 'production',
});在 Vue.js 组件中，可以使用 vue-property-decorator 来管理 GTM 跟踪的事件。以按钮点击事件为例：
-- -------------------- ---- -------
------ - ---------- --- - ---- ------------------------
--------------
------ ------- ----- ----------- ------- --- -
------------- -
----------------------
------ ---------------
--------- ----------
------- --------
------ ---------
---
-
-其中，trackEvent 方法接收一个对象作为参数，对象中包含了事件的名称、分类、操作、标签等信息。可以根据自己的需要自定义事件参数，从而能够更好地对网站进行跟踪分析。
总结
使用 vue-google-tag-manager 可以方便地在 Vue.js 项目中使用 GTM 进行网站跟踪分析。通过安装和配置 vue-google-tag-manager，以及使用 vue-property-decorator 来管理 GTM，在 Vue.js 项目中添加网站跟踪代码将变得简单易行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cce81e8991b448e65a1