電子商務結帳功能的地址驗證

目標

本文說明在電子商務結帳頁面中結合 Place Autocomplete、Address Validation API¹ 和 Google 地圖的方法，用於擷取高品質地址。

先備知識

Google 建議您熟悉下列事項：

• Place Autocomplete JavaScript 開發人員說明文件。
  • 從技術層面瞭解 Place Autocomplete 的運作方式和導入選項。
• Place Autocomplete 的結帳導入指南。
  • 電子商務結帳頁面的 Place Autocomplete 導入最佳做法範例。
• Address Validation API 產品說明文件，著重於建構驗證邏輯。
  • 從技術角度瞭解 Address Validation API 的運作方式，並檢視會影響地址品質的信號。

什麼是地址驗證？

Address Validation API 服務接受地址。可識別並驗證地址元件。此外，它還會將郵件地址標準化，並找出已知的經緯度座標。或者，對於美國和波多黎各的地址，您也可以啟用編碼準確率支援系統 (CASSTM)。

為什麼結帳時需要驗證地址？

在訂購過程中收集正確的地址：
這個步驟十分重要，有助於宣傳成功的貨品、提高交貨時間，並減少須付出昂貴代價的修正費用。

引導消費者快速準確地輸入地址：
Place Autocomplete 可加快地址輸入速度，並減少輸入錯誤，讓客戶輕鬆完成結帳流程。Address Validation 會針對整體地址品質提供意見回饋、修正標準化和拼寫錯誤等錯誤，並強化中繼資料，例如提供住宅或商業指標 (適用於特定區域)。

導入程序總覽

本節概述電子商務結帳建議的地址輸入工作流程。這項程序包含三個步驟：

1. 一開始請使用 Place Autocomplete 擷取地址。
2. 使用 Address Validation API 確認輸入的地址。
3. 在地圖上顯示輸入地址的位置，讓客戶有信心交貨。

接下來，我們會個別介紹每個步驟。

步驟 1：地址輸入流程 - 使用 Place Autocomplete 服務

在地址輸入表單的第一行使用 JavaScript API 導入 Place Autocomplete。

顧客輸入地址詳細資料時，Place Autocomplete 會提供建議。使用 JavaScript API 實作時，當使用者開始輸入時，地址輸入表單欄位下方會顯示下拉式選單，顯示自動完成服務傳回的結果，每個按鍵動作都會更新。使用者輸入足夠的資訊來找出地址後，就會從下拉式選單中選取地址。這個動作會在表單欄位中自動填入地址資料。

您可以透過 Place Autocomplete 向使用者提供兩種表單項目樣式：包含所有地址欄位的多媒體，或是單一輸入欄位的螢幕。這個單一輸入欄位會提示使用者在輸入資料時開始搜尋，而不是個別輸入地址元件。自動完成填入地址後，工作流程就會展開表單欄位來提供地址資料，讓客戶審查及編輯內容，例如新增公寓或門牌號碼。

以下為使用單一輸入欄位可能顯示此流程的範例：

步驟 2：使用 Address Validation API 驗證地址

使用者輸入地址後，Google 建議您在結帳時呼叫 Address Validation API，確認地址有效且完整。使用者點選地址表單上的「Next」或「Continue」按鈕時，觸發對 Address Validation API 的呼叫。這個按鈕通常會導向付款頁面。

Google 建議針對每筆交易呼叫 Address Validation API。

以下流程圖說明結帳內 Address Validation API 的端對端整合範例：

本文件稍後會討論如何接受因應情境。

步驟 3：提供視覺化的確認畫面

輸入地址後，請在地圖上顯示，讓使用者目視確認送貨地點。這樣客戶就能進一步確保地址正確無誤，減少配送或取貨失敗的問題。

地圖可以在結帳程序中顯示，或在交易確認電子郵件內傳送。這兩種用途都可使用下列 API 來完成。

Maps JavaScript API 提供用於顯示使用者位置的互動式地圖。	Maps Static API 允許將圖片嵌入網頁或後續的電子郵件中。

深入解析 - 說明接受情形

Address Validation API 回應可分為三種主要情境：

• handyman 修正：地址品質不佳。 系統應提示您提供更多資訊。
• edit 確認：地址品質良好，但輸入地址有所變更。您可能會收到確認提示。
• check 接受：地址為高品質。您可以接受您提供的地址。

