跟踪点击，使用 PHP 和 jQuery 构建点击热图

这个演示和文章最初由 Jay Salvat 创建，可以在此处查看法语版本。感谢 Jay！

计划

记录鼠标指针在网页上点击时的 X 和 Y 坐标。
将这些坐标保存到数据库。
当被调用时，在网页上显示一个“点击热图”，以视觉方式显示这些点击的位置。

为什么？

因为它是一个很酷的概念验证。您应该在生产环境中使用它并以此为基础做出重大设计决策吗？也许不，但我可以看到它在某些情况下用作检查用户行为的工具。

查看演示下载文件

技术

该网站将使用 PHP 构建。我们需要 PHP 有几个原因。最重要的是我们需要一个服务器端语言来处理数据库的保存和检索。此外，我们将把数据库交互抽象到一个单独的文件中，以保持代码整洁。PHP 使我们能够在这些文件之间来回发布变量。

我们将使用 jQuery 类型的 JavaScript 来跟踪鼠标点击并将点击数据发布到执行数据库保存的 PHP 文件。jQuery 还将帮助我们显示覆盖层并放置我们将用来显示点击位置的小图形。

构建数据库

我们的代码不会自动创建您需要的表格，您需要自己创建一个数据库和结构。以下是 SQL

CREATE TABLE  `clickmap` ( 
  `id` int(10) unsigned NOT NULL auto_increment, 
  `x` smallint(4) unsigned NOT NULL, 
  `y` smallint(4) unsigned NOT NULL, 
  `location` varchar(255) NOT NULL, 
  PRIMARY KEY  (`id`), 
  KEY `location` (`location`) 
)

为了演示，我们尽可能地简化了操作。如果您想扩展这个想法，您可能还想为此表添加更多信息，例如 IP 地址和日期/时间，这样您就可以为每个点击获得更详细的信息。

标记（正在跟踪的页面）

这里只是一些我们用来工作的结构。我们将链接到一个 CSS 文件，加载 jQuery，链接到我们自己设计的 JavaScript 文件，以及在这里设置一个编写 JavaScript 的地方，并在页面中添加一些内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Click Map Demo</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="//www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.js">
    <script type="text/javascript" src="js/clickmap.js"></script>
    <script type="text/javascript">
        $(function() {
            // do stuff
        });
    </script>
</head>
<body>
    <img src="images/baywatch.jpg" alt="baywatch" />
    <p class="button displayClicks"><a href="#demo">Display Click Map</a></p>
</body>
</html>

那里没有太多内容，只是一张海滩救护队的照片和一个简单的按钮。

jQuery JavaScript

JavaScript 将为我们做两件主要事情：保存点击和显示点击。

保存点击

为了提高效率，我们将抽象成两个不同的函数，我们可以随时调用它们。一个是用于开始保存点击，另一个是用于停止保存点击。

(function($) { 

$.fn.saveClicks = function() { 
    $(this).bind('mousedown.clickmap', function(evt) { 
        $.post('/examples/ClickMap/clickmap.php', {  
            x:evt.pageX,  
            y:evt.pageY,  
            l:escape(document.location.pathname) 
        }); 
    }); 
}; 
 
$.fn.stopSaveClicks = function() { 
     $(this).unbind('mousedown.clickmap'); 
};

})(jQuery);

我们将 mousedown 事件绑定到它被调用的元素（它将是整个文档），然后使用 jQuery 的 post 函数将一些数据（坐标）发送到一个特殊的文件（clickmap.php）。真的很棒，人们永远不会知道，但每次点击都会将数据发送回服务器。

显示点击

同样，两个函数。一个是负责创建覆盖层并显示点击图形（PHP 发送所有数据，但 jQuery 做附加操作）。另一个则删除所有内容。我们使用的是 jQuery get 函数。

$.displayClicks = function(settings) { 
    $('<div id="clickmap-overlay"></div>').appendTo('body'); 
    $('<div id="clickmap-loading"></div>').appendTo('body'); 
    $.get('/examples/ClickMap/clickmap.php', { l:escape( document.location.pathname) },  
        function(htmlContentFromServer) { 
            $(htmlContentFromServer).appendTo('body');     
            $('#clickmap-loading').remove(); 
        } 
    ); 
}; 
 
