e コマース チェックアウトの住所検証

目標

このドキュメントでは、高品質な住所を取得するために、e コマースの購入手続きで Place Autocomplete、Address Validation API1、Maps を組み合わせる方法について説明します。

前提条件

Google は、次の内容を理解しておくことをおすすめします。

  • Place Autocomplete JavaScript のデベロッパー ドキュメントをご覧ください。
    • Place Autocomplete の仕組みと実装オプションについて、技術的な観点から理解します。
  • プレイス オートコンプリートの決済実装 ガイド
    • e コマースの購入手続きでの Place Autocomplete 実装のベスト プラクティスの例。
  • Address Validation API プロダクト ドキュメント検証ロジックを構築するに重点を置いています)。
    • Address Validation API の仕組みを技術的な観点から理解し、住所の品質を判断するシグナルを確認します。

住所確認とは

Address Validation API は、アドレスを受け入れるサービスです。住所の構成要素を識別して検証します。また、郵送用の住所を標準化し、その住所に最適な既知の緯度と経度の座標を見つけます。必要に応じて、米国とプエルトリコの住所に対して Coding Accuracy Support System(CASS™)を有効にできます。

購入手続きで住所の確認が必要な理由

注文プロセスで正確な住所を収集する:
これは、配達の成功を促進し、納期どおりの履行を増やし、住所修正の費用を削減するための重要なステップです。

お客様が住所をすばやく正確に入力できるようにする:
プレイス オートコンプリートにより、住所の入力が迅速化され、入力ミスが減るため、お客様は購入手続きをスムーズに進めることができます。Address Validation は、住所の全体的な品質に関するフィードバックを提供し、標準化やスペルミスなどの修正を行い、住宅用か商業用かのインジケーターを提供するなど、メタデータを強化します(一部の地域で利用可能)。

実装の概要

このセクションでは、e コマースの購入手続きで推奨される住所入力のワークフローについて説明します。このプロセスは次の 3 つのステップで構成されます。

  1. Place Autocomplete を使用して、最初に住所を取得します。
  2. Address Validation API を使用して、入力された住所を確認します。
  3. 入力された住所の場所を地図上に表示して、お客様に配送の信頼感を与えます。

次に、各ステップについて個別に詳しく説明します。

ステップ 1: 住所入力フロー - Place Autocomplete サービスを使用する

住所入力フォームの 1 行目に JavaScript API を使用してプレイス オートコンプリートを実装します。

Place Autocomplete は、お客様が住所の詳細を入力する際に候補を表示します。JavaScript API を使用して実装すると、ユーザーが入力を開始したときに、住所入力フォーム フィールドの下にプルダウンが表示され、オートコンプリート サービスの結果がすべてのキーストロークで更新されます。ユーザーが住所を検索するのに十分な情報を入力すると、プルダウンから住所を選択できるようになります。この操作により、フォームのフィールドに住所データが自動的に入力されます。

Place Autocomplete では、すべての住所フィールドを表示する形式と、単一の入力フィールドを表示する形式の 2 つのフォーム入力スタイルをユーザーに提供できます。この単一の入力フィールドでは、ユーザーが住所の構成要素を個別に入力するのではなく、入力と同時に検索を開始するよう促します。予測入力で住所が入力されると、ワークフローによって住所データを含むフォーム フィールドが展開され、お客様は住所を確認して編集できます(アパートやユニットの番号を追加するなど)。

単一の入力フィールドを使用した場合のフローの例を次に示します。

画像

ステップ 2: Address Validation API を使用して住所を検証する

ユーザーが住所を入力したら、チェックアウト時に Address Validation API を呼び出して、住所が有効で完全であることを確認することをおすすめします。ユーザーが住所フォームの [次へ] または [続行] ボタンをクリックしたときに、Address Validation API への呼び出しをトリガーします。このボタンは通常、お支払いページにリンクされています。

Google では、取引ごとに Address Validation API を呼び出すことをおすすめします。

次のフロー図は、購入手続き内での Address Validation API のエンドツーエンドの統合例を示しています。

画像

アドレスの承認シナリオについては、このドキュメントの後半で説明します。

ステップ 3: 視覚的に確認する

住所の入力後に、ユーザーが地図上で配達場所を視覚的に確認できるようにします。これにより、ユーザーは住所が正確であることを重ねて確認できるため、配達 / 受け取りミスを減らすことができます。

この地図は、購入手続き中に表示することも、トランザクションの確認メールに組み込むこともできます。これらのユースケースは、次の API で実現できます。

Maps JavaScript API は、ユーザーの位置を表示するためのインタラクティブな地図を提供します。 Maps Static API を使用すると、ウェブページ内またはメールの後の段階で画像を埋め込むことができます。

詳細 - 承認シナリオに対応する

Address Validation API のレスポンスは、主に次の 3 つのシナリオに分類できます。

  • 修正 - 住所の品質が低い。 詳細情報を求める必要があります。
  • Confirm - アドレスの品質は高いが、入力されたアドレスから変更されている。確認を求めるメッセージが表示されることがあります。
  • 承認 - 住所の品質が高い。提供された住所を承認できます。

