Gerenciador de tags do Google - Primeiros passos

Este capítulo fornece uma visão geral de como começar a usar o Gerenciador de tags do Google, adicionar uma tag e analisá-la para ver se está completa.

Durante o processo, usaremos o blog (criado no capítulo anterior) para demonstração das diferentes etapas.

Step 1 - Conforme mostrado na captura de tela acima, clique no código do contêiner (GTM-XXXXXXX) no canto superior direito ao lado do rótulo Alterações do espaço de trabalho: 0.

Você verá a caixa de diálogo Instalar Gerenciador de tags do Google.

Agora, queremos instalar o código do Gerenciador de tags do Google em nosso blog.

Step 2 - Para obter o código GTM na figura acima adicionado ao blog, vá para https://Blogger.com e faça login com suas credenciais.

Você verá uma tela conforme mostrado abaixo com o nome da postagem do seu blog na lista.

Step 3 - No painel à esquerda, localize a opção: Tema.

Você verá a seguinte tela.

Step 4- Clique em Editar HTML para editar o código HTML do blog. Um código-fonte HTML para o seu blog ficará visível, conforme mostrado na figura a seguir.

Aqui, queremos instalar o código do Gerenciador de tags do Google. Conforme instruído pelo GTM, somos obrigados a inserir o código nos seguintes locais -

O mais alto possível na tag <head>
Na tag <body>

Step 5- Localize a tag <head> no código HTML acima. Volte parahttps://tagmanager.google.come copie o código na caixa de diálogo Instalar Gerenciador de tags do Google na etapa 1 acima. Cole o código copiado exatamente sob a abertura da tag <head>.

Step 6 - Da mesma forma, localize a tag <body> no código HTML.

Note- Você pode usar a tecla de atalho Ctrl + F para localizar as marcas <head> e <body>. A funcionalidade de pesquisa do navegador será útil para localizar as tags.

Depois de localizar a tag <body>, repita o procedimento para copiar o código associado à tag <body> do Gerenciador de tags do Google.

Para facilitar a localização da tag, normalmente, a tag <body> começará com <body expr: class = '"loading" + data: blog.mobileClass'>.

Cole o código necessário na tag <body> e clique em Salvar tema.

Ele mostrará o seguinte erro e é normal ver esse erro.

Step 7 - Para resolver esse problema, no código do Gerenciador de tags do Google sob a tag <head>, localize a linha com -

j = d.createElement(s),dl = l != 'dataLayer'?' &l = '+l:'';j.async = true;j.src =

Substitua o & conforme sublinhado na linha acima com &e clique em Salvar tema. O erro será resolvido.

Isso conclui o processo de adição do código do gerenciador de tags do Google ao seu blog.

Introdução à Tag

Simplificando no site de suporte do Gerenciador de tags do Google, uma tag é um pedaço de código que envia informações a um terceiro, como o Google Analytics.

Tomando uma sugestão a partir daí, com relação a uma ferramenta analítica particular, pode haver várias tags associadas. Ter todos eles em uma página é realmente uma vantagem, pois o profissional de marketing do produto poderá ver várias métricas associadas à página.

No entanto, há um ponto igualmente importante a ser observado aqui, não se deve exagerar nas tags de um site. Isso não apenas aumenta a confusão durante o gerenciamento da tag, mas também torna complicado diferenciar os dados provenientes de várias tags.

O código a seguir, como vimos na caixa de diálogo Instalar Gerenciador de tags do Google, é na verdade uma tag.

<!-- 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','GTM-M8QLQCZ');
</script>
<!-- End Google Tag Manager -->

Localização de uma etiqueta

A localização de uma tag pode estar em qualquer lugar no código-fonte da página. Ele pode estar no topo como o acima ou pode ficar no rodapé transmitindo as informações necessárias.

Isso conclui uma rápida introdução a uma tag e como ela pode ser criada.

Gatilhos

Os gatilhos realmente detectam quando uma tag será disparada. Este é um conjunto de regras para configurar uma tag a ser disparada. Por exemplo, os acionadores podem decidir que uma determinada tag 'X' será disparada quando um usuário executar a ação 'Y'. Mais especificamente, um acionador pode direcionar uma tag para disparar quando um botão específico em um formulário específico é clicado.

Os gatilhos são condições que podem ser anexadas a uma tag para funcionar da maneira desejada. Um exemplo do mundo real será, considere que uma tag está sendo configurada para uma transação bem-sucedida em uma página de comércio eletrônico.

A tag indicará se a transação foi realizada com sucesso. Para fazer isso, um acionador será criado, que dirá, disparar a tag somente quando a página de confirmação da transação for exibida para o usuário.

Mais proeminentemente, considere que você deseja rastrear todas as visualizações de página de um blog / site. Então, especificamente, você pode criar uma tag com o Google Analytics, que será disparada quando o usuário acessar qualquer página do seu blog / site. Um acionador, neste caso, será genérico, dizendo disparar esta tag em todas as páginas. O gatilho será definido de acordo.

O gatilho às vezes pode ser complicado. Por exemplo, se alguém clicar em um botão em uma página específica, dispare uma tag.

Conforme mostrado na figura a seguir, você pode acessar os gatilhos clicando em Triggers no painel esquerdo da tela.

Como não há gatilhos configurados ainda, você não verá resultados nos gatilhos.

Variáveis

Essencialmente, as variáveis são valores que podem ser alterados.

Por exemplo, consideremos um simples clique em um link. Quando um link é clicado, existem várias variáveis integradas que são coletadas com este evento de clique. Essas variáveis podem, eventualmente, ser usadas para registrar o link, que é redirecionado quando um usuário clica no botão de link específico.

