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.记录网页浏览

gtm的代码配置就不说了,最常用的估计也是
不要写js代码

6.触发器的用法

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

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

6.2

如下图所示,event这个变量是一个内置变量,指的就是自定义变量,所以这个就可以用来判断事件名
在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