Google Analytics GA4: desde como começar até o rastreamento profissional

<script>
document.addEventListener('DOMContentLoaded', function() {
  var menu_anchors = document.querySelectorAll('.menu-items a');
  //Click event listener to each anchor element
   menu_anchors.forEach((anchor) => {
   anchor.addEventListener('click', (event) => {
    gtag('event', 'menu_clicks', {
       'event_category': 'Menu Clicks',
       'event_action': anchor.href,
       'event_label': anchor.textContent
    });
   });
  });
});
</script>

O nome do evento “menu_clicks” pode ser qualquer coisa que você quiser e terá três parâmetros que você fornece. Esta é uma abordagem se você não possui o Gerenciador de tags do Google e prefere a implementação de gtag.

Você pode usar parâmetros customizados para passar valores adicionais para eventos predefinidos, por exemplo, evento sign_up. De acordo com a documentação do GA, ele suporta apenas um parâmetro chamado “método” (que pode ser qualquer coisa, por exemplo, login social, email, etc.)

gtag("event", "sign_up", {
method: "Google"
});

Ao adicionar dimensões personalizadas, você também pode passar informações adicionais, como plano de assinatura de inscrição (por exemplo, “avaliação gratuita”, “básico”, “premium”).

Você pode adicionar a dimensão personalizada “sign_up_plan” e passar junto com “método”.

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

Para implementar tudo isso, você precisa de habilidades básicas de programador JS, que podem aprender rapidamente usando ChatGPT. Agora você pode testar o prompt:

Código JavaScript que aciona um evento personalizado gtag com o nome ‘menu_clicks’ quando um usuário clica em um item de menu com uma tag li pai que possui a classe ‘.menu-item’. Passe os seguintes parâmetros de evento personalizados: ‘event_category’ deve ser definido como ‘Menu Clicks’, ‘event_action’ deve ser definido como o link do item clicado e ‘event_label’ deve ser definido como o texto âncora do item clicado.

Experimente este prompt e você verá a mágica acontecendo.

Você pode copiar e colar esse código em seu editor de código CMS e pronto!

Agora, vamos configurar o mesmo rastreamento de eventos usando a tag GTM.

Presumo que você já instalou o GA4 por meio do Gerenciador de tags do Google e prosseguirá com as etapas a partir daí.

Você precisaria adicionar dimensões personalizadas de acordo com as etapas explicadas na seção acima.

Como configurar o acompanhamento de eventos no Gerenciador de tags do Google

Crie uma nova variável JavaScript no GTM que retorne o nome da classe da tag pai da âncora clicada – porque, no GTM, não há uma maneira integrada de obter atributos do elemento DOM pai.

Navegar para Variáveis > Variáveis ​​definidas pelo usuário e clique no Novo botão no canto superior direito. Na caixa de diálogo pop-up, selecione Javascript personalizado.

Copie e cole este código nele.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

Este código retorna o atributo de classe pai de um elemento clicado quando há um pai com a classe ‘.menu-item’ ou retorna um valor vazio se não houver tal elemento pai.

Podemos usar isso para garantir que detectaremos apenas cliques em links de itens de menu, e não em outros links em outras partes da página.

Crie um novo gatilho no GTM que seja acionado em todos os cliques em elementos com um pai

Navegue até Triggers e clique no botão Novo botão no canto superior direito.

Na caixa de diálogo pop-up, selecione Clique – Apenas links.

Escolher Alguns cliques em links > Configurar para disparar em cliques onde a classe do elemento pai contém a string “item de menu”.

Navegue até Tags e adicione a tag de evento GA4.

Captura de tela do GA4, abril de 2023

Preencha o nome do evento “main_menu_clicks” ou o nome que desejar para o evento e adicione os parâmetros personalizados event_category, event_action e event_label.

Captura de tela do GA4, abril de 2023

Para ação e rótulo do evento, escolha Clique em Texto e Clique em URL variáveis ​​incorporadas.

Captura de tela do GA4, abril de 2023

Escolha o gatilho de cliques no menu que criamos antes e salve a tag.

Publique as alterações e depure para garantir que, ao clicar nos itens do menu, o evento seja acionado com todos os parâmetros definidos corretamente.

Como implementar o rastreamento de eventos personalizado usando o método dataLayer.push()

Se você ainda prefere codificação personalizada e possui GTM, pode usar o método datalayer.push().

Nesse caso, você precisaria adicionar os parâmetros event_category, event_action e event_label no GTM como variáveis ​​​​dataLayer.

E na seção do seu site, você deve usar o código abaixo.

<script>
//Click event listener to menu items with the '.menu-item' class
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
    //Link and anchor text of the clicked link
    let link = menuItem.querySelector('a').href;
    let anchorText = menuItem.querySelector('a').textContent;
    // Trigger the custom event 'menu_clicks' using dataLayer.push()
    dataLayer.push({
      'event': 'menu_clicks',
      'event_category': 'Menu Clicks',
      'event_action': link,
      'event_label': anchorText
    });
  });
 });
});
</script>

Como posso saber se o acompanhamento de eventos do Google Analytics está funcionando?

Também é importante verificar se você vê um log de eventos com os mesmos parâmetros na visualização de depuração do GA4. Pode acontecer que o GTM dispare, mas por causa de uma configuração incorreta, ele não será passado para o GA4.

Caso você tenha implementação de gtag, você deve habilitar o modo de depuração instalando a extensão do Chrome ou adicionando uma linha de código à configuração do GA4.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

Sempre depure e certifique-se de que todos os parâmetros personalizados passem conforme o esperado.

Conclusão

GA4 é bastante desafiador e não uma ferramenta analítica plug-and-play como o Universal Analytics; você precisa gastar um bom tempo aprendendo.

Por outro lado, ele vem com muitos recursos novos que você pode usar e aprimorar suas análises a um nível sem precedentes.

Ao ser capaz de personalizar o rastreamento de eventos, você obtém uma habilidade poderosa que pode até ajudá-lo a contornar alguns dos modelos de atribuição que o Google Analytics está desativando, rastreando a origem da primeira visita dos usuários em uma dimensão personalizada.

Com isso em mente, publicarei um guia passo a passo sobre como restaurar (parcialmente) o primeiro modelo de atribuição usando parâmetros de eventos personalizados.

Mais recursos:

Imagem em destaque: Andrey_Popov/Shutterstock