guia completo do google tag manager

13
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 .

Upload: designpt-agencia-digital

Post on 11-Aug-2015

96 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Guia completo do Google Tag Manager

Guia completo do Google Tag Managerdesignportugal.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 voltepara 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 adicionarestes 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 aowebsite, e isto pode não ser uma tarefa simples para muitos. O Google Tag Manager é uma soluçãode 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 decarregamento 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, ocó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 doGoogle 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 seuwebsite de forma fácil e convenientemente a partir dum único sítio. Antes disso, veja este vídeo deintrodução ou leia a documentação oficial do gestor de etiquetas do google .

Page 2: Guia completo do Google Tag Manager

Perceber o Google Tag Manager

O Gestor de Etiquetas Google funciona de forma simples. Você adiciona o código deste, chamado umcontentor, no seu website, e depois gere todas as etiquetas (Analytics, Adwords, conversão) a partirdo 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 websitedeles, é um requisito meu que um cliente novo crie a sua conta Google Tag Manager antes de eucomeç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á ahttps://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 daminha 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 GoogleAnalytics, outra etiqueta para o Google Adwords.

Regras definem quando e como estas etiquetas serão executdas. Poderá ser em todas aspáginas do website (ex.: Google Analytics) ou apenas numa única página (ex.: landing pagecom pixel conversão Facebook).

Page 3: Guia completo do Google Tag Manager

Crie uma nova conta. Uma conta no Google Tag Manager é o sítio onde pode colocar tudo o queestiver 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, etenha um site que tenha tanto tráfego http como encriptado em https, deixe a pré-definição de // emDomínios. Assim o seu contentor terá ambas as versões (http e https). Pode colocar o seu domíniocom www, ou sem www. Escolha o fuso horário e clique em Criar conta e contentor.

Page 4: Guia completo do 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.

Page 5: Guia completo do Google Tag Manager

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 deseguida como fazer isto com uma simples etiqueta.

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

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

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

Page 6: Guia completo do Google Tag Manager

etiqueta.

Atribua-lhe um nome. Neste caso, escrevi Google Analytics pois pretendo ligar a etiqueta (código) doGoogle Analytics ao Google Tag Manager. Em baixo, escolhi o Tipo de Etiqueta, que é GoogleAnalytics > 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 GoogleAnalytics e copie o número ID, do género UA-XXXXXXX-X e insira-o no campo do ID de Controlo. Useo seu próprio código, que será diferente deste (os X’s serão números).

Page 7: Guia completo do Google Tag Manager

Deixe o “Tipo deacompanhamento” comoestá pré-definido(Visualizações de página),assim como as outrasconfigurações, e vá aocanto superior direito.Clique em “Regras deacionamento”. É 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 bastaassinalar um visto em “Todas as páginas”. Se no entanto quiséssemos rastrear estatísticas apenasduma landing page (página de destino) específica, teríamos de criar uma nova regra. Neste caso, noentanto, não é necessário.

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

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 pixelde conversão Facebook, como etiqueta, no Google Tag Manager. Isto fará com que o Google TagManager contenha duas etiquetas, o do Google Analytics e do pixel de conversão do Facebook, emque será apenas necessário um único código para os governar aos dois. Poderá também adicionaretiquetas 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ãodo Facebook escolho “Etiqueta de HTML Personalizada”.

Page 8: Guia completo do Google Tag Manager

Mais em baixo, no campodo “HTML”, coloco ocódigo do pixel deconversão fornecido peloFacebook no Gestor deAnúncios.

No lado direito, na caixa“Regras de acionamento”,onde vou escolher onde ecomo esta etiqueta seráacionada. Como estou ausar um pixel deconversão e a rastrearconversões numa páginaespecífica (landing page),quero apenas que o pixelseja disparado nessapágina de destino. Paratal, escolho {{url}} comosendo igual ao endereçoda minha páginaespecífica que querorastrear. Se isto fosse oGoogle Analytics, deveriacolocar a regra para “Todas as páginas”.

Page 9: Guia completo do Google Tag Manager
Page 10: Guia completo do Google Tag Manager

“Publique” o que fez

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

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

Ponto de situação

Page 11: Guia completo do Google Tag Manager

Temos uma conta chamada “DesignPT”, com o contentor “DesignPT site principal”, com duasetiquetas, “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, emque 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 doGoogle 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 GoogleAnalytics 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, podeinstalar o FB Pixel Helper, que indicará se esta etiqueta está a funcionar no seu website ou página.

Page 12: Guia completo do Google Tag Manager

E está feito

Para novos utilizadores, este processo pode parecer um pouco complicado, mas quando começar ausar o Gestor de Etiquetas do Google, vai perceber que torna as coisas mais fáceis. Se acha quemesmo assim isto é um pouco difícil, reencaminhe este artigo para o seu web developer ou agência epeç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 decliente para adicionar fragmentos de código individuais.

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

Page 13: Guia completo do Google Tag Manager

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 seusclientes.

relacionados

Como definir objetivos Google Analytics16/12/2014Comece a anunciar e a fazer retargeting17/08/2014Ferramentas Google webmasters09/06/20143 ferramentas para analisar conteúdos da concorrência30/05/201414 Ferramentas para espiar a concorrencia13/05/2014Como usar codigo UTM de rastreamento no Google Analytics12/05/2014