Google tag manerger(GTM)入门：点击事件怎么设置

　　因为很多人再用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的即时报表中看看数据!

　　资料马上就进来了