因为很多人再用Google tag manerger的时候要用到事件点击的问题,由于大家网站的不同属性,所以我就简单说一下gtm点击事件的部署问题,也顺便把埋在原本旧网站里的ga追踪码,换成使用google代码管理(GTM)
要无痛更换其实也很简单,首先来这边建立帐户与容器
https://tagmanager.google.com
然后填入原本的追踪代号,将产生的 js code 依照说明,贴到要追踪的网页就可以了
因为实在太简单,所以就不解释
因此这一篇要来研究的是如何利用 Google 代码管理来追踪网页上的点击事件
例如:点击连结、点击按钮 button click…..之类的
当追踪码从以往的 ga code换成 GTM 的代码之后,事件追踪变得超简单
而且不需要什么门槛就可让行销人员自行操作
此篇有简单的目录
第一步:建立追踪码的变数 (不建也可以,建了比较方便)
第二步:新增代码
第三步:新增触发条件
第四步:预览与发布
开始前首先看一下GTM工作区左方的主要功能
这篇不想废话太多,所以直接进入该怎么设定
但在设定之前先做一些事可以让之后设定更轻松简单
第一步:建立追踪码的变数
首先来变数设定一下资源编号,这样就不用每设定一次就复制贴上
首先新增一个变数,选常值
然后把你 GA 的追踪编号新增进去
建立之后就会出现在使用者定义的变数中,以后有需要用到那个字串就可以直接选择变数
第二步:新增代码
看你是要先新增触发条件,还是直接新增代码都可以
因为反正一个代码至少要一个触发条件,所以早晚都要设定
此例就直接新增代码,点选下图上方的代码设定
里面可以选择的代码一狗票,选择通用 Analytics(分析)
接下来追踪码编号按下右边的小图示,选择刚刚建立的追踪码变数名称
当然你要自己输入也可以,但是谁会去记那一串
然后追踪类型选择 “事件”
上面的类别、动作、标签,请对照一下GA报表里想用来显示的文字
打开GA行为/ 事件,里面可以看到事件有分类别、动作跟标签,指的就是以上栏位
我自己是这样设定
第三步:新增触发条件
选择下面的触发条件,我们要建立按下一个超链接的事件
追踪连结,所以请选择 “仅连接”
然后勾选一下等待代码,检查验证就随便
但如果没勾选等待代码的话,点下去超连结资料不会进到GA
我觉得可能是太快就转走的关系所以记得打勾
然后验证条件,因为我之前有建立一个变数叫 HostName,这边检查该变数是否是网站的 domain name
再来比较重要的就是触发条件的启动时机
GTM好用在不需要让你额外埋code,就可以在后台管理触发的element
以这个例子而言,使用了 CSS选择器,毕竟对开发人员来说比较熟……
用 CSS 选择器来找到要触发的 DOM Element ,或是可以用其他方式来找到那个DOM Element
但如果你要用 CSS Selector的话,有个更笨的方法可以设定,打开你的chrome 按 F12
按下选择元素
然后页面上点选该元素,下面就会有 Element被选取
再按滑鼠右键,选择copy/copy selector即可
建立完之后的代码就会长得像这样
第四步:预览与发布
先预览一下,没问题就发布出去!! 要记得发布!!
当切到预览的时候,开一个新的 tab 浏览一下你的网页,就会发现跑出一个管理工具
可以点左方的 gtm.click,然后再切换上方到 variables 看看变数的状况
如果有符合条件会进到GA中的资料,区块就会显示在 Tags Fired On this Page :
反之没被监控到就会维持在 Tags Not Fired On This Page:
发布之后就可以到 GA的即时报表中看看数据!
资料马上就进来了
阅读博客获得的进步不亚于阅读一本书。