$.removeClicks = function() { 
    $('#clickmap-overlay').remove(); 
    $('#clickmap-container').remove(); 
};

启动所有内容

我们将在页面上包含一些 JavaScript 来启动所有内容。

<script type="text/javascript">
    $(function() {
        $(document).saveClicks(); 
    
        $('.displayClicks').click(function() {
            $.displayClicks();
            $('#clickmap-overlay').click(function() {
                 $.removeClicks();
                 $(document).saveClicks();
            });
            $(document).stopSaveClicks();
            return false;
        });
    });
</script>

PHP

现在，我们看到了 POST 和 GET 来自我们尚未看到的 PHP 文件的代码。这种神奇的操作发生在一个名为clickmap.php的文件中。无论哪种情况，我们都需要连接到数据库，然后关闭该连接。其余部分取决于我们是在 POST 还是 GET。

<?php 
    $DB = mysql_connect("localhost", "db_user", "db_password"); 
    mysql_select_db("db_name", $DB);     
    
    if (isset($_POST['l'])) { 
        $query = sprintf("  INSERT INTO clickmap  
                            SET x = '%s', y = '%s', location = '%s'",  
                            $_POST['x'], $_POST['y'], $_POST['l']);        
        $result = mysql_query($query);
    };
        
    if (isset($_GET['l'])) { 
        $query = sprintf("  SELECT x, y FROM clickmap  
                            WHERE location = '%s' 
                            ORDER BY id DESC
                            limit 200",  
                            $_GET['l']); 
        $results = mysql_query($query); 
             
        $html = '<div id="clickmap-container">'; 
        while ($row = mysql_fetch_array($results)) { 
        $html .= sprintf('<div style="left:%spx;top:%spx"></div>', $row['x'] - 10, $row['y'] - 10); 
    } 
        $html .= '</div>'; 
         
        echo $html; 
    };  
   
    mysql_close($DB); 
?>

相当直接……当 POST 时，将数据保存到数据库。当 GET 时，检索数据。在这个演示中，我们只获取了最近的 200 个点击，但您可以根据需要更改或删除此限制。在这里，您可以看到覆盖层出现时每个点击图形如何定位自身。点击产生时保存的确切坐标数据用于设置 CSS 的“top”和“left”值。

CSS

实际的点击热图内容在样式方面不需要太多。只有覆盖层本身、一个加载区域（如果获取所有点击数据需要一段时间）以及点击本身的小图形。

#clickmap-overlay { 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%;  
    background-color:#000; 
    filter:alpha(opacity=70); opacity: 0.7; 
} 

#clickmap-loading { 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%;  
    background:transparent url(images/loading.gif) no-repeat center center; 
} 

#clickmap-container div { 
    position:absolute; 
    width:20px; height:20px; 
    background:transparent url(images/click.png) no-repeat center center; 
}

综合

我知道有时阅读所有代码示例可能会让人觉得很头疼和困惑。与往常一样，欢迎您下载代码并查看所有内容的上下文，这样会更容易理解。再次特别感谢 Jay Salvat 为这个想法的最初创作做出的贡献。Jay 是一位 35 岁的网页开发人员，住在法国里维埃拉，是 Kuantic 的首席开发人员。他是非常酷的 markItUp! jQuery 富文本编辑器和新项目 Sunday Morning（即将推出）的创建者。

查看演示下载文件

Chris Gedrim

# 2009 年 1 月 20 日

这是一个不错的脚本，即使您将其应用于点击热图以外的东西。我可以看到它在电子商务网站上实现，以跟踪商品在哪个页面上销售得最好（例如，一个网站的“今日特价商品”页面是否会吸引更多对商品的关注？）。

感谢 Chris 和 Jay！

trice22

评论永久链接# 2009年1月20日

在你的情况下，你不需要鼠标坐标，可以直接使用产品 ID 作为标识符。
另一方面，Chris 的示例明确地使用了光标相对于视窗的位置，但不太关心屏幕当前显示的内容（产品详情、海滩救护队图片等）。
—trice
Jason

评论永久链接# 2009年1月21日

我明白你的意思，也理解了“那些新手”关于 Google Analytics 的评论。但为了扩展 trice22 的想法，也许你可以设置它来查看某个特定产品在画廊的第一个位置或画廊的右侧销售情况是否更好。
Chris Gedrim

