1. 影片版講解

網頁熱力分析講解影片

2. 登入網頁熱力分析概述

網頁熱力分析主要用來分析用戶在網頁上的點擊、觸達深度等情況，並以直觀的效果呈現給使用者。 關於點擊圖分析的應用，可參考：如何運用點擊分析優化產品體驗

3. 網頁熱力分析功能簡介

3.1. 原始頁面

對這個頁面的說明如下，對於點擊圖：

  1. 顯示內容：分為原始頁面和頁面組兩類。原始頁面是用來分析單個頁面的點擊情況，而頁面組則用來分析一系列界面結構相似的網頁整體的瀏覽和點擊情況（例如京東的商品詳情頁，可以整體作為一個頁面組來進行分析）。
  2. 事件篩選條件：與神策分析所有其它分析功能一樣，網頁熱力分析也可以根據事件的屬性進行篩選，只看符合篩選條件的事件，需要說明的是，點擊分析的篩選條件是事件 Web元素點擊 和 Web瀏覽 的公共屬性。
  3. 用戶符合：神策分析所有其它分析功能一樣，網頁熱力分析也可以按照用戶屬性來做篩選。
  4. 選擇事件Web元素點擊的發生時間，只分析這個時間內的用戶點擊情況。
  5. 這塊區域預設是按照頁面瀏覽量來排序的，也可以按照瀏覽用戶數和元素點擊次數來進行排序。頁面名指的是我們採集到的頁面標題。
  6. 瀏覽量，這個頁面的瀏覽 PV，也即事件 Web瀏覽頁面 的總次數。
  7. 用戶數，這個頁面的上各個交互元素的點擊 UV，也即事件Web元素點擊 的觸發用戶數。
  8. 點擊次數，這個頁面上各個交互元素的被點擊次數，也即事件 Web元素點擊 的總次數。

3.2. 頁面組

對這個頁面的說明如下：

  1. 給頁面組定義一個名稱。
  2. 背景頁面，指定一個具體的頁面地址，作為點擊圖呈現的模版頁面。
  3. 選擇要增加的頁面地址，可以使用包含和正則來匹配。
  4. 可以選擇多個篩選條件。
  5. 保存這個頁面組。

4. 點擊圖使用說明

這裡以神策官網作為模版頁面（點擊數據是模擬的），來介紹點擊分析功能的具體使用：

  1. 表示被點擊過的交互元素，這裡顯示的 0.81% 是點擊率。滑鼠懸浮上這些被點擊過的按鈕上時，會顯示點擊詳情訊息框。而如果滑鼠點擊這個交互元素，則會按照原頁面的邏輯進行相應的交互；
  2. 當前元素內容，指這個交互元素裡面的文本內容；
  3. 點擊次數，這個按鈕點擊了多少次；
  4. 點擊率，這個元素的點擊次數／整個頁面的瀏覽次數（PV）；
  5. 點擊佔比，這個元素點擊次數／整個頁面內所有可見元素的總點擊次數；
  6. 歷史內容，表示取這個按鈕歷史最常出現的值。例如如果是新聞的話，頭條位置的新聞每天是不同的；
  7. 點擊用戶列表，查看點擊過這個按鈕的具體用戶是哪些人；
  8. 在新窗口打開，直接在原始頁面裡展示點擊圖，這種方式看數據更加自然；
  9. 下拉切換點擊圖和觸達率圖；
  10. 點擊率對應的圖例；
  11. 更新當前頁面的數據；
  12. 收起工具欄。

5. 點擊圖不同版本切換（1.12.1以上版本支援）

5.1. (一)兩版點擊圖區別

5.1.1. 第一版點擊圖

在點擊元素本身上進行樣式修改，透過增加after和before的偽元素來給元素增加樣式，並且會將所有a標籤變為inline-block的樣式。

如果頁面上的點擊元素本來就設置了after和before的樣式，可能會產生樣式衝突的問題，導致頁面上的某些元素沒有點擊圖，或者頁面結構發生變化。

5.1.2. 第二版點擊圖

根據點擊元素在螢幕上的相對位置在頁面最頂層產生一層點擊圖，每次滾動滾動條，或者改變頁面大小時會重新渲染點擊圖。

第二版點擊圖不會修改點擊元素原本的樣式，可以有效避免樣式衝突的問題。

第二版點擊圖不會渲染隱藏的元素，但對於某些透過父元素overflow:hidden等方式來隱藏的元素，無法判斷是隱藏的還是顯示的，也會將其渲染出來。

5.2. (二)切換點擊圖方法

1.透過左上角的第一版/第二版按鈕進行切換

2.透過鍵盤上的快捷鍵進行切換

'z'鍵：第一版點擊圖

'x'鍵：第二版點擊圖

5.3. 更新點擊圖方法

第二版點擊圖根據螢幕的相對位置進行點擊元素的渲染，所以每次滾動滾動條和更改窗口大小都會重新渲染點擊圖。修改渲染的延時可以參考 JS SDK 文件的相關參數 renderRefreshTime

第二版點擊圖只會渲染沒有隱藏的元素，部分手動控制隱藏/顯示的元素（例如下拉菜單等）需要在元素顯示時手動更新點擊圖。

1.透過右上角的更新按鈕更新頁面，重新渲染點擊圖數據。

2.透過鍵盤上的'r'鍵來更新點擊圖數據。

5.4. 注意事項

第二版點擊圖可以解決第一版點擊圖樣式衝突的問題（例如after,before偽類的衝突，inline-block導致的樣式異常等）

第二版點擊圖無法判斷某些元素是否顯示/隱藏，例如透過父元素overflow:hidden，改變子元素位置來產生顯示/隱藏的效果，還有透過改變父元素高度來控制子元素的顯示/隱藏等，第二版點擊圖會將所有判斷為顯示的元素在頁面中渲染出來，所以如果第二版點擊圖影響了您的頁面顯示，請切換到第一版點擊圖使用。

5.4.1. 分享按鈕

目前預設的 $WebClick 點擊事件是在用戶的各種裝置的各種螢幕大小下采集的數據，但是點擊分析的展示是在一個螢幕下顯示的（一般是 PC 端）

方案一:點擊分享按鈕，用手機掃描 QR Code ，在移動端裝置上查看點擊分析，後期我們會開發基於多個螢幕大小下的顯示方案，敬請期待。

6. 觸達率圖使用說明

有效停留：關注網頁區域不滾動，期間滑鼠可以移動，可以點擊等操作。

有效停留時間：停留時間超過規定的時間，javascript sdk 中預設為 4 秒, 這個參數可以設置。

如果發生頁面滾動時候，之前的頁面停留是有效停留，也就是超過預設的 4 秒或者自定義的時間，javascript sdk 就會發送一次 頁面停留事件。

觸達率是指在當前篩選條件下，最終到達網頁中某個位置的用戶的比例。神策分析透過統計用戶退出頁面前最終到達的位置，計算頁面的觸達深度，產生觸達率圖。 觸達率圖可用於分析如詳情頁、到達頁等類型頁面中用戶的瀏覽深度，幫助優化頁面的內容、結構的設計。

這裡以神策官網部落格作為模板頁面（為模擬數據），來介紹觸達率分析：

  1. 表示在當前篩選條件下，到達當前位置的用戶的比例（以百分比表示）。
  2. 為當前頁面觸達率基準線。
  3. 更新當前頁面的數據。
  4. 收起（下拉）操作工具欄。

觸達圖中的數據，是按照 uv 算的，是以一個人針對這個網頁觸達的最大高度作為他的數據來計算的。

7. FAQ

待補充