Indo em detalhes, você também pode registrar a classe div particular do elemento que foi clicado, usando variáveis. Eles são chamados de variáveis, porque se houver 10 botões de link diferentes na página, o redirecionamento desses botões de link vai mudar, dependendo de qual dos elementos for clicado.

Você pode acessar variáveis usando o painel esquerdo e clicando em Variáveis.

O Gerenciador de tags do Google oferece dois tipos de variáveis -

Variáveis integradas
Variáveis definidas pelo usuário

Como os nomes indicam, você tem um escopo de usar as variáveis existentes, conforme oferecido pelo Gerenciador de tags do Google, ou pode criar suas próprias variáveis.

Vamos considerar um exemplo e ver como funciona uma tag. Estaremos depurando a tag agora com o Gerenciador de tags do Google.

Depurando uma tag

Na seção inicial deste capítulo, reservamos um tempo para adicionar o Código de rastreamento do Gerenciador de tags do Google ao nosso blog no Blogger.com.

Esta foi a primeira etapa para que o Gerenciador de tags do Google identifique nosso código de rastreamento. Se você observar com atenção, no script que foi incluído na tag <head>, existe um código de rastreamento do Gerenciador de tags do Google no formato GTM-XXXXXXX.

Agora, quando se trata de depurar uma tag, é bastante simples com a interface do Gerenciador de tags do Google. Usaremos a tag básica do Google Analytics para a demonstração. Estamos presumindo que já existe uma conta do Google Analytics.

Criação de uma tag básica do Google Analytics

No Gerenciador de tags do Google, para criar uma tag, há várias etapas envolvidas. Para entrar nos detalhes de cada um deles, consideremos a tela a seguir.

Step 1 - Clique no botão ADICIONAR NOVA TAG.

Um painel à direita deslizará para iniciar o processo de criação de uma nova tag. Isso mostrará uma tag em branco sem título para você configurar.

Step 2- Dê um nome à sua tag. Vamos dar a ele o nome - Primeira tag.

Step 3 - Uma vez feito isso, clique no texto / ícone - Escolha um tipo de tag para iniciar a configuração….

Outro painel deslizará da direita, que terá os seguintes tipos de tag exibidos.

Como vimos na definição, existem diferentes tags associadas a diferentes ferramentas analíticas. Nesta etapa específica, o Gerenciador de tags do Google exige que você especifique o tipo exato de tag que deseja criar.

Você notará alguns tipos de tag como segue -

Universal Analytics
Google Analytics clássico
Remarketing do AdWords
Google Optimize

Note- Universal analytics é a versão aprimorada e mais popular do Google Analytics. No entanto, existem muitos sites que empregam o Google Analytics clássico.

Para este exemplo, vamos continuar especificando o Universal Analytics.

Step 4- Clique em Universal Analytics para continuar. O controle voltará para a tela anterior e você deverá selecionar o que deseja rastrear. Veja a imagem a seguir para referência.

Step 5 - Marque Habilitar configurações de anulação nesta tag.

Note- Estamos usando esta etapa para nos familiarizarmos com a Criação de Tags em um ritmo mais rápido. Você pode prosseguir e criar uma variável de configurações do Google Analytics sem marcar a caixa de seleção acima também.

Step 6- Abra a interface do Google Analytics. No Google Analytics, localize o botãoADMINna primeira página. Na seção Propriedade, clique em Configurações da propriedade. Você poderá ver uma tela semelhante à seguinte.

Step 7- Copie o Id de rastreamento. O ID de rastreamento terá o formato UA-XXXXX-X.

Step 8- Depois de copiar o ID de rastreamento, volte para a interface do Gerenciador de tags do Google. Como já mostrado anteriormente, cole o ID de rastreamento na caixa de texto associada.

Agora, estamos prestes a configurar o elemento importante da tag - um gatilho.

Diremos ao Gerenciador de tags do Google que a tag deve ser disparada se a página for visualizada pelo usuário. Para fazer isso, devemos configurar o gatilho na próxima seção da tela.

Step 9 - Clique em Escolher um acionador para fazer esta tag disparar ...

Uma caixa de diálogo deslizará da esquerda, exigindo que você selecione um gatilho. Ele mostrará o gatilho conforme mostrado na imagem a seguir.

Step 10 - Clique em Todas as páginas.

O controle retornará à tela de configuração do tag. Clique no botão azul SALVAR no canto superior direito. Você configurou com sucesso sua primeira tag!

Step 11 - Agora, para o modo de depuração, clique no botão VISUALIZAR em cinza.

Conforme mostrado na imagem acima, uma caixa laranja aparecerá. Isso indica que o modo de depuração está ativado. Acesse seu blog usando o link disponível.

Step 12 - Agora, ao acessar o blog, você deverá ver uma seção em seu blog mostrando a seção de depuração do Gerenciador de tags do Google.

Além disso, se você observar de perto, há First Tagsendo exibido em Marcas disparadas nesta página. Isso indica que nossa tag foi disparada em uma exibição de página bem-sucedida.

Step 13- Na seção de depuração, clique em Variáveis. Em seguida, clique em Janela carregada no painel esquerdo. Esta ação significa que estamos selecionando uma ação para analisar as variáveis carregadas como resultado dessa ação.

Ele mostrará a seção Variáveis conforme marcado em uma caixa verde na imagem a seguir.

Você pode analisar as variáveis com mais clareza à medida que avançamos para o próximo capítulo.

↰ Previous page Next page ↱