Gerenciador de tags do Google - Guia rápido

Para entender o Gerenciador de tags do Google, primeiro precisamos entender alguns conceitos relacionados.

Marketing de Produto - Histórico

Com o advento da Internet e da web, houve uma imensa necessidade de se destacar do resto para promover seu produto. Esta era ultrapassou os tempos em que a publicidade e o marketing funcionavam de forma fantástica com os suportes em papel.

Com a exigência de marketing do produto se tornando uma tarefa focada e habilidosa, surge uma nova geração de profissionais chamados “Profissionais de Marketing de Produtos”. Essas pessoas devem estar atualizadas com as tendências do mercado, o comportamento do usuário e os gostos e desgostos de seu público.

O profissional de marketing de produto, usando o chapéu de analista e anunciante, precisa saber muitas coisas para estar no controle de tudo. Uma delas é criar uma campanha de marketing para o engajamento bem-sucedido do usuário.

Se formos com a definição da Wikipedia para marketing de produto - Product Marketing is the process of promoting and selling a product to an audience.

Em suma, um comerciante de produto precisa criar várias campanhas promocionais para ficar no topo da concorrência, aumentando assim as vendas.

Desde o boom das pontocom, para um marketing de produto de sucesso, a presença de um produto é necessária não apenas no mundo real, mas também no mundo da web. A presença e aceitação no mundo da web é diretamente proporcional ao sucesso do produto.

Ferramentas de marketing de produto

Nessa busca de aumentar as vendas de produtos, além de ser criativo, o profissional de marketing precisa estar ciente de certas ferramentas eficazes. Essas ferramentas, por si só, são úteis para comercializar o produto e analisar a tendência do usuário de acordo.

A seguir estão algumas ferramentas de marketing de produto comumente usadas -

  • Google Analytics
  • Chartbeat
  • Kissmetrics
  • Sprint Metrics
  • Woopra
  • Clicky
  • Teste de usuário
  • Ovo louco
  • Mouseflow
  • Mint

O Google, obviamente, está no topo da lista com sua oferta - Google Analytics. O Google introduziu essa ferramenta de análise muito cedo durante a evolução do marketing do produto. Na verdade, é a ferramenta mais confiável e amplamente utilizada na comunidade de marketing de produto.

A ferramenta possui um modo de operação único, utilizando uma interface amigável. O usuário deve adicionar o número da conta do Google Analytics às suas respectivas páginas de site / blog. Assim, as visitas e os cliques do usuário são rastreados pelo Google Analytics.

Usando diferentes ferramentas analíticas

Semelhante ao Google Analytics, todas as outras ferramentas fornecidas na lista acima têm uma maneira diferente de funcionar. Quando se trata de usar uma ferramenta específica, é necessário modificar o código do site / blog para começar a rastrear o comportamento do usuário.

Essas ferramentas fornecem uma análise sobre qual página foi usada na maioria das vezes, quais foram as atividades realizadas pelo usuário, etc. Além disso, essas ferramentas podem fornecer um feedback rápido na forma de dados para os recursos recém-lançados.

A forma como o Google Analytics funciona é bastante semelhante a como a maioria das outras ferramentas listadas funcionaria. Agora, considere uma organização de produto relativamente grande, focada na construção de um novo recurso para aprimorar a experiência do cliente. Para uma organização em grande escala, é útil ter processos / pipelines de lançamento enormes, que obtêm o recurso desejado de uma maneira contínua.

Entre no Google Analytics. Para que o Google Analytics seja útil, é necessário que todas as páginas no código do site do produto tenham esse número de conta. Por mais simples que pareça, para grandes organizações de produtos, às vezes, adicionar um pequeno trecho de código na página pode ser complicado e exige testes rigorosos após a criação desse recurso.

Se a organização do produto pretende usar várias ferramentas de análise de dados conforme fornecido na lista acima, multiplique o esforço em termos de tempo e custo pelo número de ferramentas em uso. Isso se torna doloroso conforme o produto amadurece. Eventualmente, avaliar o comportamento do usuário também se torna uma obrigação. Nesses casos, é importante ter um mecanismo de um para todos, para que seja mais fácil para os profissionais de marketing de produto criar diferentes campanhas dinamicamente.

Como diferentes ferramentas usam diferentes técnicas para rastrear o comportamento do usuário, há uma necessidade de ir para um único meio, que responde por essas diferentes técnicas com ferramentas diferentes.

Gerenciador de tags do Google - Introdução

Para um profissional de marketing de produto, usar ferramentas diferentes exige a respectiva curva de aprendizado. Ter diferentes ferramentas acarreta diferentes códigos a serem inseridos e, portanto, as mudanças no site. Se houver um processo simples e direto de alteração do código do site, será uma bênção adicionar os diferentes códigos relacionados a diferentes ferramentas analíticas.

O Gerenciador de tags do Google (GTM) é uma ferramenta gratuita que facilita para os profissionais de marketing adicionar e atualizar tags de sites. As tags permitem o monitoramento de visualizações de páginas do site, rastreamento de conversão, etc. Usando o Gerenciador de tags do Google, pode-se ter uma solução de gerenciamento de tags eficaz que permite atualizações rápidas e fáceis nas tags do site. Tags são basicamente trechos de código, que se destinam a análise de tráfego e otimização de marketing.

Para um profissional de marketing de produto envolvido em diferentes soluções de análise de produto, o Gerenciador de tags do Google é essencial, pois cobre muitos aspectos do marketing de produto sob o mesmo teto. Você pode adicionar e atualizar AdWords, Google Analytics, Firebase Analytics, Floodlight e outras tags de terceiros usando o Gerenciador de tags do Google.

Para configurar o Gerenciador de tags do Google, ter um site é fundamental. Para o propósito do tutorial, passaremos pelo seguinte processo para configurar o Gerenciador de tags do Google.

  • Configure um blog com Blogger.com
  • Crie uma conta com o Gerenciador de tags do Google
  • Instale uma tag no blog

Crie um blog com Blogger.com

