Exemplo

Para exemplificar a usabilidade da ferramenta, iremos configurar uma tag para disparo nas páginas de produtos da vitrine. Para configurar:

1. Clique em Variáveis;
2. Em Variáveis definidas pelo usuário, clique em Nova;
3. Clique em Configuração da variável e escolha Variável da camada de dados como o tipo;
4. No campo Nome da variável da camada de dados, insira a chave ecommerce.detail.products. Essa chave retorna as propriedades de um produto na página de produto;
5. Nomeie a variável na barra superior, ao lado do ícone de pasta;
6. Clique em Salvar.

A variável foi criada e na etapa seguinte você deve criar um Acionador:

1. Clique em Acionamento;
2. Clique em Adicionar;
3. Clique em Configuração do acionador e selecione a opção DOM pronto;
4. Seleciona a opção Alguns eventos DOM prontos e preencha os campos como na figura abaixo:
   
5. Nomeie o acionador na barra superior, ao lado do ícone de pasta;
6. Clique em Salvar.

Note que nesse exemplo o disparo ocorre na página de produto da vitrine, pois a variável Page URL possui /product.

A próxima etapa é a configuração de Tag:

1. Retorne ao espaço de trabalho;

2. Clique em Tags;

3. Clique em Nova;

4. Clique em Configuração da tag e selecione HTML personalizado.

5. Inclua o código a seguir no espaço HTML:

   HTML

   <script>
    console.log(‘teste variável 1’, {{ Teste Variável}});
   </script>
   

6. Clique em Acionamento e inclua o acionador que criamos na etapa anterior de Acionador.

7. Nomeie a tag na barra superior, ao lado do ícone de pasta;

8. Clique em Salvar.

O passo seguinte é debugar a tag antes de publicá-la. Para isso:

1. Clique em Visualizar no campo superior direito
2. Insira a URL da sua loja;
3. Confira as duas janelas abertas no seu navegador: em uma janela fica disponível a vitrine da loja para que você navegue, e na outra janela você acompanha as atualizações dos eventos à medida que você navega pela loja.
4. Valide se as configurações ocorreram corretamente:
   1. Clique no evento DOM Ready (evento que colocamos na etapa Acionador), e veja que a tag está setada como Tag não disparada.
   2. Clique na tag e acompanhe todo o contexto da tag com os status. Visualize que o evento gtm.DOM (DOM ready) a variável Page URL não contém /produto que foi a condição configurada no acionador.
   3. Na janela da vitrine vá até a página de produto. Confira os os eventos mudando na página de atualização. Clicando em DOM Ready você vê a tag disparada e clicando na tag você confere todas as condições aceitas.
   4. Abra o console da página de produto e confira se o script que adicionamos no HTML customizado está sendo executado: imprimindo teste variáve com a Variável Teste.

Os testes foram concluídos e já é possível enviar as alterações para produção. Volte no espaço de trabalho do Google Tag Manager e clique em Enviar na lateral superior direta. Uma página ficará disponível, preencha os campos de forma descritiva e então publique.