[译]借助jQuery和Google分析服务的事件追踪深入了解用户行为

作者:

原文:http://briancray.com/?p=1584

【作者简介】Brian Cray 居住在俄亥俄州的哥伦布市，是位于圣弗朗西斯科的Topsy公司的一名前端工程师。

本文主要介绍如何使用谷歌分析的高级事件跟踪能力，深入了解用户如何浏览你的网站、如何与你的网页进行交互。

=========== 以下为译文正文===============

Google分析服务的设置，对于访问者浏览行为和偏好的信息，仅记录和分析了他们的来路和被访问的页面。但这些信息就足够告诉你访问者在网页中的用户行为了吗？不够！这些只是帮助我们分析用户行为的最基础的信息。

我想请你根据你目前的Google分析的设定回答以下问题：

  • 你的用户是通过主菜单还是通过其它方式来查找你站内的内容？
  • 你的用户在查看较长的页面时向下滚动和点击底部的链接吗？
  • 你的用户是点击文章的标题还是点击“查看详情”链接？
  • 你的用户真的会使用下拉菜单里的项目吗？还是根本没注意到下拉菜单？
  • 你的用户接受你建议的的相关文章吗？

b01

现在让我来帮助你回答其中的一部分问题

借助Google分析服务的，可以跟踪在你网页上发生的任意事件——包括用户的行为。

在开始之前，有两个重要步骤需要先做：

  • 把你的Google分析的跟踪代码改为异步跟踪的代码。
  • 把jQuery代码移到页面的标签里（我知道，这是违背优化标准的，但是如果你使用良好的缓存技术的话，后面的数据回报是绝对值得你这样做的）。

代码

把以下代码添加到你的网页的标签中或者你当前的jQuery代码中（只有该代码在标签中时才可以）。

$(function () {
    $('a').click(function () {
    // 通知分析服务存储事件
        try {
            _gaq.push(['_trackEvent', thisel.parents('[id!=""]:first').get(0).id, 'clicked', (thisel.text() || thisel.children('img:first').attr('alt'))]);
        }
        catch (err) { }

        // pause to allow google script to run
        var date = new Date();
        var curDate = null;
        do {
            curDate = new Date();
        } while (curDate - date < 300);
    });
});

添加代码后对事件按分类查看的截图

在添加以上的代码后，可以看到网站的那些部分被点击得最多（基于元素的id属性或者父元素）。

b02

添加代码后对事件按标签查看的截图

在添加以上的代码后，从左边的下拉菜单中选择某一个事件分类，可以看到被点击过的链接的标题，例如下图中能够看到的菜单项中的链接文字。

b03

通过事件追踪获得有关用户行为分析的更多信息

前面所讲的，只是对这个强大技术的一点点入门介绍。借助用户行为分析方面的知识和恰当的jQuery技术，你还能以更丰富、更深入的方式使用它。例如：

  • 追踪用户的表单行为和鼠标行为。
  • 追踪用户的操作和操作之间的时间。
  • 改变设计，然后观察这些改变如何影响用户的行为（类似于A/B测试）。

Fabian Pimminge 已经在 MooTools 上重写了这些代码，如果你使用的是 MoonTools 框架，可以参考。