Эта страница переведена с помощью Cloud Translation API.

Руководство по настройке процесса покупки

Обзор

веб iOS API

Платформа Google Maps доступна для веб-приложений (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, маршрутах и расстояниях. Примеры в этом руководстве написаны для одной платформы, но для реализации на других платформах предоставлены ссылки на документацию.

Создайте прямо сейчас!

Инструмент Quick Builder в консоли Google Cloud позволяет создавать автозаполнение адресных форм с помощью интерактивного пользовательского интерфейса, который генерирует для вас код JavaScript.

Онлайн-шопинг и заказы товаров стали неотъемлемой частью нашей жизни. От доставки в тот же день до заказа такси или ужина — покупатели ожидают простого и удобного процесса оформления заказа.

Однако во всех этих приложениях ввод адреса для выставления счетов или доставки остается одним из препятствий на пути оформления заказа, который может быть как трудоемким, так и неудобным. Беспроблемный процесс оформления заказа становится еще более важным в мобильном мире, где сложный ввод текста на маленьком экране может вызывать разочарование и являться еще одним барьером для конверсии клиентов.

В этом документе представлены рекомендации по внедрению функции автоматического ввода адреса, которая поможет вашим клиентам ускорить процесс оформления заказа.

На следующей диаграмме показаны основные API, используемые при реализации оформления заказа. Щелкните по диаграмме, чтобы увеличить ее.

Включение API

Для внедрения Checkout необходимо включить следующие API в консоли Google Cloud:

Для получения дополнительной информации о настройке см. раздел «Начало работы с платформой Google Maps» .

Разделы практики

В следующих разделах представлены советы и варианты настройки, которые помогут вам улучшить процесс оформления заказа.

Значок галочки является ключевым элементом практики.
Значок звезды — это необязательная, но рекомендуемая настройка для улучшения решения.

	Добавление автозаполнения в поля ввода	Автоматическое заполнение адресной формы. Добавьте функцию ввода текста по мере необходимости, чтобы улучшить пользовательский опыт на всех платформах и повысить точность адресов с минимальным количеством нажатий клавиш.
	Обеспечьте визуальное подтверждение с помощью статического API карт.	Определите координаты широты и долготы для заданного адреса (геокодирование) или преобразуйте координаты широты и долготы географического местоположения в адрес (обратное геокодирование).
	Советы по дальнейшему улучшению процесса оформления заказа	Используйте расширенные функции автозаполнения, чтобы сделать процесс оформления заказа еще более удобным.

Примечание: Для отслеживания использования примеров кода решений и повышения их качества Google включает параметр запроса solution_channel в вызовы API в примерах кода, представленных на этой странице. Чтобы отказаться от этого, удалите параметр запроса solution_channel из примера кода. Дополнительную информацию см. в разделе «Параметр решений Google Maps Platform» .

Добавление автозаполнения в поля ввода

В этом примере используются: библиотека Places, JavaScript API для работы с картами.

Также доступно: Android | iOS

Функция автозаполнения Place Autocomplete может упростить ввод адреса в вашем приложении, что приведет к повышению коэффициента конверсии и обеспечит удобство использования для ваших клиентов. Автозаполнение предоставляет одно поле для быстрого ввода с функцией автозаполнения, которая может использоваться для автоматического заполнения формы платежного или почтового адреса.

Включив функцию автозаполнения полей в корзину онлайн-покупок, вы сможете:

Сократите количество ошибок при вводе адресов.
Сократите количество шагов в процессе оформления заказа.
Упростите ввод адреса на мобильных или носимых устройствах.
Значительно сократить количество нажатий клавиш и общее время, необходимое клиенту для оформления заказа.

Когда пользователь выбирает поле ввода «Автозаполнение» и начинает печатать, появляется список вариантов адреса:

Когда пользователь выбирает адрес из списка вариантов, вы можете использовать полученный ответ для проверки адреса и определения местоположения. Затем ваше приложение может заполнить соответствующие поля формы ввода адреса:

Видео: Улучшите формы адресов с помощью функции автозаполнения мест:

Адресные формы

Веб

Android

iOS

Начало работы с функцией автозаполнения мест

Вы можете интегрировать функцию автозаполнения полей на свой сайт, используя всего несколько строк кода JavaScript.

Вы можете добавить JavaScript API для работы с картами на свой сайт и указать библиотеку Places, даже если карта не отображается. В следующем примере показано, как это сделать и выполнить функцию инициализации.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>

Далее добавьте на страницу текстовое поле для ввода данных пользователем:

<input id="autocomplete" placeholder="Enter your address"></input>

Наконец, инициализируйте службу автозаполнения и свяжите её с текстовым полем, указанным в названии:

function initAutocomplete() {
  // Create the autocomplete object, restricting the search predictions to
  // addresses in the US and Canada.
  autocomplete = new google.maps.places.Autocomplete(address1Field, {
    componentRestrictions: { country: ["us", "ca"] },
    fields: ["address_components", "geometry"],
    types: ["address"],
  });
  address1Field.focus();
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener("place_changed", fillInAddress);
}

В предыдущем примере обработчик события place_changed срабатывает, когда пользователь выбирает предполагаемый адрес, и выполняется функция fillInAddress . Эта функция, как показано в следующем примере, принимает выбранный ответ и извлекает компоненты адреса для визуализации в форме.

Машинопись

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}index.ts

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;
index.js