Step 1 - Para começar a criar um blog, siga este link - https://blogger.com. A página inicial do blogger aparecerá conforme mostrado na imagem a seguir.

Step 2 - Clique no botão - CRIE SEU BLOG para começar a criar um blog.

Na próxima etapa, o Blogger solicitará sua conta do Google. O Blogger, sendo um dos produtos do Google, facilita sua vida ao permitir que a conta do Google crie um blog online.

Step 3 - Insira suas credenciais para o Google e você verá a tela a seguir para criar seu blog.

Step 4 - Escolha um título, endereço e tema do blog de sua escolha.

Inserir um título é bastante simples, você pode fornecer qualquer título que desejar. Com o endereço, conforme você começa a digitar o endereço do blog desejado, a interface começa a pesquisar a disponibilidade. A captura de tela a seguir mostra como o endereço de um blog está sendo pesquisado.

Depois de concluir esse processo e o endereço do blog estiver disponível, você verá a seguinte mensagem na caixa de texto.

Conforme mostrado na captura de tela acima, o endereço do blog - https://gtmtutorial2017.blogspot.com é selecionado.

Step 5 - Depois de selecionar o design desejado, clique no botão vermelho - Criar blog!

O sistema demorará alguns segundos e seu novo blog estará pronto. Uma vez feito isso, você verá a seguinte interface para começar a escrever um blog.

É necessária pelo menos uma postagem para ver o Gerenciador de tags do Google funcionando de maneira eficaz.

Step 6 - Crie sua primeira postagem no blog clicando no botão do link em azul - Crie uma nova postagem.

Step 7- Você pode começar a escrever o conteúdo da sua primeira postagem no blog. Forneça um título de postagem conforme necessário na parte superior da tela.

Muitas vezes, o blogger facilita a composição de conteúdo HTML e rich text. Isso é possível usando o botão de alternância Compose / HTML no canto superior esquerdo da tela. Vamos ver como usar a opção Compor como exemplo.

Step 8- Clique em Compor, um editor de rich text será mostrado. Comece a adicionar algum conteúdo.

Step 9 - Uma vez feito isso, clique no botão Publicar na seção superior direita da tela.

Você será redirecionado de volta para a tela conforme mostrado na imagem acima, com uma nova postagem visível na lista. Isso conclui a criação do site no Blogger.com

A próxima etapa é criar uma conta do Gerenciador de tags do Google. Em seguida, adicionaremos o código do contêiner ao site. Finalmente, seremos capazes de rastrear as visualizações de página / eventos correspondentes com GTM.

Crie uma conta com o Gerenciador de tags do Google (GTM)

Step 1- Para começar a usar o Gerenciador de tags do Google, use este link: Gerenciador de tags do Google . Você verá a seguinte página inicial do Gerenciador de tags do Google.

Step 2- Clique em qualquer um dos links para INSCREVER-SE GRATUITAMENTE. Os links estão disponíveis na página - no centro e no canto superior direito.

Step 3 - Vá em frente e explore a página como quiser, pois ela fornece informações muito úteis sobre o Gerenciador de tags do Google.

Depois de clicar em INSCREVER-SE GRATUITAMENTE, a tela a seguir será exibida e o URL mudará para - https://tagmanager.google.com/?hl=en. Isso aparecerá abaixo da tela para fazer login com sua Conta do Google.

Depois de inserir suas credenciais para o Google, a interface do gerenciador de tags aparecerá.

Step 4- GTM exigirá que você adicione sua nova conta. Existem duas etapas -

  • Configurar conta
  • Contêiner de configuração

Step 5- Como primeira etapa, adicione o nome da conta. Para o propósito deste tutorial, usaremos o nome - Tutorial do Gerenciador de tags do Google. Você pode optar por compartilhar dados anonimamente com o Google e outros, para aprimorar sua experiência de marketing de produto.

Step 6 - Clique em Continuar.

Step 7- A próxima etapa é configurar o contêiner. Forneça um nome para o contêiner. Vamos adicionar o nome como - Tag Container. Em Onde usar o contêiner, conforme mostrado na captura de tela a seguir, selecione Web.

Step 8 - Clique em CRIAR.

Em seguida, será exibida uma tela para aceitar os Termos de serviço do Gerenciador de tags do Google.

Step 9 - Clique em SIM para continuar.

Step 10 - Finalmente, será apresentado a você um conjunto de trechos de código, conforme mostrado na captura de tela a seguir, que devem ser adicionados em head e body Tag.

Esses snippets de código são necessários para que os dados do blog criado possam fluir para a interface do Gerenciador de tags do Google.

Passaremos pela criação da tag e respectivos processos em um capítulo subsequente.

Interface do Gerenciador de tags do Google

Reserve um tempo para nos familiarizar com as diferentes seções da interface do Gerenciador de tags do Google.

Primeiro, vamos entender como gerenciar as seguintes seções -

  • Workspace
  • Versions
  • Admin

Área de trabalho

A seção da área de trabalho mostra o trabalho ativo em andamento. Esta seção tem diferentes subseções, como -

  • Overview
  • Tags
  • Triggers
  • Variables
  • Folders

Aprenderemos mais sobre essas subseções nos capítulos subsequentes.

Versões

É muito comum que grandes organizações criem poucas tags e as tenham para revisão ou processo de aprovação.

Ao mesmo tempo, pode ser necessário compreender as tags anteriores publicadas no site. Para todos esses fins, podemos usar a seção Versões. Isso mostra todas as tags possíveis publicadas no espaço de trabalho atual e permite reverter as alterações, se necessário.

Admin

Se desejar configurar sua conta do Gerenciador de tags do Google para diferentes ambientes ou diferentes usuários, você pode usar esta seção.

Você também pode configurar os detalhes da conta e revisar as atividades relacionadas à conta, se houver vários usuários associados a ela.

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 &amp;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.

Gatilhos são condições que podem ser anexadas a uma etiqueta 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 requer 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.

Depois de compreender o processo de criação de uma tag, faz sentido mergulhar fundo e ver como o rastreamento é obtido usando diferentes abordagens.

