Criação de eventos de clique personalizados no GA4
Tabela de conteúdo
Curto e agradável
O Varify.io® não coleta dados por si só. No entanto, você pode rastrear eventos de cliques em elementos específicos dentro de seus experimentos Varify. Nesta seção, explicamos passo a passo como fazer isso com o Google Analytics 4.
A criação é feita em duas etapas: primeiro, você envia seu evento para o GA4 (Etapa 1); em seguida, você o configura no GA4 (Etapa 2) – eventos de receita como evento-chave e valores numéricos adicionalmente como métrica personalizada. Para saber como analisar o evento concluído, consulte o artigo „Análise de eventos personalizados”.
Passo 1: Enviar evento personalizado para o GA4
Método recomendado: enviar eventos por meio da configuração de rastreamento existente
Recomendamos que, como regra geral, você envie eventos personalizados para o GA4 pela mesma via pela qual já registra seus eventos – ou seja, por meio da sua configuração de rastreamento existente:
- O Google Tag Manager está sendo utilizado?, os eventos personalizados devem ser criados no GTM e enviados ao GA4 (geralmente por meio do DataLayer e de uma tag de evento do GA4 correspondente).
- O GA4 é integrado diretamente no site? (sem o GTM), os eventos personalizados são enviados da mesma forma direta.
Dessa forma, seu rastreamento permanece consistente e pode ser gerenciado em um único local. A solução para eventos de clique descrita a seguir, por meio da função „Add JS”, foi concebida como um complemento, caso você queira medir cliques em elementos específicos dentro de um experimento do Varify.
Rastreamento de cliques em um elemento específico
O elemento só existe em sua variante
Para medir os cliques em elementos recém-criados em sua variante, você deve primeiro definir um seletor exclusivo para cada elemento. Os IDs são particularmente adequados para isso.
Um seletor exclusivo é, por exemplo: #meu-btn
Para adaptar o código JavaScript para rastrear os cliques em seu novo elemento, você deve primeiro usar o espaço reservado #my-btn na linha 3 do código com o seletor real de seu elemento. Você pode usar a função "Add JS" para fazer isso. Siga estas instruções:
Abra o editor JavaScript na Varify: Abra a janela no editor para inserir o JavaScript. Você encontrará o símbolo de código no canto superior direito.
Inserir código: Cole o código JavaScript fornecido no editor.
Substitua o seletor: Localize o espaço reservado na linha 3
#my-btn. Substituir#my-btncom o seletor real de seu novo elemento. Isso pode ser um ID (por exemplo1TP6New-button-id) ou uma classe (por exemplo.nova classe de botão).Salvar alterações: Salve 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 os cliques em elementos que já existem em seu site, é importante definir um seletor exclusivo para cada elemento. Uma maneira eficaz de determinar esse seletor é usar o editor visual do Varify.io.
A seguir, um exemplo de um seletor exclusivo .btn-primary.
Para rastrear eventos de clique de elementos já existentes que ocorrem tanto no original quanto na variante do seu experimento, você pode configurar um experimento de rastreamento especial. Aqui está um guia personalizado:
Crie um novo experimento: Crie um experimento destinado exclusivamente a elementos de rastreamento.
Adicione o código JavaScript: Use a função "Add JS" para adicionar o código JavaScript necessário à sua variante. Na linha 3 do código, substitua o espaço reservado
.btn-primáriocom o seletor CSS correto de seu elemento.Definir o direcionamento de página: Defina o direcionamento de página para o experimento de modo que ele seja definido como a página inicial com um tipo de correspondência "Contém". Isso garante que todas as páginas do seu site sejam incluídas, de modo que o experimento esteja ativo em todo o site.
Ajuste a distribuição do tráfego: A distribuição de tráfego deve ser definida como 100% para a variante, a fim de garantir que todos os usuários recebam o script de rastreamento.
Rastrear eventos de clique: Os cliques no elemento especificado são enviados como um evento para o Google Analytics 4 (GA4) para serem analisados lá.
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 você possa analisar o evento posteriormente como uma métrica personalizada, ele deve enviar um parâmetro de evento ao GA4. Nos trechos de código para eventos de clique acima, esse parâmetro já é enviado (VarifyClickCount).
Se você registrar um evento personalizado pelo GTM e ele ainda não enviar nenhum parâmetro, adicione-o diretamente ao evento:
- Abra a aba „Parâmetros do evento”.
- Clique no botão azul „Adicionar parâmetro”.
- Insira no campo „Parâmetros do evento” digite o nome do parâmetro.
- Use por baixo Valor o número
1um (ou, no caso de eventos de receita, o valor dinâmico da receita). - Publique as alterações no contêiner do GTM.
Etapa 2: Configurar um evento personalizado no GA4
Assim que seus eventos forem enviados corretamente para o GA4, eles aparecerão automaticamente lá – sem que você precise criá-los manualmente. (Pode levar até 24 horas para que fiquem visíveis nos relatórios.)
Com isso, a parte de envio está concluída – agora seguimos para o GA4. Dependendo do caso específico, você configura seu evento lá da seguinte forma:
- Valores de receita: como Evento principal marque-os para que apareçam no Relatório de Resultados do Varify, na seção “Eventos-chave”.
- Métricas normais (numéricas): além disso, como Métrica personalizada criar, para que você possa analisá-las nos relatórios exploratórios.
Marcar os eventos personalizados de receita como eventos-chave
Para que um evento personalizado de receita apareça no Relatório de Resultados do Varify na seção de Eventos-chave e possa ser selecionado como meta, ele deve estar marcado como Evento-chave no GA4. Para outros eventos personalizados (por exemplo, eventos que envolvem apenas cliques), essa etapa não é necessária — eles já estão disponíveis como meta.
- No GA4, acesse Administração → Eventos (ou Eventos-chave).
- Procure seu evento personalizado de receita e ative o botão “Marcar como evento-chave”.
- Se o evento ainda não estiver registrado, clique em “Novo evento-chave” e insira o nome do evento exatamente como o GA4 o recebe.
Criar valores numéricos como métrica personalizada
Se você quiser analisar o valor numérico de um evento (por exemplo, um valor de contagem ou quantidade) nos relatórios exploratórios, crie uma métrica personalizada no GA4. É necessário que o evento envie o parâmetro correspondente (veja o Passo 1).
- No GA4, acesse Admin → Definições personalizadas → Métricas personalizadas → Criar métrica personalizada.
- Dê a ele um nome significativo e, se quiser, uma breve descrição.
- Selecione o parâmetro do evento no menu suspenso ou adicione-o manualmente. Preste atenção à grafia correta.
- Deixe no campo „Unidade de medida” geralmente o valor „Padrão” (no caso de faturamento: a unidade monetária correspondente) e salve a métrica personalizada.
Leva de 24 a 48 horas para que os dados fiquem disponíveis nos relatórios exploratórios. Observe também que os dados de eventos são não retroativo atribuída a uma métrica personalizada. Uma métrica personalizada só começa a coletar dados depois de ter sido criada.
