Criando Eventos de Clique Personalizados no GA4

Última atualização em 18 de jun. de 20266 min de leitura

Índice

• Em resumo
• Passo 1: Enviar um evento personalizado para o GA4
• Passo 2: Configurar um evento personalizado no GA4

important

Estas instruções aplicam-se apenas se os dados não forem enviados ao Google Analytics 4 através de um GTM server-side ou de um GTM integrado via Custom Pixel do Shopify. No entanto, se os dados forem enviados através de um GTM server-side ou de um GTM integrado via Custom Pixel do Shopify, os eventos devem primeiro ser enviados para o DataLayer e depois transmitidos ao GA4 através do GTM.

Em resumo

A Varify.io® não recolhe quaisquer dados por si própria. No entanto, podes rastrear eventos de clique em elementos específicos dentro das tuas experiências Varify. Nesta secção, explicamos passo a passo como podes fazer isto com o Google Analytics 4.

A configuração ocorre em duas fases: Primeiro, envias o teu evento para o GA4 (Passo 1), depois configuras-o no GA4 (Passo 2)—eventos de receita como eventos-chave, e valores numéricos adicionalmente como métricas personalizadas. Para saberes como analisar o evento concluído, consulta o artigo «Analisar Eventos Personalizados».

Passo 1: Enviar um evento personalizado para o GA4

Abordagem recomendada: Enviar eventos através da configuração de rastreamento existente

Geralmente recomendamos o envio de eventos personalizados para o GA4 utilizando o mesmo método que já usas para rastrear os teus eventos — ou seja, através da tua configuração de rastreamento existente:

• O Google Tag Manager está em uso?, os eventos personalizados devem ser criados via GTM e passados para o GA4 (geralmente através do DataLayer e uma tag de evento GA4 correspondente).
• O GA4 está integrado diretamente no site? (sem GTM), os eventos personalizados são enviados da mesma forma direta.

Isto garante que o teu rastreamento permaneça consistente e possa ser mantido num local central. A solução de rastreamento de cliques descrita abaixo, que utiliza a funcionalidade „Add JS”, destina-se a ser um complemento caso queiras medir cliques em elementos individuais dentro de uma experiência Varify.

Rastreamento de cliques num elemento específico

O elemento só existe na tua variante

Para medir cliques em elementos recém-criados na sua variante, é necessário primeiro definir um seletor único para cada elemento. IDs são particularmente adequados para isso.

Um seletor único é, por exemplo: #my-btn

Para adaptar o código JavaScript para rastrear cliques no seu novo elemento, primeiro deves substituir o placeholder #my-btn na linha 3 do código pelo seletor real do teu elemento. Podes usar a função "Add JS" para isso. Segue estas instruções:

1. Abre o editor de JavaScript no Varify: Abre a janela no editor para inserir JavaScript. Encontrarás o símbolo de código no canto superior direito.
2. Insere o código: Cola o código JavaScript fornecido no editor.
3. Substitui o seletor: Encontra o placeholder na linha 3 #my-btn. Substitui #my-btn pelo seletor real do teu novo elemento. Isto pode ser um ID (por exemplo 1TP6New-button-id) ou uma classe (por exemplo .new-button-class).
4. Guarda as alterações: Guarda as alterações após substituir o seletor.

window.varify.helpers.onDomLoaded(() => {
    // Replace the CSS selector
    var cssSelector = "#my-btn";

    // Select only the first element with the .btn-primary class
    var element = document.querySelector(cssSelector);

    if (element) {
        element.addEventListener("click", VarifyTrack);
    }
});

function VarifyTrack() {
    if (typeof gtag === "function") {
        gtag('event', 'VarifyClick', {
            'VarifyClickCount': '1',
        });
        console.log("Event sent.");
    } else {
        console.log("gtag is not defined. Please check the GA integration.");
    }
}

O elemento já existe (no original e na variante)

Para medir cliques em elementos que já existem no teu website, é importante definir um seletor único para cada elemento. Uma forma eficaz de determinar esse seletor é utilizar o editor visual da Varify.io.

A seguir está um exemplo de um seletor único .btn-primary.

Para monitorizar eventos de clique de elementos já existentes que ocorrem tanto no original como na variante da tua experiência, podes configurar uma experiência de rastreamento especial. Aqui está um guia personalizado:

