GA中事件跟踪代码添加其实这么简单

要想充分利用GA来收集访客与网站互动的数据，事件统计代码几乎是必选项之一。不同于GA后台直接提供的基础代码，其只需要简单地复制粘贴到所有所需的页面上。GA中的事件跟踪代码，得根据实际的需求，将相应的事件跟踪代码添加到页面上去。

本文将介绍下，没有任何代码基础的情况下，如何添加点击类事件的事件跟踪代码。

以下分为两部分，第一部分是不使用Google Tag Manager(GTM)的情况下，如何直接添加点击事件的跟踪代码；第二部分便是使用GTM的情况下，如何添加点击事件的跟踪代码。

一、直接添加

打开需要添加事件跟踪代码的页面，鼠标移动到需要添加监测的位置，右键选择审查元素；（如此便能打开浏览器的开发者工具的窗口）
在打开的窗口中有一块蓝色区域，鼠标移动到蓝色区域正好可以发现其覆盖了刚刚右键点击的那个位置，鼠标移动到蓝色区域右键选择Copy CSS Path；
将上边复制得到的选择器替换以下代码中的“此处粘贴选择器”部分；
修改以下代码中的“事件类别”、“事件动作”、“事件标签”为自己容易区分的值，如修改“事件类别”为“按钮”，“事件动作”为“点击”，“事件标签”为“提交”；
把得到的代码复制粘贴到页面之前；

以下以百度首页为例，在“百度一下”那个按钮上测试。先经过第一步，可以看到如下截图：

初始代码为：

<script>
try {
jQuery(document).ready(function () {
jQuery('此处粘贴选择器').click(function () {
ga('send', 'event', '事件类别', '事件动作', '事件标签');
})
})
} catch (err) {
window.console && console.log(err);
}
</script>

使用第二步可复制得到选择器为#su，经过第3步替换下得到：

<script>
try {
jQuery(document).ready(function () {
jQuery('#su').click(function () {
ga('send', 'event', '事件类别', '事件动作', '事件标签');
})
})
} catch (err) {
window.console && console.log(err);
}
</script>

最后经过第4步，得到如下代码：

<script>
try {
jQuery(document).ready(function () {
jQuery('#su').click(function () {
ga('send', 'event', '按钮', '点击', '百度一下');
})
})
} catch (err) {
window.console && console.log(err);
}
</script>

把得到的这段代码加到页面上去。是否加成功了，我们可以用之前提到过的方法来验证下。

以上方法适用于不是通过GTM来添加GA代码的网站，即直接将GA代码添加到页面的站点。

其优势是操作简单、安全、快速，就算操作过程中出现差错导致代码bug，也不会影响页面上的其他功能，因为使用了try catch。

其局限性就是要求网站上已经使用了jQuery，要想验证网站上是否使用了jQuery，可以使用Chrome上扩展Wappalyzer 查看。若网站上未使用jQuery，只需要在上述代码前多加一行即可引入jQuery：

二、通过GTM添加

如果网站上GA代码是通过GTM添加的，不管要监测的位置是否有唯一元素ID、合适的class，也可以像方法一一样，直接使用CSS选择器。

其添加方法和一般的使用GTM添加事件代码一样，只不过在设置触发规则(Trigger)时，使用一个新建的规则。触发事件选择Click，配置触发器为All Elements，触发时间设置为Click Element match CSS selector #su，如下图所示：

所以，下次当你在GTM中使用事件跟踪代码，但是不知道怎么将代码触发限定在页面某个位置点击时才触发时，不妨使用下match CSS selector，如果担心其他页面上也存在相同的选择器，且在其他页面不能触发该事件代码，可以设置下触发阻止的规则(Exception)。

事件跟踪代码是GA中相对简单的一种，其涉及的字段较少，代码本身也十分精简和优雅。就算是对于一个完全不懂代码的人来说，事件跟踪代码的添加也是很容易学会的。以上所述两种添加事件统计代码的方法，如果有更好的建议或意见，欢迎在评论区留言与我讨论。