Guias

Adicione uma lista suspensa de países com o padrão definido pelo IP

Uma lista suspensa de países que vem preenchida com o que o endereço IP do visitante sugere poupa a maioria das pessoas de rolar uma lista longa, desde que ainda permita alterar a opção quando o padrão estiver errado.

Obtendo o valor padrão

Consulte o endereço IP do visitante no seu servidor quando a página for solicitada e leia o campo country_code da resposta para defini-lo como a opção selecionada da lista suspensa antes mesmo de a página ser enviada ao navegador.

GET /v1/ip?ip=192.0.2.15
{
  "status": "ok",
  "ip": "192.0.2.15",
  "version": 4,
  "found": true,
  "country": "Spain",
  "country_code": "ES",
  "region": "Madrid",
  "city": "Madrid",
  "postcode": "28001",
  "lat": 40.4168,
  "lon": -3.7038,
  "timezone": "Europe/Madrid",
  "asn": 5678,
  "org": "Example Networks"
}

Renderizando no servidor

Como tudo isso acontece no servidor, antes de renderizar a página, não há um piscar de um padrão errado seguido de uma correção no navegador, que é o que acontece com abordagens no lado do cliente que fazem a chamada depois que a página já carregou. Defina o atributo selected na opção correspondente diretamente no HTML que você gera, comparando o country_code com os códigos ISO que os valores das suas opções já usam.

Um segundo exemplo: preenchendo o campo de país no checkout

A mesma chamada funciona tão bem em uma página de checkout quanto em um formulário de cadastro. Consulte o IP do comprador uma vez quando a página de checkout carregar, compare o country_code com sua lista de países de entrega e selecione-o por padrão. Como o país de entrega afeta os impostos e as opções de entrega mostrados mais abaixo na página, acertar isso antes de a página ser renderizada evita um reflow incômodo depois, caso o visitante precise corrigi-lo quando todo o resto já tiver carregado em torno de um padrão errado.

Sempre permita a alteração

Trate o país baseado no IP como um ponto de partida, e não como uma resposta fixa. Um visitante em viagem, usando a VPN do trabalho ou simplesmente morando em um lugar que não corresponde ao endereço registrado do provedor de rede vai precisar escolher outra opção, então nada no formulário deve presumir que o padrão está correto.

Um erro comum a evitar

Não coloque em cache a página totalmente renderizada atrás de uma CDN ou de um proxy reverso sem variá-la por visitante, já que uma página renderizada uma vez para o IP do primeiro visitante e depois servida do cache para todos os outros vai mostrar o país desse primeiro visitante a todos os visitantes seguintes, independentemente de onde eles realmente estejam. Se as suas páginas passam por cache, exclua esse fragmento do cache ou renderize-o por meio de um pequeno include no servidor executado a cada requisição.

Lidando com uma consulta que não encontra nada

Se found voltar como false, o que acontece com algumas faixas privadas ou não alocadas, use um padrão neutro, como uma seleção vazia ou o seu país mais comum, em vez de deixar o campo em um estado indefinido.

Visitantes com IPv6 funcionam da mesma forma

Um visitante que se conecta por IPv6 recebe o mesmo campo country_code do mesmo endpoint, apenas resolvido com base em uma rede /48 em vez de uma /24. Nada na lógica da lista suspensa precisa mudar conforme a versão de IP que fez a requisição. Consulte a documentação de consulta IPv6 se quiser os detalhes específicos da versão.

Custo deste recurso

Isso representa uma requisição por nova sessão de visitante, guardada em cache durante a sessão para que uma única visita não dispare consultas repetidas em várias páginas de formulário. Isso mantém o recurso bem dentro das 2.500 requisições gratuitas por dia incluídas em toda chave, ou disponíveis a partir de um único endereço sem chave, para qualquer site que não esteja entre os mais movimentados.

Um padrão sensato poupa a rolagem por uma lista de cem itens, e o visitante continua com controle total se o palpite estiver errado. Os detalhes dos campos estão na documentação de consulta IPv4.