vue 使用gtm代码代替ga代码作谷歌分析

1.背景

由于google tag manage功能越来越强大，ga所拥有的功能基本上gtm都有，而gtm拥有的功能ga不一定有，所以我们现在将之前的ga代码换成了gtm代码

2.引入gtm

由于我是vue项目，所以使用第三方依赖包vue-gtm来更快捷的搭建gtm所需要的环境。看官方文档，即可知，需要引入两端js文件，那使用了该依赖包后就不需要引入了，会自动帮你导入js。关于vue-gtm具体使用方式，可以参考github：https://github.com/mib200/vue-gtm，当然你可以使用其他集成gtm的依赖包。

3.事件

之前ga使用事件，直接就在代码中使用方法ga(xx,xxx)就可以了，但是gtm就没这么简单了

3.1 进入gtm控制台

gtm控制台：https://tagmanager.google.com/#/home
进入后，如果没有账号就创建账号，登陆后会有一个容器id

这个id就填在vue-gtm指定的填写id的地方。

3.2 添加代码

登陆后，左边的导航栏如图所示，其中代码表示你要追踪的代码，触发器表示什么情况下触发你指定的代码，变量是用于代码或者触发器设置时所需要使用的变量，可自定义。那我们首先添加代码，点击代码导航栏后，在右边会有添加代码的按钮，点击后，如下图所示：

可同时配置代码和触发器

3.3 代码配置

我现在是想要添加一个注册事件，下面的跟踪id即是google analyise中的跟踪id。
google analyise的网址：https://analytics.google.com，可以查看数据等信息
然后事件类别，操作，标签变现在

3.4 触发器配置

触发器有很多，比如网页浏览，每进入一个网页就会触发一次，窗口加载，每窗口加载一次就触发一次，还有点击的，当用户点击了你指定的div，就会触发一次，有很多，但是我们不使用这些。比如我要记录成功注册的用户数，那如果使用点击触发器，显然是不对的，因为有可能会有注册失败的，所以我们是需要在代码中发送事件的（注册成功后发送事件），所以这里我们要选择其他中的自定义事件


这个事件名称是自定义的，随便写。

3.5 代码中发送事件

 this.$gtm.trackEvent({
        event: 'register', 
        category: 'User',
        action: 'register'
      });

注意这个js代码中的event要和触发器里面的时间名称保持一致，然后category和action要和3.3步骤配置的一样。这样就完成了

4.电子商务

4.1 google analytics中开启电子商务

4.2 配置gtm的代码

注意跟踪类型要选择交易，触发条件依然是自定义事件，自已创建，我创建的事件名为business

4.3 js代码

paySuccessGtm(orderInfo) {
      let products = []
      for (let item of orderInfo.item) {
        let product = {
          sku: item.skuNo,
          name: item.skuName,
          price: item.sellPrice.toFixed(2),
          quantity: item.skuNum,
        }
        products.push(product)
      }
      this.$gtm.trackEvent({
        event: 'business',
        transactionId: orderInfo.orderNo,
        transactionTotal: orderInfo.payPrice.toFixed(2),
        transactionShipping: orderInfo.shipTotalPrice.toFixed(2),
        transactionProducts: products
      });
    }

this.$gtm.trackEvent()方法就是封装了一下dataLayer数据层，其实直接使用dataLayer.push()方法一样是可以的，dataLayer的用法可以查看gtm的开发者文档。

4.4 查看结果

在google analytics中查看

4.5 实际效果

实际数据其实和想象的并不一致，丢失了很多订单，不太明白是为什么，所以我的触发器换成了网页浏览触发器

5.记录网页浏览

不要写js代码

6.触发器的用法

6.1最常用的网页浏览，事件和电子商务基本上就是这样了，注意我这里讲的基本的电子商务，不是增强型

gtm的触发器其实很强大，可以有多重判断，并不是说只能判断一种条件，像我们上面就只判断了事件名，只要名称相同，就能出发gtm代码，那如果我有多个条件，假如
1.url中含有register2
2.事件名register1
那么触发器可以这么写

6.2

如下图所示，event这个变量是一个内置变量，指的就是自定义变量，所以这个就可以用来判断事件名