Получив эти данные, вы можете использовать их в качестве соответствующего адреса для вашего пользователя. С помощью нескольких строк кода вы можете гарантировать, что клиент введет правильный адрес за короткое время.

В этом примере кода вы можете увидеть работающую демонстрацию и полный исходный код для заполнения формы ввода адреса.

Что следует учитывать при внедрении функции автозаполнения мест?

Функция автозаполнения мест предлагает несколько вариантов, позволяющих настроить ее работу, если вы хотите использовать не только виджет. Вы можете использовать комбинацию сервисов для точного сопоставления местоположений.

Для формы ввода адреса установите параметр types в address , чтобы ограничить поиск только полными адресами улиц. Подробнее о поддерживаемых типах см. в разделе «Запросы автозаполнения» .
Установите соответствующие ограничения и параметры, если вам не требуется поиск по всему миру. Вы можете использовать несколько параметров для смещения или ограничения результатов поиска определенными регионами.
- Используйте bounds для установки прямоугольных границ области. Используйте strictBounds , чтобы гарантировать возврат только адресов, находящихся в этих областях.
- Используйте componentRestrictions , чтобы ограничить доступ к ответам для определенного набора стран.
Оставьте поля редактируемыми на случай, если некоторые поля будут пропущены при сопоставлении, и позвольте клиентам обновлять адрес при необходимости. Поскольку большинство адресов, возвращаемых функцией автозаполнения, не содержат номеров подобъектов, таких как номера квартир, офисов или помещений, в этом примере фокус смещается на строку адреса 2, чтобы побудить пользователя заполнить эту информацию при необходимости.

Обеспечьте визуальное подтверждение с помощью статического API карт.

После того, как клиент введёт свой адрес, предоставьте визуальное подтверждение места доставки или получения с помощью статической карты. Это даст клиенту дополнительную уверенность в правильности адреса и уменьшит количество неудачных доставок или заборов. Вы можете отобразить статическую карту на странице ввода адреса или включить её в подтверждающее электронное письмо после завершения транзакции.

Оба этих варианта использования можно реализовать с помощью Maps Static API , который добавляет графическую версию карты к любому тегу изображения на странице или в электронном письме.

Начало работы с API статических карт

Вы можете использовать API статических карт через вызов веб-сервиса, который создаст графическую версию карты на основе указанных вами параметров. Как и в случае с динамической картой, вы можете указать тип карты, использовать те же облачные стили и добавить маркеры для обозначения местоположения.

На приведенном ниже изображении показана дорожная карта размером 600x300 пикселей, центрированная на комплексе Googleplex в Маунтин-Вью, штат Калифорния, при уровне масштабирования 13. Также указан синий маркер места доставки и стиль онлайн-карты.

      https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
      &zoom=13
      &size=600x300
      &maptype=roadmap
      &markers=color:blue%7Clabel:S%7C37.422177,-122.084082
      &map_id=8f348d1b5a61d4bb
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_checkout_v1_a

Это можно разделить на следующие разделы:

URL API	https://maps.googleapis.com/maps/api/staticmap?
центр карты	центр = 37,422177, -122,084082
уровень масштабирования	масштабирование=13
размер изображения	размер=600x300
тип карты	maptype=roadmap
маркеры местоположения магазина	markers=color:blue%7Clabel:C%7C37.422177,-122.084082
стиль облачной карты	map_id=8f348d1b5a61d4bb
Ключ API	ключ = ВАШ_API_КЛЮЧ
Параметр канала решения . Для получения дополнительной информации см. документацию по параметрам .	solution_channel=GMP_guides_checkout_v1_a

В результате запроса возвращается следующее изображение:

Для получения дополнительной информации о параметрах статического API карт см. документацию .

Советы по дальнейшему улучшению процесса оформления заказа

Вы можете еще больше улучшить взаимодействие с клиентами, воспользовавшись некоторыми расширенными функциями, которые предлагает Place Autocomplete. Вот несколько советов по улучшению поля ввода адреса с автозаполнением:

автозаполнения позволяет пользователям вводить адрес на основе названия компании или достопримечательности. Сервис автозаполнения работает не только для адресов, но вы также можете разрешить ввод названий компаний или достопримечательностей. После того, как пользователь введет название компании, вы можете получить адрес, вызвав функцию « Подробная информация о месте» . Чтобы разрешить ввод как адресов, так и названий учреждений, удалите свойство types из определения автозаполнения.
внешний вид поля автозаполнения «Разместить» в соответствии со стилем вашего сайта. Вы также можете настроить виджет автозаполнения в соответствии со стилем вашей корзины покупок. Для настройки внешнего вида виджета можно использовать классы CSS. Дополнительную информацию см. в разделе «Стиль автозаполнения» .
собственный пользовательский интерфейс. Если вы хотите создать собственный интерфейс вместо использования интерфейса, разработанного Google, вызовите сервис Place Autocomplete программным способом, чтобы получить прогнозы для заданного поля ввода. Вы можете получать прогнозы Place Autocomplete программным способом в JavaScript , Android и iOS , а также напрямую вызывая API веб-сервисов через Places API .