裁纸刀下 » jquery

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

小李刀刀 — Mon, 25 Oct 2010 12:09:41 +0000

作者:Brian Cray

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

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

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

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

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

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

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

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

借助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属性或者父元素）。

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

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

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

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

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

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

VS2008 中 JS IntelliSense出错的解决

小李刀刀 — Thu, 30 Apr 2009 18:55:01 +0000

JScript 智能提示(IntelliSense)是 Visual Studio 2008 的一个重要新特性，尤其是现在 Visual Studio 2008 还提供了 jQuery 智能提示的官方支持。遗憾的是在实际应用中经常遇到如图所示的错误提示，并且出现这样的错误以后，包括jQuery在内的智能提示统统失效。非常让人恼火。我最开始的时候仅从提示“Error updating JScript IntelliSense”猜测以为是VS把智能提示缓存起来，然后缓存文件出错。后来尝试过很多方式都无法解决。

后来偶然看到 jeffrey 写的日志，才知道原来是由于加载的额外js文件缺乏智能提示文件（vsdoc.js）导致的。

jeffrey 有一个非常简单易行的解决建议，就是创建一个和出错文件对应的 –vsdoc.js 文件放到该文件相同的目录下。比如 ASP.NET MVC 里默认就为jQuery.min.js 提供一个 jQuery.min-vsdoc.js 文件，同样的道理，如果我们在 Scripts 目录下有一个 myScript.js 文件，那么我们只需要创建一个空的 myScript-vsdoc.js 文件放到 Scripts 目录下，就可以避免因为加载 myScript.js 文件导致的 JS 智能提示失效问题。

当然了，这只是权益之计，不过很有效，因为我们在编写js的时候，增加的js文件往往是自己写的脚本，也就无所谓有没有智能提示了，如果你真的需要智能提示，那么不妨写一个。

由这个问题引发出来一个问题，就是对于在网上发布共享JS库的人，是不是应该考虑完善你的作品，提供对应的 -vsdoc.js 文件呢？

简单、通用的JQuery Tab实现

小李刀刀 — Mon, 13 Apr 2009 03:35:34 +0000

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

最早的滑动门的技术，一般都是结合 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个标签。比如：

function showTabs(n) {
  var tabsNumber = 3;
  for (i = 0; i < tabsNumber; i++) {
      if (i == n) {
          document.getElementById("tabPanel-" + i).style.display = "block";
      } else {
          document.getElementById("tabPanel-" + i).style.display = "none";
      }
  }
}

加入有这样的一个函数，就可以在tab的标题按钮中设置 onclick = “showTabs(1)”来设置第二块内容显示，而其它块隐藏。

这种方式最大的缺点是：

HTML代码和JS代码混合；
可扩展性差；

尽管可以通过window.onload绑定事件等方式来是实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。但是总的来说，还是很难做到一处定义到处引用。

后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQuery UI中的tabs插件。一旦加载了jQuery框架和jQuery UI插件，那么要在页面中实现Tabs，就变得简单了许多。首先我们的页面中的Tabs代码这样写：

<div class="tabs">
    <ul>
        <li><a href="#panel-1">标签一a>li>
        <li><a href="#panel-2">标签二a>li>
    ul>
    <div id="panel-1">区域一div>
    <div id="panel-2">区域二div>
div>

注意：这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。然后，在head区域，或者在页面任何地方增加一段js代码：

$(function() {
    $(".tabs").tabs();
});

就实现了Tabs功能，这行JS代码执行后，上面的HTML代码就会变成：

<div class="tabs">
    <ul class="ui-tabs-nav" jquery1239647486215="2">
        <li class="ui-tabs-selected"><a href="#panel-1" jquery1239647486215="8">标签一a>li>
        <li><a href="#panel-2" jquery1239647486215="9">标签二a>li>
        >ul>
    <div id="panel-1" class="ui-tabs-panel" jquery1239647486215="4">
        区域一
    div>
    <div id="panel-2" class="ui-tabs-panel ui-tabs-hide" jquery1239647486215="5">
        区域二
    div>
div>

结合我们自己编写的css，或者jQuery UI 自带的CSS，就可以实现滑动门效果。并且，由于jQuery的强大，我们可以在页面中放置多组滑动门，然后一次性设定。

