電商知識庫
地址自動完成完整指南
少打 30 秒就少 5% 結帳放棄，這是 ROI 最高的微優化
地址填寫是結帳放棄的第三大原因。傳統填地址需 60-90 秒（要查郵遞區號、選縣市區），地址自動完成可縮短到 20-30 秒。每縮短 10 秒結帳時間，完成率提升 3-5%。這是 ROI 最高的「微優化」之一，技術門檻不高但效益顯著。本文涵蓋資料庫選擇、郵遞區號自動帶入、Google Places 整合、行動版實作。
沒做自動完成的結帳頁通常長這樣：「縣市」（自己選）、「區」（自己填或選）、「郵遞區號」（自己查 Google）、「詳細地址」（自己打）。問題：顧客不記得郵遞區號（要去查）、縣市與區的下拉沒聯動（選了台北市卻看到全台行政區）、輸入錯誤要重打、行動版小螢幕填表更困難。整體下來 60-90 秒跑不掉，大檔結帳放棄就在這裡發生。
建議：方案 A 是基本功，方案 B 是進階體驗，兩者可同時實作。
核心邏輯：顧客選「縣市」後，「行政區」下拉動態更新只顯示該縣市的鄉鎮市區。例如選「台北市」後，行政區只顯示台北市的 12 個區（中正、大同、中山...）。技術上是 JavaScript 監聽縣市變化事件，從預先載入的台灣行政區資料中過濾。資料量不大（全台約 350 個鄉鎮市區），可全部寫進前端 JS 就好，不用呼叫 API。
顧客選了縣市 + 行政區後，郵遞區號應該自動帶入（如選了「台北市信義區」自動帶入「110」）。郵遞區號欄位設為唯讀（disabled）或隱藏，完全由系統決定。如果要支援 3+2 郵遞區號（更精確），則在「詳細地址」欄位輸入街道後再進一步推斷。多數電商用 3 碼郵遞區號已足夠物流配送。
Google Places Autocomplete API 提供進階體驗：顧客在「詳細地址」欄位輸入時，即時建議完整地址（如打「101」會建議「台北市信義區信義路五段 7 號」）。優點：超快速、減少打字錯誤、自動帶入精確的縣市區。設定要點：限制建議結果為台灣地區（components: country:TW）、設定地址型態（types: 'address'）、處理 API 額度（每月免費額度約 28,000 次請求）。
會員多次購買後，要讓他能快速選擇過去用過的地址：購物車或結帳頁顯示「我的地址簿」下拉選單；最近使用的地址置頂；可標記「主要地址」、「公司地址」、「父母家」等標籤；點擊就一鍵帶入所有欄位（縣市/區/郵遞區號/詳細地址）。這個功能讓老顧客結帳速度從 30 秒降到 5 秒，回購率明顯提升。
善用 HTML5 標準屬性讓瀏覽器自動填入：
autocomplete="shipping street-address"：完整街道地址autocomplete="shipping address-level1"：縣市autocomplete="shipping address-level2"：行政區autocomplete="shipping postal-code"：郵遞區號autocomplete="name"：收件人姓名autocomplete="tel"：電話號碼這些屬性讓 Chrome、Safari 等瀏覽器把過去儲存的地址資料一鍵帶入。零成本但效益顯著。
NT$24,800/年起，享受完整電商解決方案：
傳統結帳填地址平均要 60-90 秒，地址自動完成可縮短到 20-30 秒，提速 50-70%。結帳每縮短 10 秒，完成率提升 3-5%。
三種主流方案：內建台灣行政區資料庫（免費）、Google Places API（付費但智慧）、中華郵政地址查詢 API（免費但簡單）。中小型電商用內建資料庫已足夠。
絕對不要。顧客選好縣市與行政區後，系統應該自動帶入郵遞區號。多數顧客不記得郵遞區號，要他們去查反而拖長時間。
離島地址要特別處理：縣市選單中明確列出離島縣市；選到離島後自動標示「離島地區，運費另計」；提示顧客「離島地區出貨時間較長（3-7 日）」。
行動版要點：縣市選單用原生 select；詳細地址欄位的鍵盤要喚起「文字+數字」鍵盤；善用 HTML autocomplete 屬性；可考慮整合「使用目前位置」按鈕。