Google Tag Manager
O que é?
Segundo o Google, o Gerenciador de tags é um sistema que permite atualizar de forma simples e rápida códigos de acompanhamento e fragmentos de códigos relacionados (conhecidos como tags) no seu site ou app para dispositivos móveis.
Nas definições da Resultados Digitais, o Google Tag Manager é uma ferramenta gratuita do Google, pela qual é possível inserir apenas um código em um site, para depois instalar diversos serviços sem precisar mexer nesse código.
Ao centralizar a gestão de códigos no GTM, o marketing ganha autonomia, melhora a produtividade e reduz custos com TI.
Qual a finalidade na Sallve?
Na Sallve, atualmente, o principal objetivo do GTM é o gerenciamento de cliques e visualizações de determinados elementos e acompanhamento de promoções internas. Para isso precisamos de tags ativas na plataforma e assim coletamos os dados que são enviados ao Google Analytics.
O que compõe o GTM?
O GTM é subdividido em três tipos principais níveis de configuração de elementos que juntos darão vida aos eventos, são eles:
- Tag: [tag]
- Acionador: [act]
- Variáveis: [var]
Sobre as TAGs
A tag é o nível mais alto de configuração do GTM, a "mãezona"!
No fim das contas é ela quem vai ser acionada de acordo com o conjunto de regras e elementos acionadores que declaramos para tal.
Principais configurações:
- Tipo de acompanhamento
- Categoria
- Ação
- Rótulo
Tipos de Tags:
Universal do analytics
Eventos do analytics
Acompanhamento de conversão
Vinculador de conversão
Remarketing do ads
Google optimizer
HTML personalizado
Imagem personalizada
Várias ferramentas de pixel e afins
Padrão de nomenclatura utilizada:
[tag] <categoria do evento> / <ação do evento> / <?descritivo>- [tag] internal promotion / visualização / home - banner principal
- [tag] checkout / selecionar forma de pagamento
Sobre os Acionadores
O acionador é composto por um conjunto de regras e elementos referenciados que farão a tag ser disparada.
Em nosso código, os elementos que HTML que pretende-se serem trackeados, devem possuir o atributo data-tracking="<id>" e dessa forma serem facilmente identificáveis como elementos que estão no GTM.
Exemplo de elemento
<button class="primary-button js-buy-button" data-tracking="buy-button" />
No GTM, para referenciar esse atributo, utilize um seletor CSS, element[data-tracking="<id>"]
Exemplos:
- Clique no elemento
button[data-tracking="btn-comprar"]na página que contém "vitamina-c" em sua URL - Visualização do elemento
div[data-tracking="modal-product"]em páginas que não contenham "/blogs/" em sua URL - Envio do form de pesquisa
form[data-tracking="form-header"]quando a URL for igual a "www.sallve.com.br"
OBS:
É importante que o identificador do elemento data-tracking seja único para que não haja conflitos.
Padrão de nomenclatura utilizada:
[act] <categoria do evento> / <tipo do acionador> / <?descritivo>
- [act] carrinho / clique / nome do produto
- [act] checkout / clique / escolher método de pagamento
Sobre as Variáveis
Uma variável é responsável por trazer o dinamismo para suas tags, acionadores e outras variáveis.
Com ela você conseguirá armazenar dados do comportamento do usuário de forma dinâmica e passar isso para uma tag.
Exemplos:
- Incorporadas / Pré-definidas
- Personalizadas
Tipo Incorporadas
- Click element/id/classes
- Click URL
- Error line/message
- Event
- Form classes/text/…
- Page path/hostname/URL
- Scroll direction/depth units/…
- Percent visible
Tipo Definidas
- Página - js, cookie, camada de dados
- Navegação - ref http, UR
- Elementos - DOM, visibilidade, evento,
- ... e muito mais!
Tipo Personalizadas
As variáveis personalizadas são funções em JS que podem ou não retornar algum valor.
Exemplo: Caso você queira retornar a quantidade de produtos no carrinho ao clicar em algum botão, basta criar um script que capture esse valor.
Padrão de nomenclatura utilizada:
[var] <nome da variavél> / <?descritivo>
- [var] carrinho / quantidade de produtos na sacola
- [var] carrinho / remover unidade + quantidade atual