1. Criar novo experimento: Cria um experimento que se destina exclusivamente ao tracking de elementos.
2. Adicionar código JavaScript: Usa a função "Add JS" para adicionar o código JavaScript necessário à tua variante. Na linha 3 do código, substitui o placeholder .btn-primary pelo seletor CSS correto do teu elemento.
3. Definir o page targeting: Define o page targeting do experimento para que fique configurado para a homepage com um tipo de correspondência "Contains". Isto garante que todas as páginas do teu website são incluídas, de modo a que o experimento fique ativo em todo o site.
4. Ajustar a distribuição de tráfego: A distribuição de tráfego deve ser definida como 100% para a variante, para garantir que todos os utilizadores recebem o script de tracking.
5. Fazer tracking de eventos de clique: Os cliques no elemento especificado são enviados como um evento para o Google Analytics 4 (GA4) para serem analisados aí.

window.varify.helpers.onDomLoaded(() => {
    // Define the CSS selector of the element you want to track
    var cssSelector = ".btn-primary";

    var elements = document.querySelectorAll(cssSelector);
    elements.forEach(function(element) {
        element.addEventListener("click", VarifyTrack);
    });
});

function VarifyTrack() {
    if (typeof gtag === "function") {
        gtag('event', 'VarifyClick', {
            'VarifyClickCount': '1',
        });
        console.log("Event sent.");
    } else {
        console.log("gtag is not defined. Please check the GA integration.");
    }
}

Enviar Parâmetros de Evento no GTM

Para que possas analisar o evento mais tarde como uma métrica personalizada, este deve enviar um parâmetro de evento para o GA4. Nos snippets de evento de clique acima, este parâmetro já está incluído (VarifyClickCount).

Se estiveres a fazer tracking de um evento personalizado via GTM e este ainda não estiver a enviar parâmetros, adiciona-os diretamente ao evento:

1. Abre o separador „Event Parameters“.
2. Clica no botão azul „Add Parameter“.
3. No campo „Event Parameters“, introduz o nome do parâmetro.
4. Introduz por baixo, em Value, o número 1 um (ou, no caso de eventos de receita, o valor dinâmico de receita).
5. Publica as alterações no container do GTM.

Passo 2: Configurar um evento personalizado no GA4

Assim que os teus eventos forem enviados corretamente para o GA4, eles aparecerão lá automaticamente—sem que tenhas de os criar manualmente. (Pode levar até 24 horas para aparecerem nos relatórios.)

Isso conclui a parte de envio—agora continuamos no GA4. Dependendo do teu caso de uso, configura o teu evento da seguinte forma:

• Valores de receita: seleciona-os como Key Event para que apareçam em "Key Events" no Relatório de Resultados do Varify.
• Métricas padrão (numéricas): cria-as adicionalmente como Custom Metric para que possas analisá-las nos relatórios exploratórios.

Marcar Eventos Personalizados de Receita como Key Events

Para que um evento personalizado de receita apareça em "Key Events" no Relatório de Resultados da Varify e possa ser selecionado como objetivo aí, ele precisa ser marcado como key event no GA4. Para outros eventos personalizados (por exemplo, eventos de clique puros), este passo não é necessário—eles já estão disponíveis como objetivos de qualquer forma.

1. No GA4, vai a Administração → Eventos (ou Key Events).
2. Encontra o teu Evento Personalizado de Receita e ativa o toggle "Mark as Key Event".
3. Se o evento ainda não foi registado, clica em "New Key Event" e insere o nome do evento exatamente como o GA4 o recebe.

Criar Valores Numéricos como Custom Metrics

Se quiseres analisar o valor numérico de um evento (por exemplo, uma contagem ou quantidade) em relatórios exploratórios, cria uma custom metric no GA4. Isto requer que o evento inclua o parâmetro correspondente (ver Passo 1).

1. No GA4, vá para Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
2. Insira um nome descritivo e, opcionalmente, uma breve descrição.
3. Selecione o parâmetro de evento no menu suspenso ou adicione-o manualmente. Certifique-se de usar a grafia correta.
4. Deixe o campo „Unit of Measurement“ normalmente definido como „Standard” (para receita: a unidade monetária apropriada) e salve a métrica personalizada.

Leva de 24 a 48 horas para os dados ficarem disponíveis nos relatórios exploratórios. Observe também: os dados de eventos não são atribuídos retroativamente a uma métrica personalizada. Uma métrica personalizada começa a coletar dados somente após ser criada.

Aviso: A Varify não assume qualquer responsabilidade pela funcionalidade do código e das informações.
É da responsabilidade do utilizador testar o código exaustivamente e implementá-lo corretamente.