Este artigo parte do princípio que já tem o Google Analytics no seu website. Para colocar o Google Analytics no seu website, leia este artigo e depois volte para ler o resto.

O Google Tag Manager gere o Google Analytics, o Adwords Remarketing, pixéis de conversão Facebook, etc, tudo a partir dum único interface Adicionar pixel de conversão Facebook ao Google Tag Managerface web. Neste artigo mostro como fazer uso dele.

O que é o Google Tag Manager?

O Google Tag Manager (Gestor de Etiquetas Google) permite atualizar rapida e facilmente as tags (etiquetas) do seu website, tais como do Adwords, Analytics, Remarketing, Facebook pixel conversão, etc.

Muitas vezes um website acaba por ter vários códigos JavaScript, como o código do Google Analytics, o código do Google Adwords, código de redes sociais, entre outros. Torna-se chato ter de adicionar estes fragmentos JavaScript de cada vez que tiver mais um para adicionar ao seu website.

Quando tem mais um código para adicionar, lá terá de pedir ao seu webmaster para o adicionar ao website, e isto pode não ser uma tarefa simples para muitos. O Google Tag Manager é uma solução de gestão de etiquetas a partir dum único interface web, onde pode adicionar e remover etiquetas à vontade.

Outra vantagem de usar apenas um código (o do Gestor de Etiquetas Google) é o tempo de carregamento mais rápido, porque o Google carrega o código de forma assíncrona.

O que é uma etiqueta?

Uma etiqueta é um fragmento de JavaScript que envia informações para o Google. Por exemplo, o código do Google Analytics é uma etiqueta, assim como o código do Adwords Remarketing.

Porquê usar o Google Tag Manager?

A vantagem de usar o Google Tag Manager é que não tem de adicionar o código do Analytics, Adwords, etc – pode apenas ter um único código, o do Google Tag Manager, e este terá, dentro dele, todos os códigos que precisa (Analytics, Adwords, outros).

E se não usar o Google Tag Manager?

Se não usar o Gestor de Etiquetas Google, teria de adicionar esses fragmentos de código, um a um, no seu website. Mas agora pode conter todas as etiquetas em contentores, em que o código do Google Tag Manager conterá todos esses fragmentos (Analytics, Adwords, etc).

Introdução ao Google Tag Manager (Gestor de Etiquetas Google)

Neste guia vou mostrar como usar o Gestor de Etiquetas Google e gerir todas as etiquetas do seu website de forma fácil e convenientemente a partir dum único sítio. Antes disso, veja este vídeo de introdução ou leia a documentação oficial do gestor de etiquetas do google.

Perceber o Google Tag Manager

O Gestor de Etiquetas Google funciona de forma simples. Você adiciona o código deste, chamado um contentor, no seu website, e depois gere todas as etiquetas (Analytics, Adwords, conversão) a partir do interface dele.

Criar um contentor e instalá-lo num website leva o mesmo tempo do que instalar o Google Analytics. Já que todos os clientes com os quais trabalho têm uma série de etiquetas espalhadas pelo website deles, é um requisito meu que um cliente novo crie a sua conta Google Tag Manager antes de eu começar o meu trabalho.

Configurar Google Tag Manager em 10 minutos

Criar uma conta no Google Tag Manager é simples. Entre na sua conta Google, vá a https://www.google.com/tagmanager e clique em “Sign up now”.

Inscrição no Google Tag Manager

Antes de avançar, eis algumas coisas que precisa saber.

  • Conta é o nome da conta, normalmente o nome da empresa para a qual irá gerir as etiquetas.
  • Contentor é o nome do website para o qual irá gerir as etiquetas. Ex.: DesignPT é o nome da minha empresa e o nome que dei a este contentor foi DesignPT site principal.
  • Etiquetas serão criadas e contidas num contentor. Por exemplo, uma etiqueta para o Google Analytics, outra etiqueta para o Google Adwords.
  • Regras definem quando e como estas etiquetas serão executdas. Poderá ser em todas as páginas do website (ex.: Google Analytics) ou apenas numa única página (ex.: landing page com pixel conversão Facebook).

Criar nova conta no Google Tag Manager

Crie uma nova conta. Uma conta no Google Tag Manager é o sítio onde pode colocar tudo o que estiver relacionada com a sua empresa, mesmo que tenha muitos sites.

Configurar conta no Google Tag Manager

Agora terá de criar um contentor para conter as suas etiquetas. Este nome deverá ser do seu website, pois facilita poder encontrá-lo quando tiver vários contentores (websites/propriedades) e contas.

Selecione Páginas Web para aparecerem mais campos. A menos que saiba o que está a fazer, e tenha um site que tenha tanto tráfego http como encriptado em https, deixe a pré-definição de // em Domínios. Assim o seu contentor terá ambas as versões (http e https). Pode colocar o seu domínio com www, ou sem www. Escolha o fuso horário e clique em Criar conta e contentor.