Tag de visualização de página

Um profissional de marketing de produto precisa entender a contagem de visitantes do site / blog do produto. Isso é realmente crítico, pois ajuda a entender a tendência do visitante. Pode ser para saber se um determinado aprimoramento / recurso adicionado no site / blog é apreciado pelo visitante, se os visitantes acessam o site diariamente / semanalmente, etc.

Considerando que a 'Visualização de página' tem uma importância enorme para entender a simpatia do site / blog, vamos ver como uma visualização de página pode ser rastreada usando uma tag.

Step 1 - Como seguimos as etapas no capítulo anterior, vamos acessar a seção de tags no Gerenciador de tags do Google.

Ele mostrará a tag criada recentemente - Primeira tag.

Step 2 - Clique na Primeira Tag, será exibida a caixa de diálogo com os gatilhos configurados, etc.

Conforme destacado na captura de tela acima, vamos concentrar nossa atenção no ID de rastreamento.

Este ID de rastreamento está associado a Google Analytics. Quando iniciamos o modo de depuração e visitamos o blog, isso será contado como uma única visualização de página.

Neste momento particular, Google Analytics irá registrar a visualização da página em sua interface.

Step 3 - Depure usando o Gerenciador de tags do Google e abra o Google Analytics dashboard, em Fontes de tráfego → Visão geral, você verá as seguintes estatísticas.

Isso mostra que uma visualização de página é registrada e as visualizações de página correspondentes serão rastreadas posteriormente no Google Analytics.

Tags de link

Muitas vezes, haverá certas ofertas promocionais para as quais o usuário pode ser obrigado a deixar o blog ou site. Junto com as promoções, podem ser algumas pesquisas de terceiros que um usuário pode ser obrigado a responder. Essas pesquisas produzirão certas estatísticas, que serão diferentes dos dados que chegam por meio de tags diferentes.

Para isso, é útil ter habilitado o rastreamento de quantas vezes o link está sendo clicado e o usuário é direcionado para fora do site. Esses links são denominados comooutbound links e esses links podem ser rastreados facilmente usando o Gerenciador de tags do Google.

Para demonstrar isso, estaremos criando um link em nosso blog.

A captura de tela acima mostra um link chamado - Um link externo. Este link será usado para rastreamento no Gerenciador de tags do Google. Ele redireciona parahttps://www.google.com

Step 1- Vá para o espaço de trabalho do Gerenciador de tags do Google. Clique em Tags no painel esquerdo. Clique no botão NOVO na página para começar a criar a tag do link externo.

Vamos nomear a tag como - Tag de link de saída.

Step 2 - Siga o mesmo processo da configuração inicial da tag para inserir o código do Google Analytics no campo correto - Id de rastreamento.

Step 3- Selecione o campo Track Type como Event. Você poderá ver mais as seguintes opções.

Essas opções estão de acordo com o tipo de pista - evento. Observe que essas opções não estarão disponíveis em Tipo de trilha - Visualização de página. Isso porque, como estamos anexando o código do Google Analytics ao Gerenciador de tags do Google, para ver os detalhes do evento em tempo real, precisamos de alguns parâmetros.

Step 4- Preencha os detalhes do formulário conforme abaixo. Texto em negrito são os valores a serem inseridos nas caixas de texto.

  • Categoria - Outbound

  • Açao - Click

  • Deixe os campos Rótulo e Valor em branco

  • Manter hit sem interação como False

Step 5 - Em seguida, na seção Acionamento, clique em Escolher um acionador para fazer esta tag disparar…

Step 6- Clique no ícone + azul no canto superior direito. Isso abrirá a seção de gatilho personalizado. Forneça um nome para este gatilho como - Clique em Gatilho.

Step 7 - Clique em Escolher um tipo de acionador para iniciar a configuração ...

Ele mostrará os seguintes tipos de gatilho, conforme mostrado na imagem a seguir.

Step 8- Conforme destacado na figura acima, clique em Apenas links em Tipo de gatilho de clique. Isso mostrará as diferentes opções para configurar o tipo de gatilho recém-criado.

Agora, precisamos configurar o acionador para disparar se o URL clicado tiver um caminho de página como https://www.google.com. Observe que configuramos o link em nosso blog para redirecionar para o mesmo URL.

Step 9 - Configure o gatilho conforme fornecido exatamente na figura acima.

Queremos configurar este acionador para disparar em alguns cliques de link quando o URL da página for igualhttps://www.google.com. Uma vez feito isso, a tela deve ter a seguinte aparência.

Step 10 - Clique no SAVEbotão para salvar este gatilho recém-criado. A tela retornará à configuração do tag para Outbound Link Tag .

Step 11 - Clique em SALVAR para concluir a configuração.

Conforme destacado na figura acima, uma tag completa para link externo deve ser semelhante à mostrada acima.

Agora, vamos colocar a tag em ação.

Step 12- Na área de trabalho, clique no botão VISUALIZAR. O modo de depuração será iniciado.

Step 13- Em seu navegador, em outra aba, abra seu blog. A janela de depuração será exibida na parte inferior da tela.

Conforme mostrado acima, como ainda não clicamos no link, a tag ainda aparece em Tags não disparadas nesta página.

Step 14- Clique no link externo, conforme criado na etapa anterior, a tag será disparada. Você pode vê-lo aparecendo em Marcas disparadas nesta página.

Isso conclui a abordagem de criação de uma tag para um link externo para rastrear os links no blog / site.

Acompanhamento de eventos

Acompanhamento de eventos significa qualquer ação diferente de um carregamento de página. O navegador tem uma resposta específica a qualquer ação que você execute na página. Por exemplo, a ação pode ser tão simples quanto clicar em um link ou enviar um formulário para um complexo, como rastrear visualizações de arquivos e downloads.

Com o Gerenciador de tags do Google, você pode rastrear facilmente os eventos gerados no navegador. Ele registra as respostas do navegador para ação potencial, obtendo, assim, a trilha de evento particular facilmente.

