Hotjar 教學 – 註冊流程及設定教學,分析網站使用熱點與瀏覽方式

Hotjar 教學 - 註冊流程及設定教學,分析網站使用熱點與瀏覽方式

Hotjar 教學 – 註冊流程及設定教學,分析網站使用熱點與瀏覽方式 教學目的:

1.Hotjar註冊流程教學

2.如何在網站中加入 Jave Script 追蹤碼及Hotjar網站控制台介紹

歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– Hotjar 教學 – 註冊流程及設定教學,分析網站使用熱點與瀏覽方式,在分析網站時最常使到的工具就是 Google Analytics( GA )以及 Google Search Console ,這兩個網站資料分析工具功能可以說是相當完善,但對於網站管理員在針對使用者行為分析的部分,依然稍嫌不足,畢竟 GA 以及 GSC 資料是以數據的方式呈現,而當我們想要知道網站內容區塊中真正帶給使用者的體驗是如何,卻是很難從直觀的從統計資料中得知。

而今天要介紹的這一個 WordPress 相關工具 – Hotjar 就是用來輔助得知使用者對於網站中設計區塊的反應, Hotjar擁有的功能有建立網站熱點圖,以顏色統計的方式呈現單一網頁中使用者停留最久以及點擊次數最的區域,也可以透過自動畫面錄製以紀錄使用者在瀏覽網站時點擊哪些頁面以及移動軌跡,另外也能自行排定頁面拜訪順序,以統計出自訂的主要頁面是否真的為使用經常性造訪 ; 另外就是聯絡表單欄位使用的紀錄,可以查找出使用者是否在哪一個表格選項中停留秒數過久,藉此判斷表單的可用性及便利性是否足夠。

當然這個強大的網站行銷管理工具不只這些功能,也有可以提供使用者回饋( feedback ),讓網站管理員藉此了解使用者體驗的評價,或者網站內容區塊是否有設計不良的地方,後續會針對Hotjar每一個分析工具做單獨的教學文章,這一篇教學會先教大家如何在Hotjar註冊以及在網站中加入 Jave Script 追蹤程式碼的方法 。

Hotjar網址:https://insights.hotjar.com/

