如何在 WordPress 網站上安裝熱點圖（一行程式碼，3 分鐘搞定）
- how-to
- wordpress
- heatmap
- installation
文章摘要
- 在 WordPress 加入熱點圖,只需要貼上一行程式碼
- 有三種做法:(1) 主題的頁首設定欄位、(2) 程式碼插入外掛,或 (3) 直接編輯 header.php
- 成功的標準是 HeatMapX 儀表板中你網站的計數確實增加——而不只是「沒有出現錯誤」
擔心加入熱點圖代表要跟程式碼奮戰嗎?在 WordPress 上,其實只需要一行標籤程式碼。本指南將介紹三種加入方式,從最適合新手的簡單選項到較進階的做法。
步驟 1:取得你的網站金鑰
首先,註冊 HeatMapX(提供免費方案),註冊你的網站並取得網站金鑰。不需要信用卡。
取得網站金鑰後,使用下方的標籤,將 YOUR_SITE_KEY 替換為你實際拿到的金鑰。
<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>
透過以下三種方法之一,將這段標籤貼入你網站的 <head> 中。
方法 1(推薦給新手):主題的頁首設定欄位
許多熱門主題,例如 Astra 或 GeneratePress,都內建一個設定欄位——通常在「Advanced」或「Custom Scripts」底下——可以讓你直接將程式碼插入 <head> 區塊。
- 在 WordPress 後台開啟你目前使用中主題的自訂器或設定面板
- 尋找標示為「Header Scripts」、「Custom Code」或「Advanced」之類的欄位
- 將上方的標籤貼入該欄位並儲存
由於不需要動到任何主題檔案,如果你是第一次操作,這是最安全的選項。
方法 2:程式碼插入外掛
如果你的主題沒有頁首欄位,可以使用像 WPCode(前身為 Insert Headers and Footers)這樣的外掛。
- 在外掛頁面搜尋並安裝像 WPCode 這樣的程式碼插入外掛,然後啟用它
- 開啟外掛的設定,找到「Header」欄位
- 貼上上方的標籤並儲存
這種做法的優點是標籤不會因為更換主題而消失。如果你未來計畫改版網站,這個方式很適合。
方法 3(進階):在子主題中編輯 header.php
如果你熟悉直接編輯程式碼,可以將標籤直接加入主題檔案中。
- 先為你目前使用中的主題建立子主題(直接編輯父主題的話,下次主題更新時你的修改就會被清除——因此必須使用子主題)
- 開啟子主題中的
header.php,將標籤貼在wp_head()之前,或緊接在結尾的</head>標籤之前 - 儲存檔案
如果你直接編輯父主題,下次主題更新時你的修改會被覆蓋,標籤就會消失。若選擇這個方法,務必透過子主題進行修改。
如何確認安裝真的生效
加入標籤後,瀏覽你自己網站的幾個頁面。但這裡有個重點。
頁面沒有出現錯誤,不代表追蹤功能真的在運作。 即使瀏覽器主控台沒有顯示任何錯誤,網站金鑰打錯一個字,也可能導致資料完全沒有送到 HeatMapX。
唯一可靠的確認方式,是開啟 HeatMapX 儀表板,在網站清單中找到你的網站,確認其計數確實有增加。瀏覽幾個頁面後,如果計數增加,代表安裝成功。
常見問題
Q. 這會拖慢我的網站速度嗎? A. 該標籤採非同步載入且相當輕量,對頁面載入速度的影響微乎其微。
Q. 我有使用快取外掛,需要注意什麼嗎? A. 如果你使用 WP Super Cache 或 W3 Total Cache 之類的快取外掛,加入標籤後務必清除(清空)快取。如果持續提供舊的快取版本,新加入的標籤就不會生效。
Q. 我已經加入標籤,但儀表板上的計數沒有增加 A. 最常見的原因是網站金鑰不符——貼上了其他網站的金鑰,或是複製時漏掉了某個字元。請對照 HeatMapX 儀表板中的金鑰再次確認。
總結
在 WordPress 加入熱點圖,說到底就是貼上一行程式碼而已。HeatMapX 提供免費方案即可開始使用,不妨試試看,實際了解訪客在你網站上的使用體驗。