Usaremos o exemplo acima para ver o rastreamento de eventos em ação. No exemplo anterior, criamos um link que redireciona para fora do nosso blog. Neste exemplo, criaremos outro link, que apontará para o nosso blog. Estamos usando este exemplo para demonstrar como os links que saem do blog podem ser rastreados perfeitamente.

Eu criei um link chamado Link interno no blog. Este link redirecionará para a mesma página do blog.

Vamos ao Painel do Gerenciador de tags do Google e criar um novo gatilho para o link de saída. Estaremos usando a variável interna URL de clique para isso. Usando URL de clique, vamos detectar se o link clicado está redirecionando o usuário para fora do blog ou não.

Para ativar o URL de clique da variável embutida, a seguir estão as etapas.

Step 1- Na seção Variáveis, clique no botão em vermelho, CONFIGURAR. Ele mostrará as variáveis ​​integradas disponíveis. Existem diferentes variáveis ​​integradas disponíveis, que são - Páginas, Utilitários, Erros, Cliques, etc.

Step 2- Na categoria Cliques, marque a caixa URL do clique. Isso mostrará as variáveis ​​disponíveis no URL de clique imediatamente. Consulte a tela a seguir para referência.

Agora que a variável está configurada, podemos configurar o gatilho.

O gatilho será habilitado quando um usuário clicar em todos os URLs, que estão redirecionando para fora do blog. Criar este gatilho é bastante simples.

Step 3- Vá para Triggers, clique em Novo. Dê um nome ao gatilho. Digamos que o nome seja - External Link Trigger.

Step 4 - Em Configuração do acionador, clique em Escolher um tipo de acionador para iniciar a configuração ...

Step 5- A partir das opções disponíveis, em Clique, selecione Apenas links. Veja a tela a seguir para as etapas até agora.

Quando apenas Links é clicado, você é direcionado de volta à primeira seção, onde deverá fornecer a exceção de URL. A seguir estão as etapas para fazer isso.

Step 6 - Para a opção Este acionador dispara, selecione Alguns cliques no link.

Step 7- Nas condições, selecione URL de clique, que deve ser previamente selecionado. Selecione o valor não contém nas opções de condição.

Step 8- Na caixa de texto de valor, insira um valor que é o URL do seu blog. Em nosso caso, inseriremos gtmtutorial2017.blogspot.in. Depois de terminar, a tela será semelhante à seguinte.

Step 9 - Clique no botão Salvar em azul para salvar seu novo acionador.

Agora é hora de configurar nossa tag, que usaremos para rastrear o evento de clique, que irá redirecionar o usuário para fora do blog.

Step 10- Abra a seção Tags, clique no botão NOVO. Dê um nome à sua tag, vamos chamá-la - Tag de link externo.

Step 11 - Em Configuração de tag, clique em Escolha um tipo de tag para iniciar a configuração ... Selecione o tipo de tag como Universal Analytics e insira os seguintes detalhes na tela.

  • Em Track Type, selecione Event
  • Para categoria - insira o link externo
  • Em ação - insira o clique
  • Para etiqueta, clique no ícone de opções

Step 12 - No painel lateral exibido, selecione URL de clique.

Step 13- Uma vez feito isso, marque a caixa Habilitar configurações de substituição nesta tag. Na caixa de texto ID de rastreamento, insira seu Código de rastreamento do Google Analytics.

Step 14- Role para baixo para configurar o acionamento. Vamos usar nosso gatilho recém-criado.

Step 15- Clique em Escolher um gatilho para fazer esta tag disparar ... Isso exibirá os gatilhos disponíveis. Selecione External Link Trigger, que criamos anteriormente.

Isso conclui a configuração da tag. Clique no botão Salvar.

Step 16- Agora, para depurar a tag, clique no botão Visualizar em cinza. Isso iniciará o Gerenciador de tags do Google no modo de depuração.

Step 17- Volte para o seu blog e atualize o blog para que o depurador do Gerenciador de tags do Google comece. Considerando o exemplo acima, existem dois links sendo mostrados na página. Além disso, há a tag de link externo, que é mostrada em Tags não disparadas nesta página.

Agora é hora de testar a configuração da tag. Usaremos Ctrl + Clique em ambos os cenários para verificar se a tag é disparada. Ctrl + Clique fará com que o link seja aberto na nova aba, sem atualizar a página atual. Precisamos ter a página intacta, pois não poderemos ver as tags disparadas, se a página for atualizada.

Step 18- Primeiro, use Ctrl + Clique no link interno, conforme destacado na figura acima. O ideal é que a tag não seja disparada, pois o link direciona o usuário para o mesmo blog.

Conforme mostrado na figura acima, na seção Resumo no depurador, você verá outro evento - gtm.linkClick. Isso significa que o GTM registrou o evento de clique.

Porém, você não verá nenhuma mudança na seção Tags disparadas nesta página. Isso ocorre porque configuramos a guia para links externos.

Step 19 - Agora Ctrl + Clique em um link de saída (criado na seção anterior).

Observe a seção de resumo, ela será atualizada novamente para outro evento - gtm.linkClick.

Conforme mostrado na figura acima, para o próximo evento registrado, haverá um tag disparado - Tag de Link Externo. Você poderá vê-lo em Marcas disparadas nesta página.

Dessa forma, você pode empregar o rastreamento de eventos com o Gerenciador de tags do Google e configurar tags para dados críticos de que você precisa em seu site / blog.

Acompanhamento de formulário

Quase sempre, em qualquer site / blog, você verá um formulário que capturará certos detalhes do usuário. Como um profissional de marketing de produto, torna-se tedioso saber se o formulário está sendo usado pelos visitantes.

Pode ser uma boa abordagem saber quantas vezes um usuário preencheu informações neste formulário e quantas vezes encontrou um erro. Com o Gerenciador de tags do Google, você pode rastrear facilmente os envios de formulários. Esta seção o guiará pelo processo.

Para este exemplo, teremos um formulário de contato criado em nosso blog.