评论永久链接# 2009年1月21日

首先，是的，我听说过 Google Analytics。

其次，我头脑中非常清楚我的意思，只是它没有很好地传达给评论！

我在想大型超市用来向你出售更多商品的方法；他们会改变产品在商店中的位置，并跟踪每个位置的销量。然后用不同类型的产品重复这个过程（先是一般商品，然后是电器，然后是冷冻食品等）。

这使他们能够获得理想的商店销售布局，某些产品类型的销售热点。

希望这更清楚一点…
那些新手

评论永久链接# 2009年1月20日

听说过 Google Analytics 吗？

Les Adams

# 2009年1月20日

真聪明，非常聪明，谢谢 Chris！

Sven

# 2009年1月20日

我曾经测试过一个使用此功能来跟踪页面本身点击次数的点击计数器。它会在页面上创建一个带有“热图”的覆盖层，显示访客在每个页面上点击最多的地方。这是一个非常棒的想法，因为它可以显示网站上主要的兴趣区域。
我想，上面的代码可以很容易地修改，使用不同的颜色来表示不同的点击频率。

Les Adams

# 2009年1月20日

谢谢 Jay，我道歉！

Aditya

# 2009年1月20日

非常感谢这个教程，它很棒，就像 CSS Tricks 上的任何其他内容一样：)

Aditya

评论永久链接# 2009年1月20日

非常感谢 *，我的意思是，抱歉打错了字。

Brenelz

# 2009年1月20日

一如既往地非常有用。一个小巧的功能…

Chris Brame

# 2009年1月20日

很棒的东西！

Bogdan Pop

# 2009年1月20日

你可以把它做成一个插件，跟踪用户在网站的每个元素上点击的位置和时间。这将是一个非常强大的营销和开发工具。

谁知道用户在哪些地方点击，期望得到一些回报，但实际上那只是一个简单的图片，而不是一个花哨的按钮。

JMS

# 2009年1月20日

非常酷… 我下次有机会一定会试试。

James

# 2009年1月20日

有趣，有点像 CrazyEgg…

唯一的问题是它依赖于事件传播。

Fitzgerald Steele

评论永久链接# 2009年1月22日

我不明白... 这是个问题吗？

Gary Storey

# 2009年1月20日

不错！下次做可用性测试时我会试一下。

Derek

# 2009年1月20日

关于如何在页面上映射用户活动的精彩介绍。你昨天在 Twitter 上提到的好教程不是在开玩笑。

Toby

# 2009年1月20日

快跑，雅丝敏，快跑！这真的太酷了，Chris！

Amber Wallace

# 2009年1月20日

非常感谢这个 - 它很棒。它似乎使用了与 Google Analytics 网站覆盖功能类似的原理，尽管该功能是对可点击链接的直接响应，而这可能不是。从 UI 设计的角度和营销的角度来看，了解人们在哪里点击以及哪些有效非常有用。

Guiltouf

# 2009年1月20日

跟踪网站有效区域的必备工具！
非常感谢 Jay，我刚刚使用大的 z-index 修改了 CSS，并在 SQL 请求中添加了 mysql_escape_string（SQL 注入）。

脚本正在我的网站上使用，我明天会看看结果：)

kwatery Zakopane

# 2009年1月20日

很酷，但是…
LabsMedia ClickHeat 更好：)

Timothy

# 2009年1月21日

还不错。可惜我不使用 jQuery…

DON

# 2009年1月21日

这是一个非常好的脚本，从结果中可以获得的信息肯定有助于确定项目的最佳位置。

总的来说，这将为你提供一个更清晰的关于下一步行动方向的过程。通常情况下，这是一个反复尝试和测试的过程，以确定访客交互的最佳区域。

这个脚本的插件形式会很棒。

我正在考虑将我的网站 PHP-Learn-It 转换成 WordPress，并且希望插件能够轻松使用。

Lyndsy Simon

# 2009年1月21日

我实际上已经构建了一些非常类似的东西，并计划为 CMS Made Simple 构建一个模块——然后我遇到了一个问题。

如何处理宽度可变的网站？居中对齐是可以做到的，因为你可以找到包含元素的位置，并在 JS 中对其进行处理——但是对于宽度可变... 我想你可以将信息存储为左侧的百分比，而不是像素值？

