Creación de eventos de clic personalizados en GA4
Índice
Corto y dulce
Varify.io® no recopila datos por sí mismo. Sin embargo, puede realizar un seguimiento de los eventos de clic en elementos específicos dentro de sus experimentos Varify. En esta sección, explicamos paso a paso cómo puede hacerlo con Google Analytics 4.
La configuración se realiza en dos fases: primero, envías tu evento a GA4 (paso 1) y, a continuación, lo configuras en GA4 (paso 2): los eventos de ingresos como „evento clave” y los valores numéricos, además, como «métrica personalizada». Para saber cómo analizar el evento una vez configurado, consulta el artículo «Análisis de eventos personalizados».
Paso 1: Enviar un evento personalizado a GA4
Método recomendado: enviar eventos a través de la configuración de seguimiento existente
Recomendamos enviar los eventos personalizados a GA4 siempre a través del canal por el que ya registras tus eventos, es decir, a través de tu configuración de seguimiento actual:
- ¿Se utiliza Google Tag Manager?, los eventos personalizados deben crearse a través de GTM y enviarse a GA4 (por lo general, a través de DataLayer y la etiqueta de evento correspondiente de GA4).
- ¿Se integra GA4 directamente en la página web? (sin GTM), los eventos personalizados se envían por la misma vía directa.
De este modo, tu seguimiento será coherente y podrás gestionarlo desde un único lugar. La solución para eventos de clic que se describe a continuación, mediante la función „Add JS”, está pensada como complemento si deseas medir los clics en elementos concretos dentro de un experimento de Varify.
Seguimiento de clics en un elemento específico
El elemento sólo existe en su variante
Para medir los clics en elementos recién creados en su variante, primero debe definir un selector único para cada elemento. Los ID son especialmente adecuados para ello.
Un selector único es, por ejemplo: #mi-btn
Para adaptar el código JavaScript para el seguimiento de los clics en su nuevo elemento, primero debe utilizar el marcador de posición #my-btn en la línea 3 del código con el selector real de su elemento. Puede utilizar la función "Añadir JS" para hacer esto. Siga estas instrucciones:
Abra el editor de JavaScript en Varify: Abra la ventana en el editor para insertar JavaScript. Encontrará el símbolo de código en la parte superior derecha.
Insertar código: Pegue el código JavaScript proporcionado en el editor.
Sustituya el selector: Encuentra el marcador de posición en la línea 3
#my-btn. Sustituir#my-btncon el selector real de su nuevo elemento. Puede ser un ID (por ejemplo1TP6Nuevo-botón-id) o una clase (por ejemplo.new-button-class).Guarda los cambios: Guarde los cambios después de sustituir el selector.
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.");
}
}
El elemento ya existe (en original y variante)
Para medir los clics en elementos que ya existen en su sitio web, es importante que defina un selector único para cada elemento. Una forma eficaz de determinar dicho selector es utilizar el editor visual de Varify.io.
A continuación se muestra un ejemplo de selector único .btn-primary.
Para realizar un seguimiento de los eventos de clic de elementos ya existentes que se producen tanto en el original como en la variante de su experimento, puede configurar un experimento de seguimiento especial. Aquí tienes una guía personalizada:
Crea un nuevo experimento: Cree un experimento destinado exclusivamente a los elementos de seguimiento.
Añade código JavaScript: Utilice la función "Añadir JS" para añadir el código JavaScript necesario a su variante. En la línea 3 del código, sustituya el marcador de posición
.btn-primarycon el selector CSS correcto de su elemento.Establecer la orientación de la página: Establezca la página de destino para el experimento de modo que se establezca en la página de inicio con un tipo de coincidencia "Contiene". Esto garantiza que se incluyan todas las páginas de su sitio web, de modo que el experimento esté activo en todo el sitio.
Ajustar la distribución del tráfico: La distribución del tráfico debe establecerse en 100% para la variante a fin de garantizar que todos los usuarios reciban el script de seguimiento.
Seguimiento de eventos de clic: Los clics en el elemento especificado se envían como un evento a Google Analytics 4 (GA4) para ser analizados allí.
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 en GTM
Para que puedas analizar el evento más adelante como métrica personalizada, este debe enviar un parámetro de evento a GA4. En los fragmentos de código de eventos de clic que aparecen más arriba, este ya se envía (VarifyClickCount).
Si registras un evento personalizado a través de GTM y este aún no envía ningún parámetro, añádelo directamente al evento:
- Abre la pestaña „Parámetros del evento”.
- Haz clic en el botón azul „Añadir parámetro”.
- Introduce en el campo „Parámetros del evento” Introduce el nombre del parámetro.
- Llévalo debajo Valor el número
1uno (o, en el caso de los eventos de ingresos, el valor dinámico de los ingresos). - Publica los cambios en el contenedor de GTM.
Paso 2: Configurar un evento personalizado en GA4
En cuanto tus eventos se envíen correctamente a GA4, aparecerán allí de forma automática, sin que tengas que crearlos manualmente. (Pueden tardar hasta 24 horas en aparecer en los informes.)
Con esto concluye la parte de envío; ahora continuamos en GA4. Dependiendo del caso concreto, configura allí tu evento de la siguiente manera:
- Cifras de ingresos: como Evento clave Selecciona estas opciones para que aparezcan en el informe de resultados de Varify, en la sección «Key Events».
- Métricas normales (numéricas): además, como Métrica personalizada crearlas para que puedas analizarlas en los informes exploratorios.
Marcar los «Revenue Custom Events» como eventos clave
Para que un evento personalizado de ingresos aparezca en el informe de resultados de Varify dentro de los eventos clave y pueda seleccionarse allí como objetivo, debe estar marcado como evento clave en GA4. Para otros eventos personalizados (por ejemplo, eventos de solo clic), este paso no es necesario, ya que están disponibles de por sí como objetivos.
- En GA4, ve a «Administración» → «Eventos» (o «Eventos clave»).
- Busca tu evento personalizado de ingresos y activa la casilla «Marcar como evento clave».
- Si el evento aún no se ha registrado, haz clic en «Nuevo evento clave» e introduce el nombre del evento exactamente tal y como lo recibe GA4.
Crear valores numéricos como métricas personalizadas
Si quieres analizar el valor numérico de un evento (por ejemplo, un recuento o una cantidad) en los informes exploratorios, crea una métrica personalizada en GA4. Para ello, es necesario que el evento envíe el parámetro correspondiente (véase el paso 1).
- En GA4, ve a Admin → Definiciones personalizadas → Métricas personalizadas → Crear métrica personalizada.
- Asigna un nombre descriptivo y, si lo deseas, una breve descripción.
- Selecciona el parámetro del evento en el menú desplegable o añádelo manualmente. Presta atención a la ortografía exacta.
- Déjalo en el campo „Unidad de medida” por lo general, el valor „Estándar” (en el caso de la facturación: la unidad monetaria correspondiente) y guarda la métrica personalizada.
Los datos tardan entre 24 y 48 horas en estar disponibles en los informes exploratorios. Ten en cuenta además que los datos de eventos se no con carácter retroactivo asignada a una métrica personalizada. Una métrica personalizada solo empieza a recopilar datos una vez que se ha creado.