Step 1- Para o blogger, para ter um formulário de contato criado, use a opção Layout → Adicionar um Gadget. Depois de clicar em Adicionar um gadget, você verá a tela a seguir, onde encontrará o gadget de pesquisa de blogs. Clique no ícone de mais (+) azul para inseri-lo no blog.

Uma vez feito isso, ele aparecerá em seu blog conforme mostrado na imagem a seguir.

Agora, vamos configurar os gatilhos relacionados e a tag.

Para começar com o gatilho, seguiremos os mesmos passos. Primeiro adicionaremos enable uma variável embutida chamada Form ID, então criaremos um gatilho que utilizará esta variável recém-criada.

Feito isso, usaremos este novo gatilho para configurar uma tag para rastrear as interações com o formulário.

Para habilitar a variável interna Form ID, a seguir estão as etapas.

Step 2- Na seção Variáveis, clique no botão em vermelho, CONFIGURAR. Na categoria Formulários, marque a caixa ID do formulário. Isso mostrará o ID do formulário nas variáveis ​​disponíveis imediatamente. Consulte a tela a seguir para referência.

Agora que a variável está configurada, podemos configurar o gatilho.

O gatilho será ativado quando o usuário enviar qualquer dado no formulário de contato.

Step 3- Para fazer isso, vá para Triggers, clique em Novo. Dê um nome ao gatilho. Vamos chamá-lo de - Gatilho de envio de formulário.

Step 4 - Em Configuração do acionador, clique em Escolher um tipo de acionador para iniciar a configuração ...

Step 5- A partir das opções disponíveis, em Engajamento do usuário, selecione Envio de formulário. Veja a tela a seguir para as etapas até agora.

Ao clicar em Envio de formulário, você será direcionado de volta à primeira seção, onde precisará fornecer o ID do formulário.

Step 6 - Para a opção, Este gatilho dispara, selecione Todos os formulários.

Depois de concluir a etapa acima, isso permitirá o rastreamento de todos os formulários enviados na página do blog. Você também pode usar um ID de formulário específico, que pode ser configurado quando você cria seu blog.

Para configurar um ID de formulário específico, você pode obter o suporte do desenvolvedor do seu site / blog para obter mais detalhes. Após a conclusão dessas etapas, consulte a tela a seguir para obter uma referência completa.

Step 7 - Clique no botão Salvar em azul para salvar seu novo acionador.

Agora é hora de configurar nossa tag, que usaremos para rastrear o evento de clique que redirecionará o usuário para fora do blog.

Step 8- Abra a seção Tags, clique no botão NOVO. Dê um nome à sua tag, vamos chamá-la - Form Submission Tag.

Step 9 - Em Configuração de tag, clique em Escolha um tipo de tag para iniciar a configuração ... Selecione o tipo de tag como Universal Analytics e preencha os seguintes detalhes -

  • Em Track Type, selecione Event
  • Para categoria - insira o envio do formulário
  • Em ação - insira o formulário enviado
  • Para etiqueta, clique no ícone de opções

Step 10 - No painel lateral exibido, selecione ID do formulário.

Step 11- Uma vez feito isso, marque a opção Habilitar configurações de substituição nesta tag. Na caixa de texto ID de rastreamento, insira seu código de rastreamento do Google Analytics.

Role para baixo para configurar o acionamento. Vamos usar nosso gatilho recém-criado.

Step 12- Clique em Escolher um gatilho para fazer esta tag disparar ... Isso exibirá os gatilhos disponíveis. Selecione o acionador de envio de formulário, que criamos anteriormente.

Isso conclui a configuração da tag. Clique no botão Salvar.

Step 13- Agora, para depurar a tag, clique no botão Visualizar em cinza. Isso iniciará o Gerenciador de tags do Google no modo de depuração.

Step 14- Volte para o seu blog e atualize o blog para que o depurador do Gerenciador de tags do Google comece. Haverá a tag de envio de formulário, que é mostrada em Tags não disparadas nesta página.

Step 15- Agora interaja com o formulário Pesquisar este blog inserindo alguns valores nele. Vamos digitar Primeiro, já que nosso primeiro post contém a palavra Primeiro.

Step 16- Clique em Pesquisar. O novo evento será visto em Resumo e a tag de envio de formulário aparecerá em Tags disparadas nesta página.

Dessa forma, podemos ter tags de envio de formulário criadas usando o Gerenciador de tags do Google.

Além de criar as tags e gerenciar os acionadores e variáveis ​​associados, o Gerenciador de tags do Google tem mais alguns recursos a oferecer. Isso inclui o material de manutenção, como organizar usuários, pastas que são usadas para organizar as tags de acordo com a ordem desejada, etc.

Nesta seção, teremos uma visão geral de como gerenciar os usuários e diferentes pastas relacionadas às tags.

Gestão de Usuários

Não é um cenário incomum para uma equipe de marketing de produto usar uma única conta do Gerenciador de tags do Google para gerenciar diferentes campanhas de marketing. Haverá funções diferentes, que terão certas permissões, como criar uma tag, excluir / modificar uma tag, criar outro usuário, etc.

O Gerenciamento de usuários fornece um portal completo para gerenciar os usuários que utilizam os recursos do GTM. O gerenciamento de usuários funciona em dois níveis -

  • Nível de conta
  • Nível do contêiner

Para acessar o Gerenciamento de usuários, clique em ADMINISTRAR na barra de menu superior esquerda.

Conforme mostrado na figura a seguir, você poderá ver o gerenciamento de usuários associado à conta e ao contêiner.

A diferença importante entre os dois é - se você fornecer acesso a um usuário no nível da conta, o usuário terá acesso a todos os contêineres dessa conta. Ao passo que, se o acesso for fornecido ao usuário no nível do contêiner, o usuário pode modificar / adicionar / excluir as tags apenas nesse contêiner.

Para ver os detalhes de todos os níveis de acesso disponíveis, clique em Gerenciamento de usuários under the Container level (destacado em amarelo acima).

Isso mostrará as contas disponíveis com as permissões com as quais são fornecidas. Principalmente, será a conta do Google que você está usando para fazer login no GTM.

