Guia completo do Google Tag Manager
designportugal.net /guia-google-tag-manager/
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 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”.
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).
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.
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.
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.
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.
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.
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).
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).
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.
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”.
Mais em baixo, no campo
do “HTML”, coloco o
código do pixel de
conversão fornecido pelo
Facebook no Gestor de
Anúncios.
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”.
“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”.
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.
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.
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.
About the author
João Alexandre
João Alexandre é consultor web marketing na DesignPT e faz uso das redes sociais,
motores de busca - e senso comum - para trazer resultados produtivos para os seus
clientes.
relacionados
Como definir objetivos Google Analytics
16/12/2014
Comece a anunciar e a fazer retargeting
17/08/2014
Ferramentas Google webmasters
09/06/2014
3 ferramentas para analisar conteúdos da concorrência
30/05/2014
14 Ferramentas para espiar a concorrencia
13/05/2014
Como usar codigo UTM de rastreamento no Google Analytics
12/05/2014

Guia completo do Google Tag Manager

  • 1.
    Guia completo doGoogle Tag Manager designportugal.net /guia-google-tag-manager/ 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 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.
  • 2.
    Perceber o GoogleTag 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”. 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).
  • 3.
    Crie uma novaconta. 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. 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.
  • 4.
    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.
  • 5.
    Ligue o GoogleTag 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. 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
  • 6.
    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). 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).
  • 7.
    Deixe o “Tipode 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. 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”.
  • 8.
    Mais em baixo,no campo do “HTML”, coloco o código do pixel de conversão fornecido pelo Facebook no Gestor de Anúncios. 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”.
  • 10.
    “Publique” o quefez 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”. Ponto de situação
  • 11.
    Temos uma contachamada “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. 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.
  • 12.
    E está feito Paranovos 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.
  • 13.
    About the author JoãoAlexandre João Alexandre é consultor web marketing na DesignPT e faz uso das redes sociais, motores de busca - e senso comum - para trazer resultados produtivos para os seus clientes. relacionados Como definir objetivos Google Analytics 16/12/2014 Comece a anunciar e a fazer retargeting 17/08/2014 Ferramentas Google webmasters 09/06/2014 3 ferramentas para analisar conteúdos da concorrência 30/05/2014 14 Ferramentas para espiar a concorrencia 13/05/2014 Como usar codigo UTM de rastreamento no Google Analytics 12/05/2014