このコンセプトについては、Address Validation API ドキュメントの検証ロジックを構築するセクションで説明しています。このセクションでは、各シナリオについて説明します。

修正

画像

このセクションでは、住所の入力を修正する方法について説明します。Address Validation API が低品質のアドレスを示すために返す特定のシグナルについては、検証ロジックの構築に関するドキュメントの住所を修正するをご覧ください。

Address Validation API からのレスポンスで無効な住所が示された場合は、住所入力フォームにお客様をリダイレクトして、入力されたデータを確認してもらいます。住所が修正されたら、サービスは Address Validation API に再送信して、修正が有効であることを確認する必要があります。

addressComponents レベルで返されるシグナルを使用して、特定のアドレス行のエラーをハイライト表示することもできます。右側のスクリーンショットに例を示します。


確認

画像

このセクションでは、住所を確認する方法について説明します。Address Validation API が住所の確認が必要であることを示すために返す特定のシグナルについては、検証ロジックの構築に関するドキュメントの住所を確認するをご覧ください。

システムでは、ユーザーにアドレスの確認を求めることがよくあります。たとえば、お客様が都市名を誤って入力した場合、Address Validation API によって修正されます。この修正については、お客様に確認する必要があります。これは、API によって行われた変更が、元々入力された内容を根本的に変更する可能性があるためです。

インタースティシャル モーダルを使用してお客様に情報を表示し、次の 3 つのオプションから続行できるようにします。

  1. API から返された住所を確認し、修正された住所を使用して購入手続きを続行します。
  2. Address Validation API による修正を無視して、最初に入力された住所を選択します。購入手続きは通常どおり続行できます。プロセスで許可されている場合は、配送前に注文にフラグを設定して、後続の審査を行うことができます。
  3. お客様がモーダルをキャンセルまたは終了すると、決済プロセスの住所入力段階に戻り、最初から住所を再入力してプロセスをやり直すことができます。

右側のスクリーンショットに例を示します。


同意する

このセクションでは、アドレスを受け入れる方法について説明します。Address Validation API が住所の品質が良好で受け入れるべきであることを示すために返す特定のシグナルについては、検証ロジックの構築に関するドキュメントの住所を受け入れるをご覧ください。

このシナリオでは、住所の品質に関するメッセージがお客様に表示されることなく、決済プロセスが次のステージ(おそらく支払い情報の取得)に進む必要があります。API は、お客様が入力した住所が品質が高く、配達可能であることを確認しました。

Address Validation API から返された住所データは、注文に対して使用することをおすすめします。このデータには、次のような軽微な修正や追加が含まれている可能性があるためです。

  • 大文字 / 小文字
  • 書式設定の修正(例:
    • Street を St に
    • 住所コンポーネントの正しい順序
  • 米国の ZIP+4。

実装に関する注意事項

住所の受け入れロジックを構築する際は、無効な住所を入力したために購入手続きができないという事態にならないように実装してください。API がエントリが無効であることを繰り返し示す場合に、無限ループが発生しないようにロジックを構築します。

Google では、お客様に住所を入力する機会を 2 回まで提供し、2 回目の試行では、検証に失敗した場合でも入力を受け付けることをおすすめします。2 回目の試行では、検証に関係なく続行できるようにすることが目標です。

再試行を許可する 2 つの方法を以下に示します。

  • 強制続行: 住所が検証されないことを説明するモーダルをお客様に表示し、入力した住所で続行するオプションを許可します。
  • Silent Acceptance: アドレスが完全に検証されなくても、確認手順なしで 2 回目の試行を自動的に受け入れます。

可能であれば、検証されない住所にフラグを設定するようにシステムを設計し、注文の発送前にカスタマー サービス担当者が確認できるようにします。この追加の対策により、間違いを確実に検出できます。

新築の建設は、このチェックが推奨される理由をよく示しています。新しい建物の建設が完了してから、その建物の住所が郵便番号データベースに登録されるまでには、タイムラグが生じることがあります。入力した住所が検証されなくても、お客様が入力した住所でチェックアウト ページを強制的に続行できるオプションが必要です。

チェックアウト セッションが完了したら、必要に応じて provideValidationFeedback メソッドを使用して、特定のアドレス検証の試行に関するフィードバックを Google に送信します。

まとめ

このドキュメントでは、Google マップでオートコンプリート、住所の検証、視覚的な確認を実装する購入手続きフローの概要について説明しました。このドキュメントを参考に、推奨される住所入力フローに沿って実装を設計してください。

次のステップ

確実な住所で購入手続き、配送、オペレーションを改善する ホワイトペーパーをダウンロードし、Address Validation で購入手続き、配送、オペレーションを改善する ウェビナーをご覧ください。

参考資料:

寄稿者

Henrik Valve | ソリューション エンジニア
Thomas Anglaret | ソリューション エンジニア
Sarthak Ganguly | ソリューション エンジニア


  1. 米国郵政公社の非独占的なライセンシー。CASS™、USPS®、DPV® の各商標は米国郵政公社が所有し、許諾を得て使用しています。