Clique no botão NOVO em vermelho. Ele mostrará a seguinte tela.

Conforme mostrado na figura, você pode adicionar um endereço de e-mail de sua escolha, a quem deseja atribuir permissões de acesso e, em seguida, fornecer as permissões desejadas no nível do contêiner.

A seguir estão as permissões disponíveis -

  • No Access - Impedir que o usuário acesse as tags do contêiner.

  • Read- O usuário poderá apenas ler as tags. Nenhuma modificação ou operação de exclusão pode ser executada.

  • Edit - O usuário pode adicionar / modificar / excluir as tags disponíveis.

  • Approve- O usuário tem uma permissão elevada para aprovar as tags para o ambiente ativo. Mais sobre ambientes posteriormente no tutorial.

  • Publish - Todas as permissões, semelhantes a um usuário administrador.

Isso conclui a visão geral do gerenciamento de usuários no nível do contêiner.

At the account level, pode-se configurar um usuário como usuário geral ou usuário administrador.

Permissões semelhantes podem ser atribuídas ao usuário que está sendo adicionado; a única diferença é - o usuário terá acesso a todos os contêineres dessa conta.

Isso conclui uma visão geral do gerenciamento de usuários no nível da conta.

Pastas

As pastas são necessárias especialmente quando você tem várias tags e gatilhos em sua conta. As pastas podem ser úteis quando você tem um grande número de tags / gatilhos para controlar.

Para organizar as tags e triggers nessas pastas, pode-se usar sua própria criatividade. As pastas podem ser criadas com base nas diferentes áreas de aplicação ou nos usuários ou talvez na finalidade pela qual estão sendo criadas. A equipe de marketing de produtos agrícolas pode tomar sua própria decisão de ter uma estrutura de pastas específica em vigor.

Outra maneira de ver as pastas pode ser o aspecto das ferramentas analíticas em uso. Com base na ferramenta analítica, pode-se criar uma tag, o que será útil no longo prazo.

Para criar pastas diferentes, clique em Pastas no painel esquerdo. Você verá a seguinte tela.

As tags criadas até agora serão exibidas na tela. Você pode ter as tags organizadas criando diferentes pastas usando a opção - NOVA PASTA exibida no canto superior direito da tela.

Depois de clicar em NOVA PASTA, um pop-up rápido será aberto da seguinte maneira.

Na tela anterior, você sempre pode mover as tags de acordo com sua necessidade para a pasta desejada.

Isso conclui a introdução à criação de pastas no Gerenciador de tags do Google.

Temos criado, modificado e depurado as tags em nosso ambiente de depuração. Até agora, não vimos as tags ao vivo em nosso blog.

Para ter as tags ao vivo no blog, precisamos publicá-las. Queremos ter as tags publicadas do que ter o modo de visualização sempre.

Publicar as tags é bastante simples.

Step 1 - Clique no botão ENVIAR no canto superior direito da tela.

Ele mostrará a seguinte tela.

Step 2 - Insira um nome de versão identificável para que possa ser facilmente entendido para as alterações feitas.

Com a descrição da versão, você pode ser o mais elaborado possível sobre as alterações / adições da tag nessa versão específica.

Step 3 - Role para baixo até Alterações do Espaço de Trabalho, você verá todas as alterações feitas nas tags, que não estão publicadas ou em modo PREVIEW.

Da mesma forma, em Histórico de atividades, você pode obter uma compreensão exata das alterações / atualizações que foram feitas na conta desde o início dos tempos.

Step 4- Forneça um nome e uma descrição da versão. Você pode fornecer o nome da versão como Primeira versão e pode fornecer a descrição como Primeira atualização do Gerenciador de tags do Google.

Por enquanto, deixaremos Publicar no ambiente como Live. Isso ocorre porque não temos nenhum outro ambiente além do Live ainda.

Step 5 - Clique em PUBLICAR e será apresentado um resumo para esta versão em particular.

É assim que você pode publicar as alterações feitas no espaço de trabalho do Gerenciador de tags do Google.

Você pode usar um plug-in do Google Chrome - Assistente de tags do Google para ver as tags sendo disparadas sem o modo de visualização ativado.

Criação de ambientes no Gerenciador de tags do Google

Existem diferentes maneiras de configurar um ambiente a ser usado com o Gerenciador de tags do Google.

Normalmente, no mundo do software, a palavra Ambiente é usada no contexto de onde o recurso específico está sendo testado / revisado.

Step 1 - Para visualizar os ambientes disponíveis no Gerenciador de tags do Google, clique em ADMINISTRADOR.

Step 2 - Na seção Container, clique em Ambientes.

Você poderá ver a tela conforme mostrado acima.

Normalmente, grandes empresas de software têm seus sites divididos em ambientes diferentes para facilitar o processo de liberação de um recurso. Os desenvolvedores trabalham em seu site de desenvolvimento e, em seguida, as alterações de recursos são enviadas para o site de teste. Finalmente, quando as mudanças são verificadas no site de teste, as mudanças são enviadas para o ambiente Live.

No contexto do Gerenciador de tags do Google, existe uma flexibilidade para adicionar diferentes ambientes, o que permitirá que você valide sua tag completamente antes que ela esteja no site Live. Para este tutorial, criaremos um ambiente, denominado ambiente Dev. A seguir estão as etapas.

Step 3- Clique no botão NOVO em vermelho. Você poderá ver a seguinte caixa de diálogo.

Step 4- Preencha os detalhes conforme mostrado na figura acima. Vamos fingir que nosso site de desenvolvimento é o mesmo em que estamos trabalhando agora, para fazer as alterações necessárias.

Step 5 - Clique em CRIAR e você verá um prompt como o seguinte.

Conforme mostrado na figura acima, o prompt mostra duas maneiras de usar o ambiente.

  • Using a Share Preview Link - Este link é útil quando você deseja divulgar as mudanças em suas tags para os membros de sua equipe, quando há equipes maiores.

  • With a snippet- Se você tiver certeza de que um determinado site funcionará como seu ambiente de desenvolvimento / preparação, poderá usar esta opção de snippet. Um snippet para este ambiente está disponível, para que você possa acessar o site e ver as alterações que foram feitas recentemente.

