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

目標

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

前提条件

Google では、次の知識があることを前提としています。

住所検証とは

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

購入手続きで住所検証が必要な理由

注文プロセス中に正確な住所を収集する:
これは、配送の成功を促進し、期日内のフルフィルメントを増やし、費用のかかる住所修正料金を削減するための重要なステップです。

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

実装の概要

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

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

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

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

住所入力フォームの最初の行で JavaScript API を使用して Place Autocomplete を実装します。

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

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

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

イメージ

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

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

すべてのトランザクションで Address Validation API を呼び出すことをおすすめします。

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

イメージ

住所の受け入れシナリオについては、後で説明します。

ステップ 3: 視覚的な確認を提供する

住所の入力後に、地図上に表示して、お客様に配送先の住所を視覚的に確認できるようにします。これにより、お客様は住所が正しいことを重ねて確認できるため、配達ミスや受け取りミスが減ります。

地図は、購入手続き中に表示することも、トランザクション確認メールに含めて送信することもできます。どちらの場合も、次の API を使用して実現できます。

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

詳細 - 住所の受け入れシナリオ

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

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

このコンセプトについては、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 回目の試行を受け入れる方法として、次の 2 つの方法が考えられます。

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

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

このチェックをおすすめする理由として、新しい建物の建設が挙げられます。新しい建物の建設が完了してから、その建物の住所が郵便住所データベースに入力されるまでに時間がかかることがあります。検証に合格しなくても、入力した住所で購入手続きページを強制的に続行できるオプションをお客様に提供する必要があります。

購入手続きセッションが完了したら、必要に応じて provideValidationFeedback メソッドを使用して、特定の住所検証の試行に関するフィードバックを Google に送信します。

まとめ

このドキュメントでは、Google マップで予測入力、Address Validation、視覚的な確認を実装する購入手続きのフローの概要について説明しました。このドキュメントを実装の出発点として、推奨される住所入力フローに沿って設計してください。

次のステップ

さらに詳しく学習するには、次のドキュメントをご覧ください。

コントリビューター

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

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