如何在 Shopify 商店安裝熱點圖（免安裝 App，只需一行程式碼）

文章摘要

在 Shopify 加入熱點圖只需要把一行程式碼貼進 theme.liquid——不需要安裝任何 App

編輯前務必先複製一份佈景主題作為備份。儲存後就會立即生效——這點跟 STUDIO 不同，不需要另外執行「重新發布」的步驟

結帳頁面不會執行佈景主題的程式碼，因此不會被追蹤。判斷成功與否的標準，是 HeatMapX 儀表板中的計數真的有增加——而不只是「沒有出現錯誤」

想知道能不能在不安裝 App 的情況下，為你的 Shopify 商店加入熱點圖嗎？答案是可以的。Shopify 讓你直接把一行標籤程式碼貼進佈景主題裡，完全不需要安裝任何 App。本篇教學會說明一開始就該做的備份步驟、如何加入標籤、如何確認安裝是否成功，以及幾個需要留意的地方。

步驟一：取得你的網站金鑰

首先，註冊 HeatMapX 帳號（提供免費方案），登記你的商店，取得你的網站金鑰（site key）。不需要信用卡。

拿到網站金鑰之後，使用下方的標籤程式碼，並將 YOUR_SITE_KEY 替換成你實際取得的金鑰。

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

操作步驟：在 theme.liquid 中加入標籤

1.（必要）先複製一份佈景主題作為備份

在直接編輯程式碼之前，務必先複製目前使用中的佈景主題。在你的 Shopify 後台，前往**「線上商店」→「佈景主題」，找到目前發布中的佈景主題，點選右側的「…」（操作）選單**，選擇**「複製」**。這樣一來，萬一出了什麼差錯，你就有一份安全的備份可以還原。跳過這個步驟，代表萬一改錯了，你將無法復原。

2. 開啟程式碼編輯器

在你的 Shopify 後台，前往**「線上商店」→「佈景主題」**
在目前發布中的佈景主題上，點選**「…」（操作）選單**，選擇**「編輯程式碼」**
左側會出現該佈景主題的檔案清單

3. 在 layout/theme.liquid 中加入標籤

在檔案清單中，展開**「Layout」資料夾**，點選 theme.liquid
在檔案中搜尋 </head>，將前面提到的標籤程式碼貼在它的正前方
儲存檔案

4. 只要儲存就完成了——不需要重新發布

在 Shopify 中，編輯佈景主題的程式碼只要儲存就會立即生效。這一點跟 STUDIO 不同，不需要另外執行「發布」或「重新發布」的步驟。只要儲存完成，你的正式商店就已經載入了這段標籤。

如何確認安裝真的有生效

加入標籤之後，實際瀏覽自己商店的幾個頁面。不過這裡有個重點。

頁面正常載入、沒有出現錯誤，並不代表追蹤真的有在運作。 就算瀏覽器主控台沒有顯示任何錯誤訊息，網站金鑰打錯字，或標籤貼錯位置，都有可能導致資料完全沒有傳送到 HeatMapX。

唯一可靠的確認方式，是打開 HeatMapX 儀表板，在網站清單中找到你的網站，確認它的計數真的有增加。 瀏覽幾個頁面之後（例如商品頁、分類頁等），如果計數有增加，就代表安裝成功。

需要注意的事項

結帳頁面不會被追蹤

你加入 theme.liquid 的標籤，會在你的商店前台運作——包括首頁、商品頁、分類頁、購物車——但不會在結帳頁面（也就是 /checkouts/ 底下的付款頁面）執行。結帳流程是由 Shopify 直接代管，與你的佈景主題是分開的，theme.liquid 中的程式碼永遠不會在那裡被載入。如果你發現儀表板中結帳頁面沒有資料，這是正常現象，並不是 bug。

更換佈景主題時，需要重新加入標籤

這段標籤只存在於你編輯過的那個佈景主題的 theme.liquid 檔案中。如果之後你切換到另一個佈景主題（發布新的佈景主題），該主題的 theme.liquid 並不會自動帶有這段標籤。每次更換佈景主題時，都需要重複同樣的步驟，把標籤加入新的佈景主題中。

常見問題

Q. 這樣做會讓我的商店變慢嗎？ A. 這段標籤是非同步載入，而且程式碼很輕量，對頁面載入速度的影響微乎其微。

Q. 我已經加入標籤了，但儀表板中的計數沒有增加 A. 最常見的原因是網站金鑰不符——貼上了其他網站的金鑰，或是複製時掉了字元。另外也請確認你測試的頁面是商店前台頁面（首頁、商品頁、分類頁），而不是結帳頁面，因為結帳頁面本來就不會被追蹤。

結語

在 Shopify 加入熱點圖，說到底就是把一行程式碼貼進 theme.liquid——不需要安裝任何 App。HeatMapX 可以免費開始使用，不妨試試看，了解顧客實際上是如何體驗你的商店的。