Step 6- Clique em PUBLICAR PARA DEV para vê-los em ação. A próxima tela solicitará as mudanças disponíveis para inserir no ambiente recém-criado.

Serão mostradas as alterações que ainda não foram enviadas ao respectivo ambiente. Além disso, o nome da versão é mostrado, para que o usuário saiba qual versão está sendo publicada no respectivo ambiente.

Step 7- Clique em PUBLICAR AGORA para ver as mudanças disponíveis em seu ambiente recém-criado. Ele mostrará a mensagem de sucesso com um carimbo de data e hora.

Na lista de ambientes disponíveis, clique no nome do novo ambiente, no nosso caso - Dev.

As opções disponíveis para compartilhar o link do ambiente serão exibidas, conforme mostrado abaixo.

Usando qualquer uma das abordagens acima, você poderá ver as mudanças em sua tag em seu ambiente de desenvolvimento (Dev).

Uma camada de dados pode ser vista como um objeto contendo todas as informações para passar e processar com o Gerenciador de tags do Google. Este é um conceito um pouco técnico. O termo camada de dados é usado para denotar a estrutura de dados usada pelo Gerenciador de tags do Google para armazenar, processar e passar dados entre seu site / blog e o gerenciador de tags.

Para elaborá-lo ainda mais, uma camada de dados pode alimentar os dados em sua ferramenta de análise sobre o seu visitante. Tomando outra perspectiva para a definição, a camada de dados é, na verdade, uma lista de requisitos e objetivos de negócios para cada subconjunto do contexto digital.

Vamos dar um exemplo de site de comércio eletrônico, os requisitos de negócios podem incluir -

  • Informações transacionais, tendo os detalhes sobre o que foi comprado

  • Dados do visitante, sobre quem comprou

  • Outros detalhes sobre a compra, como onde a compra foi feita e a que horas

  • Por último, as informações sobre outros fatores, como se o visitante se inscreveu nas atualizações por e-mail ou não

Então, em poucas palavras, a camada de dados carrega informações que podem ser usadas por diferentes ferramentas / usuários / partes interessadas, conforme necessário.

No Gerenciador de tags do Google, dataLayer é uma matriz JavaScript. Consiste em pares de valores-chave. A seguir está um exemplo rápido de dataLayer com diferentes tipos de dados -

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Aqui, temos diferentes valores, como um array de objetos (os produtos), valores numéricos (o preço), um array de strings (lojas), um objeto de data e um objeto (nome).

Por outro lado, quando você coloca o código de contêiner do Gerenciador de tags do Google em seu site, a camada de dados é criada automaticamente.

Em si mesma, a camada de dados é um conceito bastante complexo de entender à primeira vista. Este capítulo fornecerá mais informações sobre como interagir com a camada de dados.

Eventos de camada de dados

Um exemplo rápido de evento de camada de dados pode ser um formulário de inscrição em boletim informativo, que não pode ser facilmente rastreado com ouvintes automáticos de GTM. Um desenvolvedor de site pode ajudá-lo a enviar um evento de camada de dados assim que um novo assinante inserir seu e-mail em seu site. O código deste evento deve ser semelhante a este -

push({‘event’: ‘new_subscriber’});

Se necessário, você pode pedir ao desenvolvedor mais algumas informações, como o local do formulário. Isso é necessário se houver mais de um formulário em seu site. Isso pode ser alcançado usando o código a seguir.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

Além disso, o Gerenciador de tags do Google envia um determinado conjunto de valores para a camada de dados de aplicativos da web por padrão. Esses valores são -

  • gtm.js - Enviado para a camada de dados assim que o Gerenciador de tags do Google estiver pronto para ser executado

  • gtm.dom - Enviado para a camada de dados quando o DOM está pronto

  • gtm.load - Enviado para a camada de dados quando a janela está totalmente carregada

Inspecionando a camada de dados

Como já sabemos, existem certos eventos que são criados como resultado de qualquer interação na tela.

Por exemplo, vamos considerar este evento simples de carregamento de página. Para ver os eventos, você precisa ter o depurador em execução. Depois de ter o depurador em execução (no modo de visualização), visite o blog. Se você olhar para a janela de resumo no canto esquerdo inferior, isso é o que você verá -

Step 1 - Clique em Window Loaded e depois em Data Layer.

As informações mostradas na guia Camada de dados são sobre o evento Window Loaded.

É mostrado como - {event: 'gtm.load', gtm.uniqueEventId: 3}

Além disso, se quiser dar uma olhada mais de perto, você precisa obter suporte da guia do console do Chrome. Inspecionar uma camada de dados torna-se fácil quando você sabe como usar o depurador do Chrome da maneira correta.

Step 2- Quando você estiver em seu blog, clique com o botão direito em qualquer parte da página. No menu de contexto exibido, clique em Inspecionar. O painel será exibido no lado direito da tela, com a guia Elementos ativada.

Step 3- Clique em Console. Quando no modo de console, clique no ícone do canto superior esquerdo para limpar todas as mensagens mostradas. Veja a imagem a seguir para referência.

Step 4- Assim que a janela for limpa para todas as mensagens anteriores, digite dataLayer, certifique-se de que a capitalização de L seja feita. Este nome é fornecido pelo Gerenciador de tags do Google para sua camada de dados. No entanto, seus desenvolvedores podem atribuir a ele um nome diferente conforme e quando necessário.

Step 5- Pressione Enter após dataLayer. Ele mostrará os seguintes detalhes.

Existem três objetos e cada objeto contém algumas informações. Agora, esses objetos podem não ser os mesmos para você, como são mostrados na imagem acima. O dataLayer é configurável e está sob o controle do desenvolvedor configurá-lo de acordo com os requisitos.

Os valores presentes são devidos ao gadget do Blogger que está em uso nessa posição / espaço específico. Esta é a razão pela qual existem certas informações lá.

