官網『最近瀏覽商品』(Recently Viewed Items) 設計完整攻略：中小企業如何用一塊自動記住訪客足跡的區塊，把要離開的客戶悄悄拉回來
訪客逛了 A、B、C 商品，回頭想再看一次卻找不到就離開了？「最近瀏覽」區塊能自動幫他記住，是中小企業電商官網最被低估、卻投報率超高的成交推手。
你有沒有這種經驗？在網購時逛了 A 商品、B 商品、又滑去看 C 商品，回頭想再看一次剛剛那個藍色的，卻怎麼樣都找不到。最後乾脆放棄，關掉分頁。
對訪客來說這是「懶得再找」，對你來說這是「一筆本來要成交的單子悄悄溜掉」。「最近瀏覽商品」(Recently Viewed Items) 就是為了解決這件事——一塊會偷偷幫客戶記住『他剛剛看過什麼』的區塊，讓訪客只要一回頭，商品就自動排在那裡等他。
這篇文章要跟你聊：中小企業官網為什麼一定要放這一塊、要放在哪裡、怎麼設計才不會變成擺飾，以及技術上要注意哪些細節。
一、為什麼「最近瀏覽」對中小企業官網這麼重要
先講幾個沒人會告訴你、但你觀察一下自家 GA 就會發現的事實：
1. 訪客不會一次看一個商品就下單。 統計上，一位電商買家平均會在成交前來回看過 4 到 7 個相似商品。中間只要有一個環節找不回去，就會直接放棄。
2. 大多數訪客不會登入。 台灣中小企業的官網流量，會員占比通常不到兩成。這代表你不能只靠「我的收藏」那種需要登入才能用的功能來留住訪客。
3. 商品頁的跳出率通常高於首頁。 也就是說訪客常常是「進到商品頁看一眼、覺得不合、然後離開」。你如果沒有任何機制讓他繼續看下一個，就等於把流量丟進水裡。
「最近瀏覽」的價值就是：把上面這三個痛點一次解決。不用登入、可以跨頁記住、還會在對的時機主動出現。
二、要放在哪裡？三個關鍵位置
不是隨便找個空位塞進去就有效果。位置選錯了，訪客根本不會看到。
位置一：商品頁的下方（最重要）
訪客看完一個商品，還沒決定要不要下單時，把「你剛剛看過的其他商品」放在商品說明和加入購物車按鈕的下方。這個位置的 CTR 最高，因為訪客本來就在猶豫，順手滑回上一個看過的商品是很自然的動作。
位置二：購物車頁面的旁邊或下方
訪客把東西丟進購物車、正要結帳時，展示他還沒放進去、但剛剛猶豫過的商品。這是加價購最佳時機——很多人會臨時「順便再帶一個」。
位置三：首頁「回訪區塊」
訪客隔天回來，首頁上方看到「歡迎回來，你上次看過這些」——這一句話比任何 Banner 都有效。因為那是他自己選過的東西，比推薦演算法還準。
不要放的位置：結帳頁最後一步、Footer、彈窗。前兩個會分散注意力讓你損失單，後一個會嚇跑訪客。
三、視覺設計的 5 個實用細節
1. 顯示 4 到 6 個就好。 太多會讓區塊變太長、拉走視線；太少又沒有回顧的價值。桌機 4-6 個一排，手機 2-3 個橫向捲動最順。
2. 一定要顯示縮圖 + 商品名 + 價格。 三缺一就沒用。很多網站只放商品名沒放價格，結果訪客要點進去才知道多少錢，多一次點擊就少一次成交。
3. 加上「移除」按鈕。 訪客可能誤點過、或是不想再看到（例如買禮物給另一半，不想被看到），一個小小的 × 就能提升信任感。
4. 標題要有溫度。 不要寫「最近瀏覽項目」，改成「你剛剛看過的」、「繼續看你剛才有興趣的」、「還在猶豫嗎？」——同樣的功能，語氣會決定訪客點不點。
5. 手機版要橫向滑動、不要垂直排。 手機用垂直排會把整個頁面拉太長，訪客滑不到底。改成「一排橫向、往右可滑」，滑到底再顯示「看更多」。
四、技術面：資料怎麼記、怎麼存
這塊常被工程師低估，其實眉角很多。分成三個層級講：
入門版：localStorage 存瀏覽紀錄
訪客每點進一個商品頁，就把該商品的 ID、標題、縮圖 URL、價格塞進 localStorage 陣列（保留最新 10 個）。優點是完全前端搞定、不用改後端、也不用登入。缺點是換裝置就沒了、清 cookie 也會消失。對絕大多數中小企業官網來說，這個版本就夠用。
進階版：Cookie + 後端 API 存匿名 ID
用 Cookie 給每個訪客一個匿名 ID，瀏覽紀錄存到後端資料庫。這樣即使他一週後再回來、換分頁、關瀏覽器重開，都還看得到。適合客單價較高、成交週期較長的產品（例如家具、車輛配件、B2B 工業品）。
會員版：綁定會員帳號跨裝置同步
會員登入後，把瀏覽紀錄跟他的帳號綁定，白天在公司看、晚上在家用手機打開也還在。這一版才建議做「AI 推薦」——因為你有足夠的資料。
建議做法：先做入門版，跑三個月看數據。如果 CTR 高、訪客有反覆使用，再升級到進階或會員版。不要一開始就想做完美方案，會做到失焦。
五、常見錯誤與踩雷提醒
錯誤一：把「最近瀏覽」跟「熱門商品」混在一起。 這是兩個功能。熱門商品是「別人在看什麼」，最近瀏覽是「你自己看過什麼」。混在一起訪客會搞不清楚，兩個都失去效果。分開放、分開命名。
錯誤二：不做去重。 訪客可能同一個商品看了三次，如果全部記錄，區塊裡就會出現三個一樣的商品。要做去重，同一個商品只保留最新一次的時間戳。
錯誤三：把已下架商品也顯示出來。 訪客點進去發現「商品已下架」比沒放這個功能還糟。API 回傳前要先過濾。
錯誤四：載入太慢拖累頁面速度。 這一塊是輔助功能，如果因為它讓商品頁載入變慢 1 秒，你會失去更多訪客。建議用 lazy load（滑到那一區才載入），或用非同步 API 分開請求。
錯誤五：忽略隱私與同意。 如果你有做 Cookie 或後端追蹤，記得在 Cookie 同意條裡告知，並提供「清除瀏覽紀錄」的入口。個資法愈來愈嚴，先做對比事後補救便宜。
Photo by Marques Thomas on Unsplash
六、成效怎麼量：三個一定要追的數字
做完不追蹤數字就等於白做。至少要盯這三個指標：
1. 區塊點擊率（Click-Through Rate）。 有多少人看到這一塊會點進去。健康值大概 8%~15%。低於 5% 代表位置或設計有問題。
2. 二次瀏覽的成交轉換率。 從「最近瀏覽」點回去的商品，最終有多少變成訂單。這個數字通常會比一般商品頁高 30% 以上，因為那本來就是訪客有興趣的商品。
3. 訪客回訪率。 有多少訪客會在 7 天內再回來看。功能做對了，這個數字會明顯提升。
三個指標在 GA4 都可以透過事件追蹤設定，不需要另外買工具。
結語：一塊被低估的成交推手
「最近瀏覽」看起來就是個小小的區塊，但它是少數幾個「不用花錢投廣告、不用登入、不用複雜演算法」就能提升轉換的功能。對中小企業來說，這種投資報酬率極高的細節反而最值得先做。
如果你的官網是電商屬性、商品超過 20 個、成交週期不是一兩分鐘就結束的類型，那這個區塊今天就可以規劃起來。從入門版的 localStorage 版本開始，先跑一個月看數據，再決定要不要升級。
做官網不是把功能做齊就好，而是把對的功能放在對的位置。「最近瀏覽」正是那種你不放、訪客不會抱怨；但一旦放對，會默默替你多留住一批本來要走掉的客戶。