Preenchimento automático de endereço (Google Maps)

Com o preenchimento automático de endereço, o Sami B2B Onboarding mostra as sugestões de endereço do Google assim que a pessoa compradora começa a digitar a rua. Ao escolher uma sugestão, o restante do endereço é preenchido. As pessoas terminam o formulário mais rápido, e o local da empresa que o app cria na Shopify recebe um endereço correto.

Você adiciona uma chave do Google Maps para a loja. Cada formulário ativa ou desativa o preenchimento automático.

Nota

Antes de começar, você precisa de uma conta do Google Cloud com o faturamento configurado. O Google exige isso para liberar o uso das APIs do Maps.

Crie uma chave de navegador no Google Cloud

1. Escolha um projeto

   Abra o console do Google Cloud e crie um projeto ou escolha o que você quer usar.

2. Ative as APIs

   Em APIs & Services › Library, procure e ative Maps JavaScript API e depois Places API. A primeira carrega as sugestões na sua loja virtual. A segunda encontra os endereços.

3. Crie a chave

   Em APIs & Services › Credentials, clique em Create credentials › API key. Copie a chave. Ela começa com AIza.

4. Restrinja a chave à sua loja

   Abra as configurações da chave:

   1. Em Application restrictions, escolha Websites e adicione cada domínio pelo qual sua loja é acessada, por exemplo https://example.com/* e https://your-store.myshopify.com/*.
   2. Em API restrictions, escolha Restrict key e selecione Maps JavaScript API e Places API.
   3. Clique em Save.

Cuidado

A chave fica escrita na página da sua loja virtual, então qualquer pessoa pode lê-la ali. A restrição de site é o que impede que outra pessoa a use e aumente a sua conta do Google. O painel do app lembra você: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Adicione a chave e ative o recurso

1. Abra o painel Address autocomplete

   Acesse Forms e clique em Edit ao lado do formulário. Na barra lateral à esquerda, clique em Integrations. Em Connected apps, clique em Set up na linha Address autocomplete.

   O painel Address autocomplete é aberto com duas seções: Account e This form.

   

   Clique em Set up para adicionar sua chave; o painel explica qual campo recebe sugestões e lembra você de restringir a chave.

2. Cole a chave

   Em Account, clique em Set up. Na caixa de diálogo Address autocomplete, cole a chave em Maps API key e clique em Save. Você vê Keys saved, e a linha Account mostra a chave.

3. Ative

   Na parte inferior do painel, clique em Enable. O botão muda para Disable, e a linha Address autocomplete em Connected apps mostra Active. Se nenhuma chave foi salva ainda, um aviso diz Add your Maps API key first.

4. Salve o formulário

   Clique em Save na barra de salvamento. Você vê Form saved.

Quais campos são preenchidos

As sugestões aparecem em todos os campos mapeados para Address line 1 no painel Shopify do formulário. Como diz o painel, When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

Quando a pessoa escolhe uma sugestão, o app preenche os campos do mesmo endereço que estão mapeados para:

Mapeado para	Preenchido com
Address line 1	O número e o nome da rua
City	A cidade ou o município
State / province	O estado ou a província
ZIP / postal code	O CEP ou código postal
Country	O país

• Address line 2, Recipient e Phone ficam para a pessoa preencher.
• Os endereços de entrega e de cobrança são independentes. Escolher um endereço de entrega nunca altera os campos de cobrança.
• A pessoa ainda pode alterar qualquer campo que tenha sido preenchido.
• As sugestões aparecem no idioma da página da loja.

O formulário Wholesale application criado pelo app já mapeia esses campos para os dois endereços. Se você criar suas próprias perguntas de endereço, mapeie-as em Company location. Veja Mapeie respostas para a Shopify.

Teste na sua loja virtual

1. Abra o formulário

   Acesse Forms e clique em Copy link ao lado do formulário. Abra o link em uma janela privada do navegador.

2. Digite um endereço

   Em Shipping address, comece a digitar em Address line 1, por exemplo 123 Main Street. A lista de sugestões do Google é aberta abaixo do campo.

3. Escolha uma sugestão

   Clique em um endereço da lista. City, ZIP or postal code, Country e State or province são preenchidos com esse endereço.

Se nenhuma sugestão aparecer:

Verifique	O que fazer
A linha Address autocomplete mostra Active, e o formulário está salvo.	Clique em Enable no painel e depois em Save.
A restrição de site da chave inclui o domínio em que você está testando.	Sua loja responde no seu próprio domínio e no domínio myshopify.com. Adicione os dois no Google Cloud.
Maps JavaScript API e Places API estão ativadas, e o faturamento está configurado no projeto.	Ative-as em APIs & Services › Library.
O campo está mapeado para Address line 1.	Mapeie-o no painel Shopify, em Company location.

Desative o recurso

• Em um formulário: abra o painel Address autocomplete, clique em Disable e depois em Save.
• Em todos os formulários: em Account, clique em Change e depois em Remove keys. A caixa de diálogo avisa Every form in this store stops using Address autocomplete until you add keys again. Clique em Remove keys para confirmar.

Próximos passos

• Mapeie respostas para a Shopify — mapeie suas perguntas de endereço para que preencham o local da empresa.
• Crie seu formulário — adicione campos de endereço a um formulário.
• Captcha (reCAPTCHA, hCaptcha) — mantenha os robôs longe do mesmo formulário.