gtag.js vs. GTM vs. Google Ads API: Um guia prático de quando e como usar cada um

Recentemente trabalhei com diferentes integrações com o Google Ads, usando a Tag do Google (Google Tag, gtag.js), o Gerenciador de tags do Google (Google Tag Manager, GTM) e também a API do Google Ads.

Infelizmente, a documentação do Google é bem fragmentada, tem termos diferentes para as mesmas coisas ou termos parecidos para coisas diferentes, existem links quebrados e você pode encontrar algum link com informação defasada.

Por isso, reuni várias coisas que aprendi ao longo do caminho, desde para que serve cada tipo de integração e quando pode fazer sentido usá-las, até como desenvolver cada uma.

Não vou explicar a fundo como as coisas funcionam pela parte do Google. Explicarei o suficiente para um desenvolvedor conseguir configurar, testar e entender como cada produto afeta o site que está sendo desenvolvido. Quem entende melhor a parte do Google é o gestor de tráfego pago ou a equipe de marketing da empresa.

Se você só quer saber quando faz sentido usar cada coisa, leia a conclusão no final do texto.

Google Tag (gtag.js)

A tag do Google é uma forma de você enviar eventos para produtos do Google, podendo ser eventos de conversão, de visualização de página etc. Para usá-la, você precisa adicionar um <script> no seu site, e informar um ID para configurá-la. Por exemplo:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID'); // ID com prefixo 'GT-', 'G-' ou 'AW-'
</script>

O código acima funciona hoje, mas pode ser que o Google mude a implementação no futuro, então quando for configurar sua tag, use o script que o Google informar durante a configuração.

Ao configurar a tag pela primeira vez ou quando realizar alguma modificação, recomendo utilizar a extensão de navegador Tag Assistant e também o site https://tagassistant.google.com/, que funciona com a URL de localhost, para confirmar que está funcionando como esperado.

Uso com mais de uma tag ou produto do Google

A configuração é bem direta ao ponto, mas se você utiliza mais de um produto do Google, como o Google Ads e o Google Analytics, a situação fica mais nebulosa. Para entender melhor, veja este trecho da documentação:

Um ID de tag identifica uma tag do Google. Uma única tag pode ter vários IDs. Por exemplo, se você usa o Google Ads, sua tag agora tem dois IDs: um legado (AW) e um da tag do Google (GT).

Os IDs de tags são intercambiáveis. A tabela abaixo mostra uma visão geral de quais tags são compatíveis com a tag do Google.

Prefixo	Tipo de ID	Descrição
GT-XXXXXX	Tag do Google	Cada tag do Google recém-criada recebe um prefixo GT e um ID exclusivo.
G-XXXXXX	Tag do Google (prefixo legado)	As tags do Google Analytics 4 são tags do Google com um prefixo G e um ID exclusivo.
AW-XXXXXX	Tag do Google (prefixo legado)	As tags do Google Ads têm um prefixo AW e um ID exclusivo.
DC-XXXXXX	Tag do Google (prefixo legado)	As tags do Floodlight do Google têm um prefixo DC e um ID exclusivo.

As páginas da Web configuradas com a tag do Google podem ter um ID com o prefixo "G" ou "AW". O prefixo "G" significa que sua tag do Google foi criada no Analytics. O prefixo "AW" indica que ela foi gerada no Google Ads. Os dois IDs são versões diferentes do ID da tag e podem ser trocados. Portanto, se houver um ID com um dos prefixos, não será necessário adicionar um ID com o outro.

Mesmo com o trecho da documentação acima, não estava claro para mim como funcionaria a configuração para o Google Ads e Analytics, visto que eu tinha dois IDs diferentes (prefixos AW e G), mas um trecho de outra documentação diz:

Se você usa o Google Ads e o Analytics, configure a tag do Google em uma só plataforma. Depois, é possível adicionar o outro produto como destino nas configurações da tag do Google.

Na prática, não importa qual prefixo você está usando (nesse exemplo, GT, AW ou G). O que você precisa fazer para a tag funcionar como esperado é uma configuração fora do código, na plataforma do Google. Você deve ir na sua lista de tags do Google e depois:

