VUE +GTM的使用GTM是一个代码管理系统，可以快速轻松地更新网站或移动应用上的代码和代码段，例如用于流量分析和营销

什么是GTM

GTM是一个代码管理系统，可以快速轻松地更新网站或移动应用上的代码和代码段，例如用于流量分析和营销优化的代码和代码段。

背景

想要统计系统群的页面访问的情况，主要是监控系统的每日访问情况。可以分析的数据有： * 系统每天访问的人数 * 系统每天最多同时多少人访问 * 系统的访问峰值出现在什么时候 * 访问不同页面的停留时间，响应时间等。通过访问日志可以分析出系统的总体情况，为后续的优化和系统调整提供数据依据。

GTM的优势

可以发现如果使用GA来跟踪SPA的话，都需要在单独增加一些虚拟页面的代码才能实现。要使用虚拟页面，您需要在每次“页面”更改时推送一个事件，然后触发一个触发并设置虚拟页面名称的网页浏览标记。有了GTM之后，跟踪SPA的方法比GA简单了很多，不用再找技术修改SPA代码，市场人员直接通过配置GTM就可以实现

GTM的使用

1.先在GTM中建立Google analytics账号ID以及容器

2.设置方式

1.直接将代码插入页面中

使用vue-gtm

import Vue from 'vue'
import VueGtm from 'vue-gtm'
Vue.use(VueGtm, {
  // container id
  id: 'GTM-XXXXXX',
  // enable track or not (optional)
  enabled: process.env.NODE_ENV === 'production',
  // display console logs debugs or not (optional)
  debug: false 
})

3.容器设置登陆后，左边的导航栏如图所示，其中Tags表示你要追踪的代码，Triggers表示什么情况下触发你指定的代码，Variables是用于代码或者触发器设置时所需要使用的变量，可自定义。
4.配置好之后点击sunbmit按钮设置就生效了