Google Tag Manager, camada de responsabilidade e pleonasmo

O que você irá aprender?

No meu Instagram e no Linkedin sempre falo sobre responsabilidade na hora de implementar as nossas tags via Google Tag Manager, não só do ponto onde devemos saber cada vez mais sobre tecnologia. Mas sobre a ótica que cada vez mais devemos usar o Google Tag Manager para o que ele foi designado a fazer, implementar tags de terceiros!

Para que o Google Tag Manager serve?

Já falei um pouco nesse post sobre para que o Google Tag Manager ele não serve, mas burro que sou nunca sentei para dizer a real utilização do Google Tag Manager, por mais que pareça óbvio existem alguns conceitos a galera parece simplesmente desconsiderar no dia dia.

O Google Tag Manager serve para implementação de tags de terceiros, ou seja, no dia dia de marketing para conseguir se comunicar uma determinada ferramenta sem precisar fazer uma integração de sistemas, foi desenvolvido o que chamamos hoje de tag, pixel, mastertag, pixel de conversão e etc. Funciona básicamente assim:

Esse pequenos trechos de código são instalados principalmente para medir comportamentos dos usuários dentro do nosso site, uma vez que essas ferramentas não tem acesso ao nosso código fonte para conseguir trackear essas informações de forma independente.

Ou seja, a premissa inicial para utilização do Google Tag Manager é implementar tags de terceiros, qualquer coisa que estamos fazendo fora disso é um anti pattern. "Mas Lucian, na minha plataforma não tenho acesso adicionar scripts dentro do checkout como eu faço nesse caso?" Bem, não vou ser o cagador de regra aqui, mas existe um mantra que trouxe pra minha vida que "TODA VEZ QUE PRECISO FAZER ALGO QUE FOGE O PADRÃO EU SOU OBRIGADO A DOCUMENTAR", faz isso e no ruim de tudo deixe documentado as gambiarras que você for obrigado a fazer no meio do caminho.

Como funciona o Google Tag Manager?

Já falei diversas vezes, mas não custa nada né? A utilização do Google Tag Manager é composta dos seguintes players:

Código fonte

É a sua aplicação é o código o seu usuário acessa quando entra no seu site por um navegador ou aplicativo.

Camada de dados

É uma camada invisivel de comunição entre o código fonte e o Google Tag Manager, é entre ele que utilizado para personalizar informações no carregamento da página ou evento personalizado dentro do site. Você pode ver um pouco mais sobre aqui

Google Tag Manager

É o nosso personagem principal, através dele vamos instalar todas as tags de terceiros de acordo com os acionadores criados dentro dele. Você pode ver um pouco mais sobre aqui

Tags de terceiros

É o que precisamos instalar para conseguir medir dentro das ferramentas que contratamos informações relacionadas a comportamentos do usuário.

Mas o que é a tal camada de responsabilidade

Esse conceito de camada de responsabilidade implica em colocar cada um dos players acima listas em seu devido lugar, ou seja, o Google Tag Manager só envia informações para tags de terceiros, o Código fonte só envia informações personalizadas para dentro do Google Tag Manager. Imagina o seguinte cenário:

Eu tenho o Google Tag Manager instalado e configurado dentro do meu site e decido implementar instalar um pixel do facebook diretamente no código, não soa estranho? Se eu tenho o Google Tag Manager para fazer isso por que deveria colocar essa informação diretamente no código fonte? A mesma coisa acontece no cenário contrário, bora ver?

Se eu tenho o código fonte para enviar informações personalizadas para o Google Tag Manager, para que vou criar eventos personalizados diremente no Google Tag Manager? Essa sensação de estranhesa que sentimos é a sensação de quebrar a camada do óbvio, quem assistia "Eu, a patroa e as crianças" sabe:

"Coloca o amendoin no buraco do amendoin". kkkkk

E fazer isso é prejudicial devido a 3 pontos:

Diminui a manutenibilidade do container;
Dificulta a descoberta de bugs;
Afetando o carregamento da página;

E calma que não é só quando disparando eventos personalizados para de dentro para dentro do Google Tag Manager que estamos quebrando essa camada de responsabilidade não, esses dias bati de frente com um container que estava executando isso aqui:

Esse exemplo mostra para gente, uma tag de HTML personalizado que carrega em todas as páginas e através da utilização do jQuery escuta os clicks efetuados em um banner, trata as informações e envia um evento personalizado de dentro do GTM para a camada de dados. Não vou nem falar que essa pessoa está gerando eventos genéricos usando esse 'GAEvent' outra hora falo sobre isso, kkk

Como contornar essa gambiarra ?

Vamos dar uma olhada no código que está sendo implementado agora com um pouco mais de calma:

  try {
    jQuery(document).on('click', '.box-banner', function(){
        var nome_produto = jQuery(this).text().trim();
        var nome_produto1 = {{Page Path}}

        dataLayer.push({
            'event': 'GAEvent',
            'eventCategory': 'Página de categoria',
            'eventAction': 'Banner categoria',
            'eventLabel': nome_produto1,
            'eventValue': '',
            'eventNonInteraction': true
        })
    });
} catch (error) {
    console.log('[!] (Event - Categoria banner cb) => ' + error.message)
}

Cria uma declaração try...catch que irá testar o código e caso existe alguma exceção dispara uma resposta;
Através do jQuery adiciona no DOM a uma escuta ao elemento '.box-banner';
Declara a variável nome_produto que puxa o texto do link clicado e remove os espaços através de jQuery(this).text().trim();
Declara uma segunda variável nome_produto1 que puxa a variável incorporada do Google Tag Manager que retornar o caminho de página;
Insere um evento personalizado dentro do Google Tag Manager com as informações de Categoria, Ação, Rótulo, Valor e configura o "evento personalizado" para disparar como hit de não interação;
Loga no console no caso de erro uma mensagem;

Refatorando a cagalhofança

O Google Tag Manager por padrão carrega consigo uma série de ferramentas que nos permitem tratar os elementos HTML de uma página para que possamos criar seletores para transforma-los em acionadores, certo? Lá na área de acionadores você poderia facilmente criar um acionador que seria representado da seguinte forma:

Com isso já eliminamos a necessidade da utilização do jQuery para criar um acionador, agora precisamos entender o que ele passa como valores do evento personalizado para verificar se podemos modificar para não precisar dele. Dentro do trecho onde ele passa o evento personalizado ele carrega as seguintes informações:

Categoria: 'Página de categoria';
Ação: 'Banner categoria';
Rótulo: nome_produto1, variável que puxa o caminho de página;
Evento de interação: Verdadeiro

Com isso podemos analisar que:

Categoria, Ação e Evento de interação são informações estáticas;
Rótulo puxa a informação de uma variável incorporada {{Page Path}} que podemos puxar em qualquer lugar no Google Tag Manager.

Ou seja, podemos passar todas essas informações de maneira estática diretamente em uma tag do Google Analytics de hit de Evento, ficaria mais ou menos assim:

Pronto agora é só adicionar o acionador que criamos para substituir o evento personalizado e está pronto o sorvetinho, kkk ta vendo como da pra não fazer gambiarra :) Espero que tenha curtido e se tu não me segue ainda da essa moral para eu ver que você chegou até aqui no final do post.