/me 赶紧去试试这个。

Benjamin Flesch

# 2009年1月22日

Tadaaaa 这就是你创建 SQL 注入漏洞，而我则因发现它而获得报酬的地方 ;-)

谢谢！

Anup

# 2009年1月23日

不错的文章——我想补充一点，如果你只捕获 x y 坐标，那么你可能需要记录用户的字体大小、屏幕尺寸、浏览器详细信息，因为如果你正在覆盖，你可能正在以与用户不同的配置进行查看。（我认为 DPI 等操作系统的差异也会产生影响。）不过这是一个好主意。

Bcai

# 2009年1月23日

将每个鼠标点击都记录到数据库中会对数据库服务器造成巨大的性能影响，对于大型应用程序来说并不实际。不过，这仍然是一个非常好的脚本。

Jerry Ford

# 2009年2月1日

这是一个很棒的概念。我想知道它对普通网站管理员来说有多有用？作为一个 PHP 新手，我发现我最擅长使用备忘单。因为我总是随身携带 iPhone，所以我把它们放在那里。到目前为止，我找到的最好的备忘单来自这些家伙

http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=302760278&mt=8

他们还提供了关于 jQuery 和 Javascript 的优秀备忘单。希望这对你有所帮助。

Sandy

# 2009年2月4日

这简直太棒了！！！很棒的工作。

Staxx

# 2009年2月10日

很棒的教程。我正在将其中一部分移植到一个 WordPress 插件中。我遇到了一个问题。大多数网站都居中对齐。在这种情况下，左侧的 x 坐标不准确，因为屏幕和屏幕尺寸都是居中的。

我做了一些修改。现在屏幕尺寸被报告到数据库中，但我仍然卡在计算上，无法准确地放置点。有人能给出一些建议吗？

Poulsen

评论永久链接# 2009年3月20日

你找到解决方案了吗？我也有同样的精度问题，但不知道如何解决。

Andy

# 2009年2月11日

很棒的教程！谢谢。

由于我对 jQuery 和 JavaScript 并不熟悉，我想知道是否有人可以推荐一些教程，让我学习如何修改保存的值。我想保存一个时间戳和其他一些隐藏在 x 和 y 旁边的输入标签中的网站数据。

$.post(‘/examples/ClickMap/clickmap.php’,
{
x:evt.pageX,
y:evt.pageY,
l:escape(document.location.pathname)
});

有人知道类似的教程吗？
提前感谢

Jay Salvat

永久链接到评论# 2009 年 2 月 14 日

嗨，Andy，

只需在 ajax 查询中添加一些属性

$.post(’/examples/ClickMap/clickmap.php’,
{
x:evt.pageX,
y:evt.pageY,
someExtraInfoHere:$(‘#myHiddenInput’).val(),
l:escape(document.location.pathname)
});

对于时间戳，只需在 mysql 插入查询中添加一个 'myDateField = NOW()'。当然，还需要在 mysql 表中添加字段。

Andy

# 2009 年 2 月 11 日

抱歉再次打扰你，但我找到一个可以帮助我的教程。

alex13

# 2009 年 2 月 14 日

这个点击地图很棒，但我似乎无法在我的服务器上运行它。当我点击“显示点击地图”时，加载图标一直在转！我已经创建了 mysql 数据库和表格，但它仍然无法运行。有人知道如何解决这个问题吗？

Jay Salvat

永久链接到评论# 2009 年 2 月 14 日

嗨，Alex，

别忘了修改 .js 文件中的 /examples/ClickMap/ 路径？ :)

Jay

Jay Salvat

# 2009 年 3 月 4 日

嗨！

对于那些对这篇文章的最初想法感兴趣的人，我刚刚在 Github 项目中添加了这个项目，并进行了许多改进。

http://github.com/jaysalvat/clicktracker/

sharayu

# 2014 年 1 月 4 日

我想知道你在超链接标签中提到的“#demo”这个 id 在哪里？

313NA

# 2014 年 3 月 17 日

太棒了！这正是我要找的。不过，我很好奇，是否有办法在数据库中显示 **所有用户的鼠标位置** 以及用户的点击事件？有什么建议吗？想法？谢谢！

该评论线程已关闭。如果您有重要的信息需要分享，请联系我们。