因为很多人再用Google tag manerger的时候要用到事件点击的问题,由于大家网站的不同属性,所以我就简单说一下gtm点击事件的部署问题,也顺便把埋在原本旧网站里的ga追踪码,换成使用google代码管理(GTM)

  要无痛更换其实也很简单,首先来这边建立帐户与容器

  https://tagmanager.google.com

  然后填入原本的追踪代号,将产生的 js code 依照说明,贴到要追踪的网页就可以了

  因为实在太简单,所以就不解释

  因此这一篇要来研究的是如何利用 Google 代码管理来追踪网页上的点击事件

  例如:点击连结、点击按钮 button click…..之类的

  当追踪码从以往的 ga code换成 GTM 的代码之后,事件追踪变得超简单

  而且不需要什么门槛就可让行销人员自行操作

  此篇有简单的目录

  第一步:建立追踪码的变数 (不建也可以,建了比较方便)

  第二步:新增代码

  第三步:新增触发条件

  第四步:预览与发布

  开始前首先看一下GTM工作区左方的主要功能

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

  这篇不想废话太多,所以直接进入该怎么设定

  但在设定之前先做一些事可以让之后设定更轻松简单

  第一步:建立追踪码的变数

  首先来变数设定一下资源编号,这样就不用每设定一次就复制贴上

  首先新增一个变数,选常值

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

  然后把你 GA 的追踪编号新增进去

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

  建立之后就会出现在使用者定义的变数中,以后有需要用到那个字串就可以直接选择变数
Google tag manerger(GTM)入门:点击事件怎么设置

  第二步:新增代码

  看你是要先新增触发条件,还是直接新增代码都可以

  因为反正一个代码至少要一个触发条件,所以早晚都要设定

  此例就直接新增代码,点选下图上方的代码设定

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

  里面可以选择的代码一狗票,选择通用 Analytics(分析)

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

  接下来追踪码编号按下右边的小图示,选择刚刚建立的追踪码变数名称

  当然你要自己输入也可以,但是谁会去记那一串

  然后追踪类型选择 “事件”

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

  上面的类别、动作、标签,请对照一下GA报表里想用来显示的文字

  打开GA行为/ 事件,里面可以看到事件有分类别、动作跟标签,指的就是以上栏位

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

  我自己是这样设定

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

  第三步:新增触发条件

  选择下面的触发条件,我们要建立按下一个超链接的事件

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

  追踪连结,所以请选择 “仅连接”

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

  然后勾选一下等待代码,检查验证就随便

  但如果没勾选等待代码的话,点下去超连结资料不会进到GA

  我觉得可能是太快就转走的关系所以记得打勾

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

  然后验证条件,因为我之前有建立一个变数叫 HostName,这边检查该变数是否是网站的 domain name

  再来比较重要的就是触发条件的启动时机

  GTM好用在不需要让你额外埋code,就可以在后台管理触发的element

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

  以这个例子而言,使用了 CSS选择器,毕竟对开发人员来说比较熟……

  用 CSS 选择器来找到要触发的 DOM Element ,或是可以用其他方式来找到那个DOM Element

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

  但如果你要用 CSS Selector的话,有个更笨的方法可以设定,打开你的chrome 按 F12

  按下选择元素

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

  然后页面上点选该元素,下面就会有 Element被选取

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

  再按滑鼠右键,选择copy/copy selector即可

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

  建立完之后的代码就会长得像这样

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

  第四步:预览与发布

  先预览一下,没问题就发布出去!! 要记得发布!!

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

  当切到预览的时候,开一个新的 tab 浏览一下你的网页,就会发现跑出一个管理工具

  可以点左方的 gtm.click,然后再切换上方到 variables 看看变数的状况

  如果有符合条件会进到GA中的资料,区块就会显示在 Tags Fired On this Page :

  反之没被监控到就会维持在 Tags Not Fired On This Page:

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

  发布之后就可以到 GA的即时报表中看看数据!

  资料马上就进来了

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

 

    版权声明:

     本网站的所有文字、图片资料,未标注转字的均由作者亲自整理创作,如需复制、转载、转贴等方式发布/发表,请以锚链接的方式显示原文出处,请尊重我的劳动成果,侵权必究。本网站转载的文章如有侵权的地方请及时联系本人,核对后会第一时间删除!

阿沐
1625139774@qq.com

One thought on “Google tag manerger(GTM)入门:点击事件怎么设置”

发表评论