(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

• Hotjar註冊流程教學

第一步:點擊上方提供的連結進入Hotjar官方網站,點擊右上方的 SGIN IN(註冊)。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第二步:如下圖所示,可以選擇自行設定名稱與電子信箱地址,也可以點擊橘色方框標示處的按鈕以 Google 帳號登入

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第三步:如果在瀏覽器有設定儲存密碼,在這一步可以選擇常用 Goolge 帳號直接登入,或選擇輸入 Goolge 帳號密碼登入以繼續

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 

第四步:無論是自行輸入名稱或使用 Google 帳號登入都會跳轉到以下畫面,這裡的密碼要求有幾項規則:

1.必須有大、小寫字母。

2.必須有阿拉伯數字

3.必須有一個特殊符號

4,最短至少 8 個英文字元

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

設定完成後就可以點擊 Next 按鈕

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第五步:在這一步驟是選擇使用者身份或用途,大致上有資料分析、產品經理、電商站長等,按照身份選擇即可,像筆者下圖中選擇的就是網站開發者。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 第六步:下圖中的選項分別是詢問是否會透過Hotjat來管理客戶,筆者所經營的是教學網站,因此選擇 NO ,如果是具有購物功能或與使用者會有經常性的互動,建議選擇 YES ,接者輸入自訂義的名稱就可繼續下一步驟。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第七步:接下來會跳轉到輸入想要分析的網站網址頁面,按照下圖中的方式輸入即可,接著點擊Start Using Hotjar,到這裡就完成註冊流程了。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 

• 如何在網站中加入 Jave Script 追蹤碼及Hotjar網站控制台介紹

第一步:在開始使用前會要求將 Java Script 程式追蹤碼置入到網站中,讓Hotjar與網站間建立連結以分析網站資料,首先複製下圖中橘色方框標示的 Java Script 程式碼。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

回到WordPress後台點選外觀 → 主題編輯器

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 

第二步:按照上圖的箭頭方向操作,在右上角先選擇當前使用的佈景主題名稱,接者在佈景主題檔案列表中找到 head.php 項目,進入後找到 </head> HTML標籤的位置,在其上方貼上剛剛複製的完整 Hotjat Java Script 程式碼,點擊更新檔案即可。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 

第三步:回到Hotjat網站控制台,在左上角表格的圖示中點選 Sites & Organizations settings 。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第四步:進入在如下圖可以找到我們剛剛申請分析的網站網址,在其後方點選 Tracking Code 的黑底按鈕。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第五步:在跳出的視窗選擇如下圖畫面中 Verify installation 的頁籤,確認網址無誤後,點選右下角綠色 Verify installation 的按鈕

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

 

第六步:如果驗證成功在接下來的網站畫面中出現如下圖中右上角的藍底區塊,會有綠底的打勾標示,如果有看到這個畫面就表示網站加入追蹤碼的這一步驟已經完成,可以開始設定需要分析的網站或頁面。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第七步:接者簡單介紹Hotjar控制台功能,首先在右上角的表格圖示可以切換在帳號中所加入的不同網站,筆者的帳號有鵠崙設計以及鵠學苑兩筆網站資料,在這裡可以快速選擇想查看的網站。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第八步:同樣在左上角的 + 符號,可以新增其他網站或者為帳號新增共同管理員。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

新增網站的部分如下圖所示,輸入網站網址及名稱後勾選確認自己是網站擁有者,就可以點擊 Add Site,接者就會跳轉之前介紹的加入驗證碼到網站的步驟。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第九步:另外如果要新增使用者,在上一個步驟中選擇Add Users就會進入到以下畫面,輸入想要新增人員的電子郵件,這一步驟的重點在於 ACCESS 的下拉選單中,如果要給予新管理員最高的編輯權限,包含新增刪除網站或設定網頁資料搜集步驟,錄製使用者行為秒數等,就必須選擇Admin,如果説只是想給予查看資料的權限,那就要選擇 Read Only ,另外 Read and write就是只具備編輯部分資料權限,接者點擊 Send Invites

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

在申請人的信箱會收到Hotjar的驗證信,信箱擁有人點擊後即可完成管理權限開通。

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

第十步:在點擊信箱的驗證網址後會自動跳轉到以下畫面,輸入相關資料即可開始共同管理Hotjar網站分析資料

Hotjar 註冊流程及使用教學,分析網站使用熱點與瀏覽方式

結語:

Hotjar能夠實現對網站使用者操作狀態做分析,包含熱點地圖、行為錄製、步驟分析以及表單紀錄,這些功能所產生的數據對於網站管理員而言都是可以做為改進網站提高使用者體驗的依據來源,網站設計多麽精美,耗費多久的時間都不是該關心的項目,重點在於網站的瀏覽方式、操作模式、網頁版型編排、文字及圖片的放置比例等要真正帶給網站使用者良好的瀏覽經驗,這樣才是網站架設的最終目的,這也是筆者會對Hotjar使用多篇幅文章介紹的原因,目的就是想讓大家暸解網站架設的核心目標應該放在使用者操作體驗上。

另外Hotjar也有提供使用者反饋網站使用意見,邀請使用者成為實驗受訪者等功能,因為文章篇幅的緣故,將會在後續的教學文章中在跟各位分享與介紹,因此不要忘記持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

Hotjar 教學系列文章:

Hotjar 網站熱點地圖-分析網頁中使用者最常點擊區域

Hotjar 錄影模式 (Recordings) 介紹教學-紀錄網站訪客網頁使用軌跡

Hotjar 瀏覽分析 ( Funnels )、聯絡表單 ( From ) 設定教學介紹

Hotjar 意見反饋 (Incoming) 教學介紹-網站使用經驗調查設定

Hotjar 意見統計 ( Polls ) 設定教學-網站訪客瀏覽體驗調查工具

Hotjar 線上調查 ( Surveys ) 教學項目-網站使用回饋填寫表單工具

Hotjar 志願測試 ( Recruiters ) 教學介紹-邀請網站功能測試及使用回饋人員

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

(adsbygoogle = window.adsbygoogle || []).push({});

熱門文章

(adsbygoogle = window.adsbygoogle || []).push({});

最新文章

(adsbygoogle = window.adsbygoogle || []).push({});

相關文章

(adsbygoogle = window.adsbygoogle || []).push({});

標籤雲

(adsbygoogle = window.adsbygoogle || []).push({});

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top