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

Обзор

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

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

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

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

Включение API

Чтобы реализовать Checkout, необходимо включить следующие API в Google Cloud Console:

• API JavaScript Карт
• API мест
• Статический API карт

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

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

Ниже приведены советы и настройки, которые мы рассмотрим в этой теме.

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

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

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

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

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

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

Начало работы с автозаполнением мест

Чтобы включить Place Autcomplete на свой сайт, потребуется всего пара строк кода JavaScript.

Самый простой способ — включить API JavaScript Карт (даже если вы не отображаете карту) на свой сайт и указать библиотеку 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

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

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

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

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

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

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

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

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

Начало работы с Maps Static API

Вы можете использовать Maps Static 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
      

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

Это станет изображением, как показано ниже:

Дополнительную информацию о параметрах Maps Static API можно найти в документации .

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

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