[译]借助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 框架,可以参考