1. Acessar a tag desejada (que você configurou no seu código).
2. Clicar na tag.
3. Clicar em "+ Destino" e seguir o fluxo.

O resultado, após criar todos os destinos necessários, será o seguinte:

Se a tag de destino já era destino de outra tag, será informado na mesma página que esse destino está sendo removido.

Com isso, você terá configurado uma única tag para dois produtos: Ads e Analytics.

Se você precisa configurar tags diferentes que não é possível fazer como acima, pode seguir a orientação da documentação já citada:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID');
  gtag('config', 'TAG_ID-2');
</script>

Eventos automáticos

Alguns eventos são coletados automaticamente pela gtag, confira a lista completa, como uma primeira visita ao seu site. Outros, também coletados automaticamente, são considerados eventos de medição otimizada, por exemplo quando o usuário rola até o fim da página, clica em um link de outro domínio, visualiza um vídeo (início, 10% assistido, 25%, 50%, 75% e 100%) etc.

Você decide o que irá coletar, e a configuração pode ser tão simples quanto "apenas a visualização da página":

A tag tem várias outras configurações que não vou entrar em detalhe aqui porque não estudei isso.

Eventos personalizados

Você pode emitir diferentes eventos por meio da função gtag. Pode consultar uma lista de eventos recomendados para a integração do Google Analytics com a gtag, além de ter a lista de propriedades de cada evento.

Não achei um link tão bom para os eventos de conversão do Google Ads, mas são três propriedades opcionais: transaction_id, currency e value.

Como os eventos do Analytics são mais simples e eu implementei os de conversão do Ads, vou explicar o processo do Ads, porque sabendo ele, também saberá os do Analytics.

Eventos de conversão do Google Ads

Primeiro, você precisa criar uma "ação de conversão" na plataforma do Google Ads em Metas > Conversões > Resumo. Caso este caminho não funcione, confira a documentação oficial.

Depois, acesse a ação criada e escolha a opção "Instalar a tag por conta própria".

A partir daqui, basta seguir as orientações do Google. Como já temos a tag configurada, a parte mais relevantes está no final, que é um trecho de código como:

<script>
  gtag('event', 'conversion', {
    'send_to': 'TAG_ID/LABEL', // e.g. 'AW-123456789/abcdef'
    'transaction_id': ''
  });
</script>

Cada conversão terá um "label" diferente, mas a tag é a mesma.

A função gtag também é acessível pelo objeto window. Então, se estiver usando React, por exemplo, pode chamar a função com window.gtag?.('event', ...).

Não é garantido que a função gtag esteja definida, por isso usei o encadeamento opcional (?.) no último exemplo. O script de configuração é responsável por defini-la, mas lembre-se que bloqueadores de anúncios e rastreadores ("Adblocks") podem bloquear o script do Google, e então a tag não será configurada no seu site.

Google Tag Manager (GTM)

Com o Google Tag Manager é possível fazer as mesmas coisas que com a gtag, e algumas delas sem alterar o código. O GTM é útil para dar mais autonomia para quem cuida dos produtos do Google (Ads, Analytics etc.) mas não é desenvolvedor.

Além do que já citei que é possível fazer com a gtag, você também pode adicionar um Pixel da Meta pelo próprio painel do GTM, sem alterar nada no código, ou adicionar o Hotjar, LinkedIn Insight, HTML customizado etc. São várias coisas que podem ser feitas de forma "independente", sem precisar que um desenvolvedor altere o código do projeto (vou falar sobre a segurança num tópico separado).

Você pode acessar ou criar um GTM aqui. Atualmente, o script de configuração é o seguinte:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','TAG_ID');</script>
<!-- End Google Tag Manager -->

Em resumo, esse script cria um array dataLayer no objeto window, que terá a lista de eventos emitidos, similar como acontece com a gtag, mas com a diferença de que não existe uma função gtag para emitir eventos: com o GTM você precisará realizar window.dataLayer.push(...).

Além disso, o script também cria uma outra tag script para carregar um script da URL https://www.googletagmanager.com/gtm.js?id=TAG_ID.