Se você olhar para o objeto 1, notará que o evento que é disparado é - gtm.dom . Ele é disparado pelo GTM ao carregar a página.

Dessa forma, você pode inspecionar a camada de dados e adicionar informações a ela como e quando necessário.

Variáveis ​​na camada de dados

Agora que estamos familiarizados com a camada de dados, vamos tentar ler uma das variáveis ​​usando a interface do Gerenciador de tags do Google.

Aqui, vamos tentar ler o evento usando uma variável da camada de dados.

Se virmos a figura acima, o evento variável contém o gtm.dom . Vamos criar uma variável a partir da interface GTM e ver como ela se reflete na guia Variáveis ​​no Gerenciador de tags do Google.

Step 1- Na interface do Gerenciador de tags do Google, vá para Variáveis. Role para baixo até as variáveis ​​definidas pelo usuário. Clique em NOVO.

Step 2 - Dê um nome a essa nova variável, vamos chamá-la de varEvent.

Step 3 - Clique em Escolha um tipo de variável para iniciar a configuração ...

Step 4 - Selecione Variável da camada de dados na lista.

Step 5 - Ao selecionar Variável da camada de dados, será necessário fornecer o nome e a versão.

Este nome virá da camada de dados real do Gerenciador de tags do Google. Conforme mencionado anteriormente, a variável que rastrearemos é - evento.

Step 6 - Insira o evento em Nome da variável da camada de dados.

Step 7 - Clique em SALVAR.

Step 8 - Clique em Visualizar para ver as alterações refletidas no depurador.

Step 9- Depois que a página for carregada, clique em Janela carregada e em Variáveis. Role até o final da seção Variáveis, você verá varEvent, como destacado na captura de tela acima.

Como visto na imagem acima, o valor será gtm.load.

Desta forma, pode-se inspecionar a camada de dados e capturar os valores na camada de dados conforme necessário.

É hora de examinar alguns cenários complexos, onde você pode rastrear elementos críticos para o negócio. Veremos como criar um evento personalizado, que não está predefinido ou disponível por padrão.

Neste capítulo, veremos -

  • Implementando eventos personalizados
  • Rastreamento de rolagem do mouse

Implementando eventos personalizados

Haverá casos em que você pode querer criar um evento, que é diferente dos eventos disponíveis no GTM. Para conseguir isso, precisaremos criar um evento personalizado, que utiliza as variáveis ​​existentes na camada de dados.

Considere o cenário quando clicamos no link interno criado anteriormente. Vamos criar um evento personalizado chamado urlClick, que lerá a variável da camada de dados gtm.elementurl.

Step 1- Para fazer isso, vamos criar uma variável chamada urlName na seção Variáveis. Usando o processo normal, crie a variável.

Acima é mostrado um exemplo de variável da camada de dados - urlName.

Agora, usaremos essa variável para criar nosso evento personalizado. O evento personalizado será usado quando criarmos o gatilho. Veja a imagem a seguir para referência.

Step 2- Crie um gatilho para disparar no evento que já está presente, clicando no link interno. Em Nome do evento, especifique gtm.linkClick.

Agora, vamos criar a tag.

Step 3- Siga o mesmo processo para criar a tag. Aqui estão os detalhes -

  • Tipo de tag - Universal Analytics
  • Tipo de trilha - evento
  • Categoria - Clique no link
  • Ação - Clique

Step 4 - Para rótulo, use o rótulo criado recentemente, urlName.

Step 5- Uma vez feito isso, marque Habilitar configurações de substituição nesta tag. Na caixa de texto ID de rastreamento, insira seu Código de rastreamento do Google Analytics.

Ao selecionar um gatilho, certifique-se de selecionar o gatilho criado recentemente - URL clicado.

Step 6- Salve a tag. Clique em Visualizar para ver as mudanças em seu blog.

Step 7- Ctrl + Clique no link interno. Você deve conseguir ver o evento gtm.linkClick na caixa Resumo. Além disso, você deve ver a tag disparada conforme mostrado na captura de tela a seguir.

Dessa forma, podemos usar os eventos existentes para criar nossos próprios eventos personalizados e ter um rastreamento bem-sucedido dos controles que desejamos.

Rastreamento de rolagem do mouse

Quando se trata de envolver os usuários no blog, um profissional de marketing pode querer detectar a rolagem do mouse. A detecção de rolagem do mouse é crítica, pois exigirá outras ações, como mostrar o link de um boletim informativo ou acionar um pop-up que oferece algum tipo de desconto no produto.

Usando o Gerenciador de tags do Google, podemos rastrear facilmente o evento de rolagem. Para isso, precisamos usar um código de terceiros, que usaremos ao criar uma tag.

O código está disponível neste local. Vamos usá-lo ao criar uma tag.

Step 1- Crie um gatilho. Chamaremos esse gatilho - um gatilho de rolagem.

Consulte a imagem a seguir para a configuração do acionador.

Step 2- Configure o tipo de acionador - DOM pronto. Permitir que este gatilho seja disparado - Todos os eventos DOM prontos.

Step 3 - Clique em SALVAR depois de concluir as etapas acima.

Agora vamos criar a tag.

Step 4 - Desta vez, ao criar uma tag, selecione um tipo diferente de Rastreamento, conforme mostrado na imagem a seguir.

Step 5 - Quando o HTML personalizado for selecionado, aparecerá um espaço para inserir o código HTML.

Step 6- Digite o código copiado deste link.

Step 7- Role para baixo para configurar o gatilho. O gatilho que criamos recentemente (Scroll Trigger acima) precisa ser selecionado.

Step 8 - Clique em SALVAR.

Step 9- Agora, inicie o GTM Debugger e atualize a página do blog. Você verá duas mudanças principais na seção Resumo e etiqueta.

Step 10 - Agora, role para baixo para ver o resto do blog, mais alguns eventos serão acionados.

  • ScrollDistance
  • ScrollTiming

Esses eventos serão eventualmente usados ​​para detectar a localização da rolagem do mouse e realizar outras ações de acordo.