這個概念在 Address Validation API 文件的「建立驗證邏輯」一節中介紹，本節將探討各種情境。

修正

本節說明如何修正輸入的地址。如要瞭解 Address Validation API 傳回來指出地址品質不佳的特定信號，請參閱建構驗證邏輯說明文件中的「修正地址」一節。

如果 Address Validation API 的回應指出地址無效，請將客戶重新導向至地址輸入表單，檢查他們輸入的資料。修正地址後，服務應重新傳送到 Address Validation API，確保更正內容有效。

您也可以使用 addressComponents 層級傳回的信號，醒目顯示特定地址行錯誤。右側螢幕截圖顯示這項例子。

---

確認

本節說明如何確認地址。如要進一步瞭解 Address Validation API 傳回，指出應確認地址的特定信號，請參閱建構驗證邏輯說明文件中的「確認地址」一節。

系統通常會想提示使用者確認地址。舉例來說，客戶拼錯城市名稱，但 Address Validation API 進行修正。請向客戶確認這個問題。這是因為 API 所做的變更可能會從根本上改變原先輸入的內容。

使用插頁互動模式向客戶顯示資訊，然後透過三個選項繼續操作：

1. 確認 API 傳回的地址，並使用更正後的地址繼續結帳程序。
2. 選取原本輸入的地址，並略過 Address Validation API 中的更正內容。結帳程序會繼續照常運作；如果這項程序允許，在出貨前將訂單標記為下游審查。
3. 客戶取消或退出互動視窗，將他們帶回結帳程序的地址輸入階段，從頭開始重新輸入地址。

右側螢幕截圖可找到相關示例。

---

接受

本節說明如何接受地址。如要進一步瞭解 Address Validation API 傳回來指出地址良好且應接受哪些信號，請參閱建構驗證邏輯說明文件中的「接受地址」一節。

在這種情況下，結帳程序應會移至下一個階段 (可能是擷取款項)，且不會針對地址品質給予客戶提示。這個 API 已確認客戶輸入的地址品質良好且有效。

建議您根據訂單使用 Address Validation API 傳回的地址資料，因為這可能包含小幅修正和附加內容，例如：

• 大寫
• 格式設定修正，例如：
  • 往街的街道
  • 地址元件的正確順序
• 美國的 ZIP+4。

---

作品注意事項

建立地址接受邏輯時，請確定導入設定不會因輸入無效地址，導致客戶無法結帳。建構邏輯，在 API 重複指出其項目無效時，以避免發生無限迴圈。

Google 建議您向客戶提供最多兩次輸入地址的機會。在第二次嘗試時，即使並未驗證，也請接受客戶輸入的地址。第二次嘗試時，我們的目標是讓他們無論驗證狀態為何，都能繼續作業。

接受第二次嘗試的兩種建議方法：

• 強制處理：向客戶顯示互動視窗，說明地址未驗證，但允許使用者選擇繼續使用他們輸入的地址。
• 無聲接受：自動接受第二次嘗試而未確認步驟，即使地址未完整驗證也是如此。

如果可以，請將系統標記為標記未經驗證的地址，以便客服代表在訂單出貨之前先行檢閱。這項額外措施可確保您找出任何錯誤。

在新建築物建構的情況下，清楚地解釋為何建議進行這項檢查。完成新的建築物建構後，到郵寄地址資料庫填入該建築物的地址之間可能會出現缺口。即使系統未驗證，客戶仍應選擇使用輸入的地址在結帳頁面中強制進行購買。

完成結帳工作階段後，您可以視需要使用 provideValidationFeedback 方法，將有關特定地址驗證嘗試的意見回饋傳送給 Google。

結論

本文件將概略說明在 Google 地圖上導入自動完成、地址驗證和視覺確認功能的結帳流程。按照建議的地址輸入流程，將這份文件做為設計實作的起點。

後續步驟

下載透過可靠地址提升結帳、交付和營運成效 白皮書，並查看運用地址驗證改善結帳、交付和營運成效 網路研討會。

建議延伸閱讀：

• Place Autocomplete 說明文件
• Address Validation API 說明文件
• Google 地圖平台報表

協作者

Henrik Valve | 解決方案工程師
Thomas Anglaret | 解決方案工程師
Sarthak Ganguly | 解決方案工程師