Guia de implementação de finalização da compra

Visão geral

Os pedidos e compras on-line se tornaram uma parte vital das nossas vidas. Seja com serviços de entrega no mesmo dia, reserva de táxi ou pedidos de comida, os clientes esperam um processo descomplicado de finalização da compra.

No entanto, em todos esses aplicativos, inserir o endereço de cobrança ou entrega continua sendo um processo demorado e difícil. Uma experiência de finalização de compra simples é cada vez mais importante no mundo móvel, já que digitar texto em uma tela pequena pode ser frustrante e mais uma barreira para a conversão do cliente.

Neste documento, descrevemos as orientações de implementação para oferecer aos clientes um processo mais rápido, com inserção de endereço preditiva.

O diagrama abaixo mostra as principais APIs envolvidas na implementação da finalização da compra. Clique no diagrama para ampliar.

Ativando APIs

Para implementar a finalização da compra, você precisa ativar as seguintes APIs no console do Google Cloud:

• API Maps JavaScript
• API Places
• API Maps Static

Para mais detalhes sobre a configuração, consulte Como começar a usar a Plataforma Google Maps.

Seções práticas

As seções a seguir abordam dicas e personalizações para ajudar você a melhorar o processo de finalização da compra.

• check_circle_filled O ícone de marca de seleção indica uma prática importante.
• stars A personalização dos itens com ícone de estrela é opcional, mas é recomendável fazer isso para melhorar a solução.

Com o Place Autocomplete, é possível simplificar a inserção dos endereços no seu aplicativo, aumentando as taxas de conversão e otimizando a experiência para os clientes. O Autocomplete oferece um campo de entrada único e rápido com sugestões de endereço, que pode ser usado para preencher automaticamente um formulário de endereço de cobrança ou entrega.

Ao incorporar o Place Autocomplete no seu carrinho de compras on-line, é possível fazer o seguinte:

• Reduzir erros de inserção de endereço.
• Diminuir o número de etapas no processo de finalização da compra.
• Simplificar a experiência de inserção de endereço nos dispositivos móveis e wearable.
• Permitir que o cliente pressione menos teclas e leve menos tempo para fazer um pedido.

Quando o usuário seleciona a caixa de entrada do Autocomplete e começa a digitar, uma lista de sugestões de endereço aparece:

Quando o usuário seleciona um endereço da lista de sugestões, é possível usar a resposta para confirmar o endereço e saber qual é a localização. Então, seu aplicativo pode preencher os campos corretos do formulário de inserção de endereço:

Começar a usar o Place Autocomplete

É possível incorporar o Place Autocomplete ao seu site com algumas linhas de JavaScript.

Você pode incluir a API Maps JavaScript no seu site e especificar a biblioteca Places, mesmo que não esteja mostrando um mapa. O exemplo a seguir mostra como fazer isso e executar a função de inicialização.

<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>

Em seguida, adicione uma caixa de texto à sua página para permitir a entrada do usuário:

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

Por último, inicialize e vincule o serviço Autocomplete à caixa de texto nomeada:

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);
}

No exemplo anterior, o listener de eventos place_changed foi acionado quando o usuário selecionou uma sugestão de endereço e a função fillInAddress foi executada. A função, conforme mostrada no exemplo a seguir, extrai componentes de endereço da resposta selecionada para vê-los em um formulário.

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

Assim que tiver esses dados, eles poderão ser usados como o endereço correspondente para seu usuário. Com apenas algumas linhas de código, você garante que o cliente insira o endereço correto em pouco tempo.

Veja uma demonstração ativa e um código-fonte completo para preencher um formulário de inserção de endereço neste exemplo de código.

Considerações ao implementar o Place Autocomplete

O Place Autocomplete oferece várias opções para personalizar sua implementação se você quiser usar algo além do widget. É possível usar uma combinação de serviços para corresponder locais com precisão.

• No caso de um formulário de endereço, defina o parâmetro types como address para restringir as correspondências aos endereços completos. Saiba mais sobre os tipos compatíveis nas solicitações do Place Autocomplete.
• Defina as restrições e as polarizações apropriadas, caso não precise pesquisar em âmbito global. É possível usar vários parâmetros para polarizar ou restringir as correspondências a regiões específicas.
  • Use bounds para definir limites retangulares e restringir uma área. Use strictBounds para garantir que somente endereços dessas áreas sejam retornados.
  • Use componentRestrictions para restringir as respostas a um determinado conjunto de países.
• Deixe os campos editáveis caso alguns deles fiquem fora da correspondência e para permitir que os clientes atualizem o endereço, se necessário. Como a maioria dos endereços retornados pelo Place Autocomplete não contém números de um sublocal (como apartamento, conjunto ou unidade), esse exemplo muda o foco para a linha de endereço 2, incentivando o usuário a preencher essas informações, se necessário.

Depois que o cliente inserir o endereço, mostre uma confirmação visual do local de entrega ou retirada com um mapa estático. Isso dá ao cliente uma garantia a mais de que o endereço está correto e reduz erros na entrega/retirada. É possível mostrar o mapa estático na página de inserção do endereço ou incluí-lo no e-mail de confirmação após a conclusão da transação.

É possível implementar esses dois casos de uso com a API Maps Static, que adiciona uma versão de imagem do mapa a qualquer tag de imagem em uma página ou e-mail.

Como começar a usar a API Maps Static

Você pode usar a API Maps Static com uma chamada de serviço da Web, que cria uma versão de imagem de um mapa com base nos parâmetros especificados. Assim como o mapa dinâmico, é possível especificar o tipo de mapa, usar os mesmos estilos baseados na nuvem e adicionar marcadores para distinguir o local.

A seguinte chamada mostra um mapa, com tamanho de 600 x 300 px, centralizado no Googleplex em Mountain View, Califórnia, com nível de zoom 13. Ela também especifica um marcador azul para o local de entrega e um estilo de mapa on-line.

      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
      

Ela se divide nas seguintes seções:

A solicitação retorna a seguinte imagem:

Para mais informações sobre as opções da API Maps Static, consulte a documentação.

Você pode melhorar ainda mais a experiência dos seus clientes aproveitando as vantagens de alguns recursos avançados que o Place Autocomplete oferece. Veja algumas dicas para melhorar sua caixa de inserção de endereço do Autocomplete:

• stars Permita que os usuários insiram um endereço com base no nome da empresa ou do ponto de interesse. O serviço de sugestão não funciona apenas para endereços. Você também pode permitir que nomes de empresas e pontos de referência sejam inseridos. Depois que a pessoa digita o nome de uma empresa, é possível recuperar o endereço com uma chamada para o Place Details. Para permitir que os endereços e os nomes de estabelecimentos sejam inseridos, remova a propriedade types da definição do Autocomplete.
• stars Personalize a caixa do Place Autocomplete de acordo com o estilo do seu site. Você também pode estilizar o widget do Autocomplete para que ele combine com seu carrinho de compras. É possível usar classes CSS para personalizar a aparência do widget. Para mais informações, consulte Preenchimento automático de estilo.
• stars Crie uma interface personalizada. Se você quiser criar uma interface personalizada em vez de usar a projetada pelo Google, chame o serviço Place Autocomplete de forma programática para recuperar previsões para uma determinada entrada. Você pode extrair as sugestões do Place Autocomplete de forma programática em JavaScript, Android e iOS, além de chamar a API Web Services diretamente pela API Places.