AI要約
フォームに入力するユーザーの場所について、さらに詳しく知りたいですか？ WPFormsジオロケーションアドオンを使用すると、各リードの地理的データを簡単に収集できます。
このチュートリアルでは、WPFormsのジオロケーションアドオンのインストールと使用方法を説明します。
要件:
- ジオロケーションアドオンにアクセスするには、Proライセンスレベル以上が必要です
- ジオロケーションアドオンの最小必要バージョンを満たすために、WPFormsの最新バージョンがインストールされていることを確認してください
ジオロケーションアドオンの設定
開始する前に、まずWPFormsがWordPressサイトにインストールされ、有効化されていることを確認する必要があります。
WPFormsをインストールし、ライセンスが検証されると、ジオロケーションアドオンをすばやくインストールして有効化できます。
アドオンを有効化した後、WPForms » 設定に移動し、ジオロケーションタブを選択して設定を構成できます。
ここから、ジオロケーション情報を取得したいプロバイダーを選択するオプションがあります。
注意: 場所プロバイダーオプションでなしを選択すると、フォームでの場所データの保存が無効になります。
次のセクションでは、Google PlacesおよびMapbox Search APIの設定方法について説明します。
Google Places API
注意: Google Placesでは、サイトにSSL証明書（HTTPS経由で読み込まれる）が必要です。サイトのSSL証明書の取得方法について詳しくは、WPBeginnerの無料SSL証明書の取得方法ガイドをご覧ください。
まず、ジオロケーションセクションのオプションリストからGoogle Placesを選択します。
Google Placesオプションを選択すると、追加の設定が表示されます。提供されたフィールドに入力するために、Google Places APIキーを取得する必要があります。これを行うには、新しいブラウザタブまたはウィンドウでGoogle Cloud Consoleを開きます。
Google Places APIキーの生成
Google Cloudダッシュボードの上部にある、このAPIキーを有効にしたいプロジェクトをプロジェクトを選択メニューから選択します。
以前にプロジェクトを作成していない場合は、新しいプロジェクトをクリックして設定します。
プロジェクトを開くと、そのAPIとサービスダッシュボードにリダイレクトされるはずです。そうでない場合は、画面左上のハンバーガーメニューを開き、APIとサービス » 有効なAPIとサービスに移動します。
次に、+ APIS AND SERVICES を有効にするをクリックします。
これにより API ライブラリが開きます。次の API を検索して有効にします。
- Places API
- Maps JavaScript API
- Geocoding API
プロジェクトで API を有効にするには、その名前の下にある青い ENABLE ボタンをクリックするだけです。
3 つの API をすべて有効にした後、左側のメニューから APIs & Services » Credentials に移動して、Credentials 設定に移動します。ここで、+ CREATE CREDENTIALS をクリックし、API key オプションを選択して API キーを生成します。
新しい API キーが表示されるポップアップ ウィンドウで、Edit API key をクリックします。
次の画面で、次のオプションを設定する必要があります。
アプリケーションの制限を設定する
API キーを WPForms で使用できるようにするには、Websites オプションを選択する必要があります。
ウェブサイトの制限
キーをウェブサイトで使用できるようにしたら、セキュリティ上の理由から、どのドメインがそれを使用できるかを制限することをお勧めします。これを行うには、ウェブサイトの制限セクションにある + ADD をクリックします。
次に、提供されたフィールドにウェブサイトのドメインを入力します。キーをドメイン全体で使用できるようにしたい場合は、末尾にスラッシュ (/) とアスタリスク (*) を付けて入力します。
サイト全体または複数のサイトでキーを有効にするために、必要なだけ項目を追加できます。
注意: サイトでサブドメインを使用している場合は、ウェブサイトの制限に .example.com/ を項目として追加して、すべてのサブドメインでキーを使用できるようにします。
API の制限
アプリケーションとウェブサイトでキーを制限したら、API でキーを制限する必要があります。これを行うには、Restrict key オプションを選択します。
これによりドロップダウンが表示され、キーを制限する特定の API を選択する必要があります。
このドロップダウンから、次の API を選択します。
- Places API
- Maps JavaScript API
- Geocoding API
これらの API を選択したら、Save ボタンをクリックして設定を保存します。
Google Places API キーのコピー
設定を保存すると、利用可能なすべての API キーの概要にリダイレクトされます。キーを表示するには、Actions 見出しの下にある SHOW KEY オプションをクリックします。
API キーが表示されるポップアップ ウィンドウが表示されます。ここで、コピー アイコンをクリックしてキーをコピーし、WPForms 設定に戻ります。
WPForms 設定に戻り、コピーした API キーを API Key フィールドに貼り付けて、設定を保存します。
ユーザーの位置情報でフォームを事前入力したい場合は、Current Location オプションを ON の位置に切り替えます。
これでGoogle Places APIの設定に必要なすべてが揃いました。次のセクションでは、地理情報データを提供するもう一つの優れた選択肢であるMapboxプロバイダーの使用方法について説明します。
Mapbox Search API
Mapbox Search APIの設定を開始するには、[Geolocation]セクションの下のオプションリストから[Mapbox Search]を選択します。
注意: ユーザーがMapboxマップと対話できるようにするJavaScriptフレームワークのセットであるMapbox Search JSは、現在パブリックベータ段階にあります。ベータ段階中、Mapboxの住所自動入力および検索機能は、変更される可能性があります。
Mapbox Search APIオプションを選択すると、追加の設定が表示されます。Mapbox Searchアクセストークンを作成する必要があります。これを行うには、まずMapboxアカウントダッシュボードにログインする必要があります。
アカウントダッシュボードにアクセスしたら、ナビゲーションバーを見つけて[Tokens]をクリックします。
これにより、トークンを追加および管理できるアクセストークンページに移動します。
Mapboxはデフォルトのアクセストークンを提供しますが、WPForms専用に使用できる新しいトークンを作成することをお勧めします。これを行うには、[Create a token]ボタンをクリックします。
このボタンをクリックすると、新しいアクセストークンを作成できる新しいページに移動します。[Token name]セクションの下にある[Name]フィールドを見つけて、プロジェクトに関連付けるのに役立つラベルを入力します。
次に、[Token scopes]セクションまでスクロールします。ここでは、デフォルトで選択されているさまざまなパブリックスコープが表示されます。このセクションはそのままにしておいてください。
次に、[Token restrictions]セクションまでスクロールし、[URL]フィールドにサイトのURLを入力します。
URLを入力したら、[Add URL]ボタンをクリックしてURLを追加します。
必要なフィールドに入力したら、[Create token]ボタンをクリックします。
次に、アカウントのパスワードを確認するモーダルウィンドウが表示されます。パスワードを入力して[Submit]をクリックします。
これでアクセストークンページにリダイレクトされ、作成したばかりの新しいトークンが表示されます。コピーアイコンをクリックしてトークンをコピーします。
アクセストークンをコピーしたら、WPFormsの設定に戻り、トークンを[Access Token]フィールドに貼り付けます。
フォームにユーザーの場所を事前入力したい場合は、[Current Location]オプションをオンにします。
完了したら、必ず設定を保存してください。
注意: 設定を保存すると、ブラウザで位置情報の共有を求めるプロンプトが表示される場合があります。Mapboxに現在地を検出させたい場合は、位置情報の共有に同意する必要があります。
次に、マップのプレビューが表示されます。位置情報の共有を選択した場合、マップ上に現在地が表示されます。
次のセクションでは、フォームに住所の自動入力を追加する方法について説明します。
フォームへの住所自動入力の追加
Geolocationの設定を構成したら、フォームでGeolocationアドオンの自動入力機能を有効にすることができます。
これを行うには、まず新しいフォームを作成するか、既存のフォームを編集する必要があります。次に、フォームビルダーで、住所フィールドまたは一行テキストフィールドのいずれかを追加します。
住所を複数行で表示したい場合は、住所フィールドを選択します。
住所を一行で表示したい場合は、一行テキストフィールドを選択します。
次に、住所または一行テキストフィールドのフィールドオプションパネルを開き、詳細設定タブをクリックして追加の設定を開きます。ここから、住所の自動入力を有効にするオプションを選択することで、住所の自動入力をオンにできます。
必要に応じて、マップを表示オプションを選択することで、サイトのフロントエンドにインタラクティブなマップを表示することもできます。これにより、マップをフォームフィールドの上または下に表示するかを選択できるドロップダウンが表示されます。
すべて設定したら、フォームを保存してください。
マップと住所の自動入力オプションが有効になっている場合の、マップと住所の自動入力オプションが有効になっている場合の、フォームがフロントエンドでどのように表示されるかの例を次に示します。
マップフィールドの使用
WPFormsのマップフィールドを使用すると、フォーム内のインタラクティブマップに特定の場所を表示できます。フォームを送信するユーザーの位置情報を収集する住所フィールドとは異なり、マップフィールドは、オフィス住所、店舗の場所、またはピックアップポイントなど、設定した場所を表示します。この機能は、複数のビジネスの場所を紹介したり、ユーザーが特定のサービスエリアを特定するのに役立ちます。
場所の追加、マーカーのカスタマイズ、詳細設定の構成、複数の場所の処理に関する詳細な手順については、WPFormsのマップフィールドの使用に関する包括的なガイドを参照してください。
エントリー場所データの表示
エントリのジオロケーションデータを確認するには、WPForms » エントリに移動し、ジオロケーションの詳細を確認したいフォームを選択します。次に、個々のエントリのページを開くには、表示をクリックします。
インタラクティブマップに加えて、ユーザーの都市、州、国、郵便番号、およびユーザーの町の近似緯度と経度の座標などの詳細が表示されます。
フォーム通知メールにジオロケーションデータを含める
必要に応じて、フォームの自動通知メールにジオロケーションデータを含めることもできます。
注意：非常に大規模なウェブサイトや、大量のフォーム送信がある場合は、通知メールにジオロケーションデータを含めることは推奨されません。サーバーの速度に影響を与える可能性があるためです。
これを設定するには、フォームビルダーを開き、設定 » 通知に移動します。次に、メールメッセージセクションまでスクロールし、{entry_geolocation}スマートタグを追加します。
通知メールが送信されると、ユーザーの位置情報が含まれます。
これで完了です！ユーザーについてさらに詳しく知るために、ジオロケーションデータを収集する方法がわかりました。
次に、ユーザーのフォームの選択に応じて、異なる通知メールを送信したいですか？方法については、条件付きフォーム通知に関するチュートリアルをご覧ください。