PHP项目如何实现热力分析？

本文目录导读：

1. 方案一：自建热力分析系统（全栈实现）
2. 方案二：使用第三方服务（推荐，节省精力）
3. 方案三：纯PHP服务端生成热力图（最适合截图或PDF导出）
4. 性能优化与注意事项

在PHP项目中实现热力分析（Heatmap Analysis），通常有前端采集、后端存储和可视化渲染三个核心环节，由于PHP本身是服务端语言，不直接处理浏览器事件，因此你需要借助JavaScript进行数据采集，然后通过PHP进行数据接收、存储和查询，最后再通过前端库（如Canvas、D3.js）或第三方服务（如百度统计、Hotjar）来渲染热力图。

以下是具体的实现方案：

自建热力分析系统（全栈实现）

适合对数据隐私要求高、需要深度定制的情况。

前端数据采集

在目标页面中嵌入JavaScript代码,监听鼠标的移动、点击或滚动事件，并发送数据到PHP后端。

// 点击热力图采集
document.addEventListener('click', function(e) {
    const data = {
        x: e.clientX,          // 鼠标相对于可视区的X坐标
        y: e.clientY,          // 鼠标相对于可视区的Y坐标
        pageUrl: window.location.href,
        viewportWidth: window.innerWidth,
        viewportHeight: window.innerHeight,
        timestamp: Date.now()
    };
    // 发送到PHP后端（建议使用Beacon或图片追踪减少性能影响）
    navigator.sendBeacon('/api/collect-heatmap.php', JSON.stringify(data));
    // 或者使用传统Ajax
    // fetch('/api/collect-heatmap.php', { method: 'POST', body: JSON.stringify(data) });
});

PHP后端接收与存储

// collect-heatmap.php
header('Content-Type: application/json');
$rawData = file_get_contents('php://input');
$data = json_decode($rawData, true);
if (!$data) {
    http_response_code(400);
    echo json_encode(['error' => 'Invalid data']);
    exit;
}
// 验证和清洗数据（关键安全步骤）
// 只允许数值，拒绝字符串注入
$safeData = [
    'x' => filter_var($data['x'] ?? 0, FILTER_VALIDATE_INT) ?: 0,
    'y' => filter_var($data['y'] ?? 0, FILTER_VALIDATE_INT) ?: 0,
    'page_url' => substr($data['pageUrl'] ?? '', 0, 500),
    'viewport_width' => filter_var($data['viewportWidth'] ?? 1920, FILTER_VALIDATE_INT),
    'viewport_height' => filter_var($data['viewportHeight'] ?? 1080, FILTER_VALIDATE_INT),
    'timestamp' => $data['timestamp'] ?? time()
];
// 选择存储方式（推荐使用Redis或MongoDB，避免高频写入MySQL瓶颈）
// 示例：存入MySQL（需建立索引）
$pdo = new PDO('mysql:host=localhost;dbname=heatmap_db', 'user', 'pass');
$stmt = $pdo->prepare("INSERT INTO heatmap_events (x, y, page_url, viewport_width, viewport_height, created_at) VALUES (?, ?, ?, ?, ?, FROM_UNIXTIME(?))");
$stmt->execute([
    $safeData['x'],
    $safeData['y'],
    $safeData['page_url'],
    $safeData['viewport_width'],
    $safeData['viewport_height'],
    $safeData['timestamp'] / 1000
]);
echo json_encode(['status' => 'ok']);

数据聚合与可视化渲染

热力图是大量坐标点的叠加效果,直接在PHP中计算所有点并生成Canvas图像会更消耗资源，通常采用分层聚合策略：

• 实时层：使用Redis存储最近10分钟的点，直接返回JSON给前端渲染。
• 离线层：定时任务（Cron）将MySQL中的点按网格（例如20x20像素）聚合，存储为预渲染的位图。

前端渲染（使用Heatmap.js）：

// 提供聚合数据接口： get-heatmap-data.php?page_url=xxx
// 从数据库查询该页面的所有事件点，或以网格聚合后的数组
$stmt = $pdo->prepare("SELECT x, y FROM heatmap_events WHERE page_url = ? AND created_at > DATE_SUB(NOW(), INTERVAL 24 HOUR)");
$stmt->execute([$_GET['page_url']]);
$points = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回JSON
header('Content-Type: application/json');
echo json_encode(['max' => 100, 'data' => $points]);

前端Canvas叠加：

<script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script>
<div id="heatmapContainer" style="position:relative;">
    <img src="screenshot.png" style="width:100%;"> <!-- 页面截图作为背景 -->
</div>
<script>
fetch('/get-heatmap-data.php?page_url=<?= urlencode($currentUrl) ?>')
    .then(res => res.json())
    .then(data => {
        var heatmapInstance = h337.create({
            container: document.querySelector('#heatmapContainer'),
            radius: 25,  // 半径
            blur: 0.8
        });
        heatmapInstance.setData({
            max: data.max,
            data: data.data.map(p => ({ x: p.x, y: p.y, value: 1 }))
        });
    });
</script>

使用第三方服务（推荐，节省精力）

对于大多数项目,无需自建，直接集成现成工具更高效：

接入方式通常是添加一段JavaScript追踪代码,无需PHP后端处理。

纯PHP服务端生成热力图（最适合截图或PDF导出）

如果你需要给每个页面截图生成热力图（例如后台报告），可以在PHP中调用GraphicsMagick或Imagick+GD库：

// 生成热力图(示例：利用GD库画点)
$width = 1920;
$height = 1080;
$img = imagecreatetruecolor($width, $height);
$bgColor = imagecolorallocatealpha($img, 255, 255, 255, 127);
imagefill($img, 0, 0, $bgColor);
// 从数据库取出该页面的点击坐标
$points = getClickedPoints('page1'); // 假设返回数组
foreach ($points as $p) {
    $x = $p['x'];
    $y = $p['y'];
    // 绘制一个半透明圆点（热力图实际需要高斯模糊，这里简化）
    $color = imagecolorallocatealpha($img, 255, 0, 0, 80);
    imagefilledellipse($img, $x, $y, 30, 30, $color);
}
// 输出PNG
header('Content-Type: image/png');
imagepng($img);
imagedestroy($img);

性能优化与注意事项

1. 高频写入优化：不要每条点击事件都写MySQL，可以：
   • 按批次合并（每10秒或100条写一次）
   • 使用Redis队列：PHP先推到Redis List，定时任务批量插入数据库。
2. 数据去重：用户快速拖动鼠标会产生海量数据点，考虑在采集端限制频率（如每200ms记录一次）。
3. 坐标归一化：由于用户屏幕分辨率不同，记录时需根据 viewportWidth/Height 转换为相对百分比（0~1），渲染时再按当前屏幕尺寸还原，避免不同分辨率下的偏差。
4. 隐私合规：避免采集包含用户名、密码的输入框点击事件，可在前端通过 e.target 过滤掉 <input type="password"> 等元素。

推荐做法：前期使用Hotjar快速获得用户体验洞察，后期如果有私有化或深度定制需求，再逐步自建，并采用Redis + 定时聚合的架构。