# 热图分析

热图分析模型能够用热谱图直观呈现用户在网站、H5页面、APP上的点击、滚动行为，帮助产品、运营人员了解用户的点击偏好，辅助做页面设计优化、内容调整等。

## 常见热图类型和使用场景

| 热图类型   | 示例                                                                                                                        | 使用场景                                                                                                                                                            |
| ------ | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 点击位置热图 | ![image](https://imguserradar.analysys.cn/fangzhou/img/2019/04/201904171402052004.png)                                    | <p>展示用户在网站上所有点击的位置，聚集的点击越多，颜色越亮。</p><p>通常用于分析着陆页 </p><p>1 是否点击了CTA的内容？</p><p>2 是否有被大量点击的重要按钮或元素被放到了很少有用户到达的地方？</p><p>3 是否有用户点击的图片或文字其实没有链接？e.g.产品特征，icon+文字</p> |
| 点击元素热图 | ![image](https://imguserradar.analysys.cn/fangzhou/img/2019/04/201904171402052731.png)                                    | <p>展示可交互元素的点击情况。</p><p>用于分析：</p><p>1 具体是哪些元素吸引了多少点击？占据了整页点击多少比例？</p><p>2 是否有不符合我们预期的失误诱导？</p><p>(需 JS SDK > 4.3.1)</p>                                          |
| 浏览深度线  | ![image](https://imguserradar.analysys.cn/fangzhou/img/2019/04/201904171402040221.png)                                    | <p>展示用户抵达某个区域的留存比例。百分比越低，越少用户能够看到这一位置。</p><p>通常用于</p><p>1 寻找CTA的最佳位置</p><p>2 内容营销转换监测e.g.数据骤降时，说明哪里出现了内容上的断裂，用户没有兴趣再看下去</p>                                     |
| 注意力热图  | <img src="https://imguserradar.analysys.cn/fangzhou/img/2019/04/201904171411256839.png" alt="image" data-size="original"> | <p>展示用户在某个区域停留的时长，停留的时间越长，该区域颜色越亮</p><p>通常用于分析</p><p>1 了解到网页哪些内容吸引访客，哪些内容认为重要却被用户忽略？</p><p>2 是否有被用户仔细阅读的内容放到了过于靠下的位置？</p>                                       |

不同类型的热图各有优缺点，比如，点击位置热图，劣势是上报的数据量会增加，但可以非常直观的定性分析用户的探索性需求，发现非交互元素上意料之外的大量点击；点击元素热图，过滤掉了部分不可点击的内容，对可点击元素可以集中定量分析，但就会不够直观。

在不同场景下选择适合的类型，目前方舟已经支持了 Web 端的点击位置热图、点击元素热图、浏览深度线，APP 端的点击位置热图和点击元素热图。

## Web/H5 热图

支持网站、H5 页面的点击位置热图、点击元素热图和浏览深度线， 支持两种查看方式：

* 嵌入式——在方舟产品中查看页面热图，可切换不同的平台
* 交互式——在原网站页面查看

{% content-ref url="/pages/-Ld3bGKKDsABVPbb3iCz" %}
[Web/H5 热图](/features/analytics/heatmap/web.md)
{% endcontent-ref %}

## APP 热图

目前支持原生应用的点击位置热图和点击元素热图。

{% content-ref url="/pages/-Ld3bKftoNnEqsx-wRRM" %}
[APP 热图](/features/analytics/heatmap/app.md)
{% endcontent-ref %}

{% hint style="info" %}
以上内容没有解答我的问题？[点击我来反馈](https://support.qq.com/products/118522/) 🚀
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://arkdocs.analysys.cn/features/analytics/heatmap.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.