Assim como recomendei para a gtag, a extensão de navegador Tag Assistant e o site https://tagassistant.google.com/ também são úteis ao implementar o GTM.

Visualizar e Enviar

Ainda não fizemos nenhuma alteração no GTM, mas quando fizer uma alteração, ela não será refletida automaticamente em "produção".

Para testar a alteração, você pode usar o botão no canto superior direito, no painel do GTM, escrito Visualizar. Ele irá te redirecionar para o site do Tag Assistant, e lá você indicará o ambiente que deseja testar, podendo ser localhost.

Depois, para funcionar "em produção", precisará clicar no botão Enviar, que fica ao lado de Visualizar, e criar uma nova versão. Veja um exemplo abaixo:

Adicionando uma tag

Vamos exemplificar uma alteração super simples: adicionar uma tag do Google Ads.

No painel, você deve ir no menu da esquerda "Tags" e clicar em "Nova". Depois de selecionar a opção "Tag do Google", basta preencher os dados de configuração e acionamento. Ficará algo assim:

Se quiser adicionar outra tag, o processo é o mesmo, basta identificar onde ela está ou inserir como HTML personalizado. Caso vá adicionar um script de terceiros, recomendo buscar primeiro se existe uma versão oficial disponibilizada pela opção "Descubra mais tipos de tag na Galeria de modelos da comunidade", por exemplo:

Claro, não adicione nada de uma fonte que não seja confiável, e nem código como "HTML personalizado" que você não entende.

Eventos de conversão do Google Ads

Para conseguirmos reproduzir o que fizemos com a gtag e enviar os eventos de conversão pelo código, além da configuração da Tag do Google feita no tópico anterior, é preciso criar os eventos de conversão no GTM.

Primeiro, é preciso criar o evento de conversão como explicado no tópico da gtag. Depois, precisamos criar (sempre pelo menu lateral da esquerda, processo similar à criação de tag):

• Variáveis: É opcional, mas ajuda a deixar tudo organizado. Você pode criar uma variável da camada de dados para cada propriedade, definindo como valor transaction_id, currency e value, e também para o label de conversão.

• Acionadores: Aqui você irá criar um evento personalizado para cada conversão. Para simplificar, use como nome do evento o mesmo nome da conversão do Google Ads. Se criou uma variável para esse nome no ponto anterior, pode usá-la aqui como {{Nome da variável}}.

• Tags: Crie uma tag do tipo Google Ads > Acompanhamento de conversões do Google Ads.
  Na configuração, o Código de conversão é obtido no Google Ads, escolhendo "Usar o Gerenciador de tags do Google" ao invés de "Instalar a tag por conta própria" (que usamos para a gtag). Irá aparecer um ID de conversão.
  O Rótulo de conversão é o label que já usamos com a gtag, mas que também aparece quando você obtém o ID de conversão. Os outros três campos são as variáveis que sugeri criar para transaction_id, currency e value.

Agora, você já pode emitir o evento de conversão no código. Como eu disse antes, ao invés de usar a função gtag, você usará o dataLayer. O seu código deve ser parecido com este:

window.dataLayer?.push({
  'event': 'conversao_1', // O "nome do evento" do acionador
  'transaction_id': '',
});

Como citei no tópico da gtag, não necessariamente a variável dataLayer estará definida, por causa de bloqueadores de anúncio.

Lembre-se que, para testar, precisa passar pelo processo "Visualizar" e "Enviar".

Segurança

Adicionar scripts de terceiros é perigoso, ainda mais se quem fizer isso não possuir conhecimento técnico. Esse pode ser um motivo para você preferir usar a gtag ao invés do GTM, mas eu encontrei um artigo que fala sobre essa parte de segurança: Google Tag Manager security risks: what marketers and engineers need to know.

No artigo, o autor lista formas de melhorar a segurança, desde o princípio de menor privilégio e permissões granulares, até o fluxo de aprovação, com o seguinte exemplo:

