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

Обзор

Покупки в интернете стали неотъемлемой частью нашей жизни. При этом что бы ни заказывал пользователь: экспресс-доставку товаров, такси или праздничный обед, – он всегда ожидает, что оформление заказа будет простым и удобным.

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

Из этой статьи вы узнаете, как добавить подсказки, чтобы упростить оформление покупки.

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

Включение API

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

• Maps JavaScript API
• Places API
• Maps Static API

Подробная информация о настройке приводится в статье Начало работы с платформой Google Карт.

Рекомендации

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

• check_circle_filled Флажком отмечены самые важные.
• stars Звездочкой отмечены полезные, но необязательные функции.

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

Подключение сервиса Place Autocomplete к корзине покупок позволяет:

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

Когда пользователь начнет вводить адрес в поле с автозаполнением, он увидит список вариантов:

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

Как начать работу с Place Autocomplete

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

Вы можете включить на сайте Maps 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>

И наконец, инициализируйте сервис Autocomplete и свяжите его с текстовым полем, о котором говорилось выше.

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

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

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

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

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

Как начать работу с Maps Static API

Вы можете использовать вызов веб-сервиса, чтобы обращаться к Maps Static API, который будет создавать изображение карты с заданными параметрами. Для статической карты, как и для динамической карты, можно указывать тип карты, использовать облачные стили и отмечать местоположения маркерами.

Приведенный ниже вызов позволяет показать дорожную карту 600 x 300 пикселей, центрированную по зданию 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 Разрешите указание адреса на основе названия компании или объекта инфраструктуры. Подсказки доступны не только для адресов, но также для названий организаций и ориентиров. После того как пользователь введет название компании, вы сможете получить адрес, выполнив вызов информация о местах. Чтобы пользователи могли вводить как адреса, так и названия организаций, удалите свойство types из определения Autocomplete.
• stars Настройте внешний вид поля автозаполнения мест в соответствии со стилем вашего веб-сайта. Для виджета автозаполнения можно выбрать стиль, соответствующий стилю корзины покупок. Вы можете использовать классы CSS, чтобы настроить внешний вид виджета. Подробнее о том, как настроить стиль поля с автозаполнением…
• stars Создайте собственный интерфейс. Если вы хотите создать собственный интерфейс вместо интерфейса Google, вызовите сервис автозаполнения мест программно, чтобы получить подсказки для заданного ввода. Вам доступны программное получение подсказок Place Autocomplete (JavaScript, Android, iOS) и вызов API веб-сервисов напрямую через Places API.