巧用Google Analytics和Tag Manager监测滚屏深度

GA强大的功能使得我们可以做到许多它原本不提供的事情，比如接下来要讲的滚屏事件监测。相信许多站长或者网站各部门都想知道，别人来到我页面到底看到什么程度了？我的页面设计为几屏比较好？有多少人看完了我的文章？有多少人看了评论？这对于网站内容或者结构的优化都会有一定的参考作用。下面我向大家介绍一个实现这个功能的方法。 使用工具：Google Analytics&Google Tag manager 主要的操作在于Tag manager（以后简称GTM）中代码和规则的设置（使用GTM的好处在于，只要在页面上加一套代码，后台都由你自己操作，最大程度得减少公司或部门之间的沟通成本）。 一、在GTM容器中添加代码 本次一共会用到三段代码

• GATC  (Google Analytics tracking code)
• jquery.scrolldepth.js
• 函数调用代码

1、GATC直接从GA后台到处即可，但必须是异步代码（现在应该都是异步的了）。 2、第二段jquery是从http://robflaherty.github.com/jquery-scrolldepth/ 找到的代码，感谢这位作者的贡献。对于我们只懂代码皮毛的人来说，这真是莫大的帮助。不过在实际操作中遇到过各种问题，并不像其提到的结果一般。上面链接的代码是我现在使用的，我对它做了部分修改，直到能实现开始说的效果。懂代码或者有兴趣朋友可以仔细看一看，代码不长。 3、第三段代码是在页面中调用上面这段js的代码的，它的触发条件有下面这几个：

1. 必须在GATC触发以后
2. 必须在第二段代码调用以后
3. jquery版本1.7+ 我是怎么实现这些触发规则的呢？这就要用到代码管理器-GTM了，来看一下具体设置吧：

跟踪代码的3部分就是刚才所提到的，下面我们仔细的看一下“

一、 GATC：

;

与正常的GATC不同的是，我在最后加了一句dataLayer.push({‘event’:’scroll1’}); 它的作用是给event这个变量赋值，具体作用下面会讲到

二、 第二段jquery.scrolldepth.js有点长，大家可以自行点开来看，这里不细讲（关键是我也不太懂），需要说明的是我在里面加了两条代码： 1、最前面加入 它的作用是调用这个函数，elements:['#comment']是在我之前的基础上添加了一个类的监测，我的评论框的id（css中的id选择器的值）是comment，用处是当滚动条滑到评论框时触发相应代码。   说完了代码接下来说规则，前面我们说到这几段代码是有相互依存关系的，也就是得按顺序来触发，所以在第一段GATC中我给event赋值为scroll1，作为第二段代码触发的条件，同样第二段代码中我给它赋值为scroll2，作为第三段代码触发的条件，这样一来就能按照我预先设置的顺序触发代码了。这里举一个例子，内容见下图： [](http://jackie.ms/wp-content/uploads/2013/03/2.jpg)   这样一来我们就完成了整个代码的实施过程，接下来看看成果吧： [](http://jackie.ms/wp-content/uploads/2013/03/3.jpg)   滚屏的比例和各种元素（这里是评论框）被查看的比例都一目了然（数据为参考，不用当真）。 做网站分析的朋友，看到这里有没有跃跃欲试的冲动呢，心动不如行动，Just do it！有问题可以给我留言，不过建议先google一下，养成一个好习惯，能自己解决的先自己解决，这样进步会快一点，我自身的体验，希望对你有帮助！