Criar contentor no Google Tag Manager

Na próxima página, o Google dará-lhe um fragmento de código mágico para adicionar no seu website, de preferência após a body tag. Se está a usar um gestor de conteúdos (CMS) como WordPress, pode adicioná-lo no ficheiro header.php, após o body ou fazer uso dum plugin.

Nota: o seu código será diferente do meu. Repare bem no seu próprio ID ou não irá ver dados.

Código do contentor

Ligue o Google Tag Manager com Google Analytics

Agora que temos um contentor no Gestor de Etiquetas do Google, e partindo do princípio que você já tem uma Propriedade no Google Analytics, está na altura de ligar os dois. É fácil, irei descrever de seguida como fazer isto com uma simples etiqueta.

Antes de criar etiquetas, vamos adicionar um utilizador. Clique “Nova” e escolha “Utilizador”. Mesmo com todas as coisas boas do Google Tag Manager, a minha favorita é a maneira como lida com utilizadores.

Quero que os meus clientes sejam os donos de todos os seus dados, analíticos, adwords, Facebook e outros. O que faço como consultor é aceder às contas, que são deles. Eles estão a dar-me acesso, e não vice-versa. Qualquer agência que corre as campanhas a partir das contas deles e partilha os dados consigo, não merece ser contratada.

Criar utilizador

Com um utilizador adicionado, e o código do Google Tag Manager no seu website, está pronto para adicionar as suas etiquetas. No separador “Rascunho do Contentor” clique “Nova” e adicione uma etiqueta.

Criar etiqueta

Atribua-lhe um nome. Neste caso, escrevi Google Analytics pois pretendo ligar a etiqueta (código) do Google Analytics ao Google Tag Manager. Em baixo, escolhi o Tipo de Etiqueta, que é Google Analytics > Universal Analytics (a menos que esteja a usar o clássico, sugiro o universal).

Dar nome a etiqueta

Mais em baixo, terá de colocar o seu “ID de Controlo”. Para tal, vá à sua propriedade no Google Analytics e copie o número ID, do género UA-XXXXXXX-X e insira-o no campo do ID de Controlo. Use o seu próprio código, que será diferente deste (os X’s serão números).

ID de controlo do Google Analytics

Deixe o “Tipo de acompanhamento” como está pré-definido (Visualizações de página), assim como as outras configurações, e vá ao canto superior direito. Clique em “Regras de acionamento”. É aqui que vamos decidir em que páginas queremos que esta etiqueta seja acionada.

No caso do Google Analytics é simples: queremos que esteja em todas as páginas, portanto basta assinalar um visto em “Todas as páginas”. Se no entanto quiséssemos rastrear estatísticas apenas duma landing page (página de destino) específica, teríamos de criar uma nova regra. Neste caso, no entanto, não é necessário.

Criar regra de etiqueta

Com isto feito, acabámos de indicar ao Google Tag Manager para acionar esta etiqueta em todas as páginas onde o código do Google Tag Manager está presente, que será em todas as páginas do seu website.

A grande vantagem do Google Tag Manager é que podemos adicionar mais etiquetas.

Vou mostrar como adicionar uma outra etiqueta menos comum, neste caso, como adicionar um pixel de conversão Facebook, como etiqueta, no Google Tag Manager. Isto fará com que o Google Tag Manager contenha duas etiquetas, o do Google Analytics e do pixel de conversão do Facebook, em que será apenas necessário um único código para os governar aos dois. Poderá também adicionar etiquetas para o Google Adwords Remarketing, entre muitas outras.

Adicionar pixel de conversão Facebook ao Google Tag Manager

Clique em Nova > Etiqueta e dê um nome à etiqueta. No caso anterior escrevemos “Google Analytics”, mas neste caso escreveremos “Pixel de conversão Facebook”. Para adicionar o código de conversão do Facebook escolho “Etiqueta de HTML Personalizada”.

Criar etiqueta para pixel de conversão Facebook

Mais em baixo, no campo do “HTML”, coloco o código do pixel de conversão fornecido pelo Facebook no Gestor de Anúncios.

codigo pixel de conversao facebook

No lado direito, na caixa “Regras de acionamento”, onde vou escolher onde e como esta etiqueta será acionada. Como estou a usar um pixel de conversão e a rastrear conversões numa página específica (landing page), quero apenas que o pixel seja disparado nessa página de destino. Para tal, escolho {{url}} como sendo igual ao endereço da minha página específica que quero rastrear. Se isto fosse o Google Analytics, deveria colocar a regra para “Todas as páginas”.

Regra para pixel conversao

“Publique” o que fez

Após ter criado a conta, contentor e estas etiquetas, publique o que fez, ou não aparecerão dados no seu google analytics, remarketing, ou outras etiquetas que tenha criado. É fácil esquecer-se deste passo, mas lembre-se de publicar.

