使用熱圖了解訪問者在您的網站上所做的事情

已發表: 2021-11-04

人類天生好奇。在許多方面，好奇心是使我們進化最多的特徵之一。信息就是力量，擁有關於他人的信息在許多不同領域都非常有用，包括網頁開發。

在不進入隱私世界的黑暗面的情況下，有很多方法可以管理網頁並以合乎道德的方式利用好奇心來提高其性能並讓您的訪問者比以前更喜歡您的網頁。

熱圖是一種旨在發現訪問者在網頁上所做的事情並了解他們如何與之交互的技術。也就是說，熱圖允許我們以聚合和匿名的方式分析訪問者的行為。通過分析光標在網頁上的移動，熱圖是一種視覺表示，它顯示了用暖色繪製的頁面熱點。

更重要的是，熱圖使我們能夠獲得改進的想法以應用於我們的網站。我們只需要研究我們在熱圖中看到的數據，就可以得出關於正在發生的事情、訪問者在做什麼、網絡上出了什麼問題以及我們如何解決問題的結論。

如何在 WordPress 中創建熱圖

如今，創建熱圖非常簡單。在 WordPress 中，我們只需要使用允許我們創建熱圖的插件。事實上，熱圖是我們的 Nelio A/B 測試用戶最需要的功能之一。

我們長期以來一直在創建熱圖，以繼續研究我們網站上可能的改進。例如，我將在這裡向您展示我們在 Nelio 主頁上創建的最新熱圖。

首先是創建一個新的熱圖。為此，我們選擇 Nelio A/B 測試中的新測試並選擇我們感興趣的頁面，如以下屏幕截圖所示：

然後，我們只需要開始測試，以便插件跟踪您的訪問者並自動匯總信息。從這一刻起，將逐步生成新的熱圖，我們將能夠以圖形方式查看結果。

一旦我們跟踪了具有代表性的訪問者數量，我們就可以詳細觀察熱圖的結果。請記住，從我們的訪問者那裡提取的這些數據有不同的看法。

最常見的可視化類型是熱圖本身，它顯示了在分析頁面頂部顯示的一系列暖色點。這些熱點被放置在互動最多的元素上。

另一方面，我們有滾動圖，它以較暖的顏色顯示訪問者在離開前向下滾動頁面的距離。

最後，我們通常可以找到的最後一種表示是將頁面上的點擊視為一團點或五彩紙屑。

在之前的圖庫中，您可以看到我們的插件在分析我們網站的主頁時創建的完整熱圖、滾動圖和 cofetti。接下來，讓我們仔細看看我們可以從所有這三種表示中提取的信息的一些細節。

熱圖顯示訪問我們主頁的人的大部分活動都發生在頁面的第一部分。我們發現按鈕上有很多交互，這些按鈕將我們帶到每個插件的特定頁面，這是我們想要發生的事情：

但我們也發現很多人點擊了第一折中的箭頭標誌，表示他們向下滾動。不幸的是，這個箭頭只是一個指示器，並不是一個可點擊的元素。所以它肯定會讓我們的觀眾感到困惑，他們仍然點擊它。

作為一種解決方案，我們可以選擇將箭頭轉換為自動向下滾動頁面的按鈕。通過這樣做，我們使用戶期望與現實保持一致。

另一方面，很好奇頁腳如何也受到很多關注。這很重要，因為它表明一些用戶直到頁面最後才找到他們正在尋找的內容。特別是，最熱門的領域是聯繫鏈接。因此，一個好的測試想法是將此鏈接移動到頁面更顯眼的區域，以確保沒有人在沒有找到他們需要的東西的情況下離開。

滾動圖顯示我們的大多數訪問者看不到任何超過半頁的內容。有了這些信息，我們可以得出的主要結論是，從那時起的內容將被遺漏，因此，它不應該是相關的。

為了使我們的內容對我們的觀眾更具吸引力，從而防止他們離開，一種可能性是展示更具視覺性和動態性的部分。靜態內容不夠突出，我們失去了訪問者的注意力。出於這個原因，在這些部分中提出更改可能是在未來的 A/B 測試中進行測試的一個很好的可能性。

至於五彩紙屑，它顯示了我們在測試運行時收到的所有點擊的點雲。與常規熱圖相比，五彩紙屑包含有關每次點擊的更多信息。

我們看到大多數點擊的訪問者是如何在 5 到 10 秒之間完成的。知道這些數據是非常有趣的，因為我們有一個相當近似的時間來衡量我們必須引起他們的注意。

頁面越複雜，似乎越難以理解，我們就會失去更多的訪問者。這些信息可以幫助我們提出一個更簡單、更激進的頁面版本。例如，我們可以顯示更少的信息並直奔主題。這是我們接下來可以嘗試的另一個可能的 A/B 測試。

此外，我們可以看到有訪問者點擊了不可點擊的元素。這裡一個特別相關的部分是使用我們產品的公司的徽標列表，或我們客戶的推薦：

在這些部分中，我們沒有可點擊的元素，但它們仍然可以點擊。同樣，這可能會造成混淆，因此確保我們網站的行為符合訪問者的期望非常重要。為避免這種情況，我們可以決定修改這些部分的設計，以使您不必單擊那裡更清楚。甚至刪除部分，考慮到滾動圖中的信息，我們已經看到我們在這部分網絡中失去了人。

關於熱圖的重要一點是通過分析我們的訪問者如何與我們的網站互動來獲得改進的想法。通過這種方式，我們可以糾正失敗的行為，並對我們的頁面提出可能的改進建議，然後我們可以通過 A/B 測試進行測試。

讓我提醒您，Nelio A/B 測試的免費版本允許您在 WordPress 頁面上創建熱圖，就像我在這裡解釋的那樣簡單。繼續嘗試。然後讓我們知道您的體驗以及您可以通過訪問者行為的這種可視化表示提取哪些信息。

由 Almos Bechtold 在 Unsplash 上拍攝的特色圖片。