Como Capturar Estado e Cidade do Visitante com Google Tag Manager

Personalizando seu conteúdo com Geolocalização

Este artigo é um tutorial simples de como você pode obter a cidade dos seus visitantes, assim como você consegue ver no Google Analytics, mas nesse caso vou te ensinar como você pode usar essa informação dentro da sua página.

Os casos de uso para isso podem ser muitos, por exemplo, em uma lading page onde você pode exibir diferentes conteúdos de acordo com o estado ou cidade do usuário. Você pode também inserir essa informação na página, por exemplo: Oferta Especial para São Paulo!

No meu caso, eu usei um artigo usado em campanhas no modelo Native Ads, o site atualmente está fora do ar.

Onde você vê o “Rio de Janeiro”, vai mudar de acordo com a sua cidade. Isso é Hack muito comum em sites onde a localização do usuário é relevante para o tema abordado. Mas se sua página tiver qualquer informação que o usuário identifique suas chances de converter é muito maior.

Nesse caso, vamos retornar o estado e cidade do usuário. Indo para o Código:

(function getIpAddress() {
  fetch('https://ipapi.co/json/')
    .then(function(data) {
      return data.json();
    })
    .then(function(getData) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'GetRegionEvent',
        Region: getData['region'],
        City: getData['city']
      });
    })
})();

Criando a Tag no Google Tag Manager

Para criar um Trigger (acionador) no Google Tag Manager vamos disparar a Tag somente nas URLs onde iremos exibir ou usar a informação a fim de não precisar disparar essa Tag para cada visualização de página do usuário, pois a versão gratuita desta API suporta apenas 1.000 requisições por dia e 30.000 requisições por mês.

Para isso basta criar um Trigger e definir uma URL desejada para acionar a Tag. Como essa informação é baseada no IP Adress do usuário, não muda de uma visualização de página para outra.

Salvando as informações em uma variável

Para armazenar as informações vamos utilizar a variável de tipo Data Layer Variable ou Variável da Camada de Dados do Tag Manager.

Repita o mesmo procedimento para salvar a cidade do usuário, caso tenha interesse.

Pronto, toda vez que um usuário acessar essa URL você irá coletar o estado e a cidade. Para exibir as informações na tela vai depender muito de cada projeto, mas por exemplo:

Você pode publicar uma outra Tag, mas precisa se certificar de que esta mesma dispare depois da Tag que você criou para pegar as informações usando a API, onde você pode fazer um queryselector um ID específico para exibir o texto.

Na sua página você escreve o seguinte texto HTML:

<h3>Promoção especial para residentes de <span id="user_city"></span></h3>

Na sua Tag você escreve o seguinte código:

var user_city = document.querySelector('#user_city);
user_city.innerHTML = { { Region } };

Prontinho! E aí… Gostou desse Hack? Possui algum outro Hack de personalização de conteúdo?