• Assistente de Marketing: Possui permissões de Leitura e Edição de contêiner
• Aprovador Técnico (Engenheiro/Gerente de Desenvolvimento de Software, Engenheiro de Suporte de TI ou função técnica similar): Possui permissões de Edição e Aprovação de contêiner
• Gerente de Marketing: Possui permissões de Edição e Publicação

Assim, a equipe de marketing ainda consegue fazer as alterações de forma independente, mas terá um desenvolvedor envolvido para garantir a segurança do site.

Google Ads API

Eu usei a API do Google Ads para enviar otimizar conversões, mas é claro que dá para fazer outras coisas com ela. Usá-la para isso mesmo já usando gtag ou GTM no frontend é útil porque:

1. Você consegue enviar eventos mesmo se o usuário bloquear o carregamento da tag no navegador — não tenho certeza se isso funciona no Google, mas na Meta funciona, e é recomendado.
2. Você pode enviar um evento de forma assíncrona, por exemplo num momento que o usuário não está no seu site.
3. Você pode "enriquecer" o evento com dados que não são enviados pelo frontend. O transaction_id enviado no frontend é útil para reconhecer que está enviado o mesmo evento.

No momento, a API está na versão 20, e você pode conferir as notas de cada versão.

Meu caso de uso era para otimizar conversões, e esse link te leva para a documentação da API, que recomenda usar uma biblioteca de cliente, visto que a API usa uma interface gRPC.

Existem bibliotecas de clientes oficiais para as linguagens Java, .NET, PHP, Python, Ruby e Perl. Como eu estava usando JavaScript, pesquisei e encontrei a biblioteca não-oficial Opteo/google-ads-api.

Apesar disso, eu não queria adicionar uma dependência assim apenas para consumir um endpoint. Pesquisando mais, eu descobri que existe também uma API REST pública, então nem cheguei a testar a biblioteca não-oficial de JavaScript.

Para conseguir usar a API REST corretamente, precisei juntar informações da documentação REST e da documentação gRPC. Este vídeo do canal Google Ads Developers também ajudou.

Não vou explicar aqui como utilizar a API por causa do espaço disponível, visto que o uso da API demanda muito mais código e configuração no Google do que a gtag e o GTM, mas as informações acima já são de grande ajuda para quem precisar implementá-la. Caso você tenha interesse em outra funcionalidade, pode seguir o mesmo raciocínio de consultar a documentação gRPC, REST e o canal do YouTube.

ID de clique do Google (GCLID)

Como bônus, vou falar brevemente sobre o GCLID.

Quando você clica num anúncio do Google e vai para um site, a URL pode ter um parâmetro gclid, que serve para identificar a campanha de anúncio e outros atributos do clique.

A gtag e o GTM (talvez apenas com Tag do Google Ads, não tenho certeza) são responsáveis por capturar esse gclid da URL e definir o Cookie _gcl_aw. Ele é importante para o Google Ads e Google Analytics identificarem corretamente de qual campanha são os eventos enviados. Sem ele, o Google não consegue atribuir uma conversão a um clique específico em um anúncio, o que invalida grande parte da análise de performance. Por isso, tenha a tag na página "alvo" dos anúncios sempre que possível, visto que o parâmetro é removido da URL na navegação.

O gclid também é uma informação relevante para enviar pela API do Google Ads na otimização de conversões. Você pode passar o gclid para seu backend capturando-o pela URL ou idealmente acessando o cookie _gcl_aw e extraindo-o — o cookie tem o formato GCL.numeros.gclid.

Conclusão

• Use gtag se: você só precisa enviar alguns eventos, tem controle total sobre o código e não prevê muitas mudanças ou integrações com outras ferramentas de marketing. É a opção mais simples e direta.
• Use GTM se: a equipe de marketing precisa de autonomia para adicionar e gerenciar diversas tags (Google, Meta, LinkedIn, etc.), sem depender de um deploy ou de envolvimento de desenvolvedores para realizar cada alteração.
• Use a API do Google Ads se: você quer enviar eventos contornando bloqueadores de anúncio, quer enriquecer eventos com dados do backend ou precisa disparar conversões de forma assíncrona (ex: após um pagamento ser confirmado por um webhook). É útil usá-la em conjunto com gtag ou GTM.