要说明的是，这个地方由于只启用了jQuery UI 中的 Tabs 插件，因此生成的代码还是比较干净的，只增加了 ui-tabs-xxxx 这几个相关的css类。如果你同时包含了jQuery UI的其它插件，那么即使不启用，也会添加一堆的css定义。而且，jQuery UI Tabs 还提供了非常强大的控制功能，你可以动态地添加 tab，可以随意更改激活事件，可以定义切换效果，还可以设置默认激活状态和禁用等。

但是我在实际应用中遇到了一些问题，除了 jQuery UI 自带的js脚本很大，css不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，每个标签对应哪一个区域是用链接目标来定义的。比如标签一和

区域一

对应，如果你的标签和区域没有对应起来，绑定tabs()就不起作用了。

而且，这种方式来带来另一个麻烦，就是当我们需要给标签加上链接的时候，没办法加。即使你将标签的激活事件设置为onmouseover而不是onclick，链接也不能实现，因为链接用于指定目标了。这种需求在我们的实际应用中并不是不存在的。比如：

这两个图片中的tabs标签，都要添加到对应的新闻类别或者论坛板块的链接。这时候 jQuery UI的默认绑定就带来了麻烦。

其实分析一下，我们在实现滑动门的时候，用以下HTML结构就可以满足需要：

<div class="tabs">
    <ul>
        <li>标签一li>
        <li>标签二li>
    ul>
    <div>区域一div>
    <div>区域二div>
div>

借助 jQuery 库，我们可以通过 $(“.tabs”)找到要实现的标签，然后 .find(“li”) 来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在$(“.tabs li”)集合中的索引值来明确是哪一个标签被激活，然后对应索引值的panel显示。代码类似这样：

<script type="text/javascript">
    $(function() {
        $(".tabs").find("li").onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().children("li");
                var panels = $(this).parent().parent().children("div");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

这段代码只使用了两个css类来处理，并且，自动判断tabs和panels的对应状态，假如你有4个tab，但是只有前三个启用了，那么你只需要写三个panel就可以，第四个panel不存在，则第四个tab自动不生效。

在实际使用中，会遇到一个问题，一般我们会给tab中的文字加链接，那么当鼠标滑过这个tab的时候，如果指到了文字，那么激发事件的对象有可能是a元素而不是li元素，则事件就不能正确激发。所以我们改进代码如下：

<script type="text/javascript">
    $(function() {
        $(".ui-tabs-nav > li > a")onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().parent().children("li");
                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

与此对应的HTML结构是：

<div>
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-selected"><a href="/bbs">论坛新帖a>li>
        <li><a href="/blog">最新博文a>li>
    ul>
    <div class="ui-tabs-panel">
      
    div>
    <div class="ui-tabs-panel ui-tabs-hide">
      
    div>
div>

同时，我们有以下的css类定义：

.ui-tabs-nav
{
    /*导航容器定义*/
}
.ui-tabs-nav li
{
    /*默认标签样式*/
}
.ui-tabs-nav li.ui-tabs-selected
{
    /*激活的标签样式*/
}
.ui-tabs-panel
{
    /*默认的显示区域样式*/
}
.ui-tabs-hide
{
    display: none;
}

这样，就可以根据你的需要，结合自己的css，定制不同样式的滑动门了。把相应的js代码放到页面中，那么在页面里任何地方只要你按照HTML结构编写了一段html，这段html就会自动变成滑动门。而不用在每个页面里单独指定特定的selector来应用滑动门的tabs()方法。并且，根据需要给你的滑动门标签添加需要的链接，或者不要链接（href=”#” 或者 href=”javascript:void(0)”）。

这段滑动门代码只要具有jQuery core 就可以正常运行，不需要加载jQuery UI。非常简单，而且很通用，样式上喜欢怎么扩展都可以。

具体效果可以参见 http:/www.taihainet.com ，在台海网首页中，我一共应用了四个样式共九组滑动门，代码就只是上面给出的那一段。四个样式列举如下：

滑动门一：多个搜索表单，暂时只实现两个，后面三个由于没有对应的ui-tabs-panel，自动禁用，但是链接可以点击。

滑动门二：多块商务信息区域，其中第三个由于没有对应的ui-tabs-panel，自动禁用。

滑动门三：新闻栏目切换，标签中的文字链接到对应的新闻栏目。

滑动门四：论坛分板块帖子调用。标签中的文字链接到对应的论坛板块。

裁纸刀下 » jquery

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

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

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

代码

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

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

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

相关日志

VS2008 中 JS IntelliSense出错的解决

相关日志

简单、通用的JQuery Tab实现

相关日志