Vá ao canto superior direito, e clique em “Publicar”.

Publicar contentor

Ponto de situação

Temos uma conta chamada “DesignPT”, com o contentor “DesignPT site principal”, com duas etiquetas, “Google Analytics” e “Pixel de conversão Facebook”. Eu poderia adicionar mais etiquetas, tais como a do Adwords Remarketing, e todas elas estariam adicionadas no Google Tag Manager, em que este só precisa fazer uso dum único código para puxar todas as suas etiquetas.

Para saber se o seu código Google Tag Manager está a funcionar, instale a extensão Tag Assistant do Google para o browser Chrome. Quando verificar o seu website, a extensão indicará se o código está a funcionar bem ou não. Eis o exemplo no website da nossa agência. Note como tenho o Google Analytics e Remarketing a funcionar bem, assim como o código principal do Google Tag Manager.

Tag assistant by Google

Para verificar se a etiqueta do pixel de conversão Facebook que adicionámos está a funcionar, pode instalar o FB Pixel Helper, que indicará se esta etiqueta está a funcionar no seu website ou página.

FB Pixel Helper

E está feito

Para novos utilizadores, este processo pode parecer um pouco complicado, mas quando começar a usar o Gestor de Etiquetas do Google, vai perceber que torna as coisas mais fáceis. Se acha que mesmo assim isto é um pouco difícil, reencaminhe este artigo para o seu web developer ou agência e peça-lhes para configurar o Google Tag Manager no seu domínio.

Para quem faz a gestão de muitos websites, o Google Tag Manager (Gestor de Etiquetas do Google) é uma ferramenta útil para gestão de etiquetas. Assim não tenho de fazer mudanças a cada site de cliente para adicionar fragmentos de código individuais.

Partilhe comigo nos comentários se tiver alguma questão sobre o Google Tag Manager. Use este guia para criar e configurar a gestão das suas etiquetas usando o Gestor de Etiqueta Google, e mencione como correu.


10 Comments

  1. João!
    Que maravilha de artigo 😉

    Tudo super explicadinho, a partir de agora não há desculpas para não utilizar o Google Tag Manager.
    Eu já andei a testar a ferramenta nos inicios mas depois nunca mais fiz nada, mas agora vou começar a utilizar mesmo!

    Grande Abraço.

    • De nada, Miguel, ainda bem que gostaste.

      Também há certas coisas e ferramentas que eu experimento e deixo para depois, para me re-encontrar com elas de novo, talvez como no teu caso. Ainda bem que vais começar a usar o GTM, porque na minha opinião, vale mesmo a pena, e em vez de teres um plugin para adicionares o Analytics, outro para o Remarketing, outro para anúncios/pixéis de conversão, tens apenas um código to “rule them all”, através de contentores e etiquetas.

      No teu website, também já encontrei várias maravilhas de artigo, como é o caso das tuas dicas sobre tornar gifs a partir de slideshares, e como tornar artigos > pdf > slideshare, através do printfriendly. Essas foram dicas potentes.

  2. Olá, fiz o tutorial conforme demonstrado aqui porém quando verifico no Tag Assistant aparecem 2 tags do Google Analytics para meu site…sendo que somente a segunda tag correponde ao meu site de fato. Errei em algum passo para ocasionar isso?

  3. Gostei muito do artigo, no entanto saltou-me à vista a seguinte afirmação
    “Quero que os meus clientes sejam os donos de todos os seus dados, analíticos, adwords, Facebook e outros. O que faço como consultor é aceder às contas, que são deles. Eles estão a dar-me acesso, e não vice-versa. Qualquer agência que corre as campanhas a partir das contas deles e partilha os dados consigo, não merece ser contratada.”

    Gostava que desenvolvesse mais um pouco sobre este tema, pois as agências (por isso é que são agências) normalmente gerem, por exemplo as campanhas a partir da própria conta até por motivos de pagamento. Normalmente também são fornecidos relatórios aos clientes. Quanto aos dados, plenamente de acordo, são dos clientes e não podem ser negados.

    • António, connosco uma empresa tem uma conta, que é ligada à nossa “conta-mãe”, para que, se um dia deixarmos de trabalhar juntos, o António pode ir à sua vida, com a sua conta, e não perder todo o trabalho que teve só porque estava dependente duma agência. Além do mais, os dados de pagamento devem ser colocados e feitos do lado do cliente para efeitos de máxima transparência.

  4. Aqui do Brasil (Rio de Janeiro), acompanho as publicações do Design Portugal. Excelente artigo! Parabéns João Alexandre.

  5. O tempo não está perfeito, mas vai melhor se Deus quiser. Obrigado por perguntar. Também estamos torcendo por nossos irmãos portugueses nas Olimpíadas. Até breve!

Deixe uma resposta

Your email address will not be published. Required fields are marked *

clear formPost comment