Crear eventos de clic personalizados en GA4

Última actualización el 18 jun 20266 min de lectura

Índice de contenidos

• En resumen
• Paso 1: Enviar un evento personalizado a GA4
• Paso 2: Configura un evento personalizado en GA4

important

Estas instrucciones solo se aplican si los datos no se envían a Google Analytics 4 mediante un GTM del lado del servidor o un GTM integrado a través del Custom Pixel de Shopify. Sin embargo, si los datos se envían mediante un GTM del lado del servidor o un GTM integrado a través del Custom Pixel de Shopify, los eventos primero deben enviarse al DataLayer y luego transmitirse a GA4 a través del GTM.

En resumen

Varify.io® no recopila ningún dato por sí mismo. Sin embargo, puedes rastrear eventos de clic en elementos específicos dentro de tus experimentos de Varify. En esta sección, explicamos paso a paso cómo hacerlo con Google Analytics 4.

La configuración se realiza en dos fases: primero, envías tu evento a GA4 (Paso 1), luego lo configuras en GA4 (Paso 2)—eventos de ingresos como eventos clave, y valores numéricos adicionalmente como métricas personalizadas. Para aprender a analizar el evento completado, consulta el artículo «Analyzing Custom Events.».

Paso 1: Enviar un evento personalizado a GA4

Enfoque recomendado: Enviar eventos a través de la configuración de tracking existente

Por lo general, recomendamos enviar eventos personalizados a GA4 utilizando el mismo método que ya usas para rastrear tus eventos, es decir, a través de tu configuración de tracking existente:

• ¿Se utiliza Google Tag Manager?, los eventos personalizados deben crearse a través de GTM y pasarse a GA4 (normalmente mediante el DataLayer y una etiqueta de evento de GA4 correspondiente).
• ¿GA4 está integrado directamente en el sitio web? (sin GTM), los eventos personalizados se envían de la misma forma directa.

Esto asegura que tu tracking se mantenga coherente y pueda gestionarse desde un lugar central. La solución de click-event descrita a continuación, que utiliza la función «Add JS», está pensada como un complemento si quieres medir clics en elementos individuales dentro de un experimento de Varify.

Click tracking en un elemento específico

El elemento solo existe en tu variante

Para medir los clics en elementos recién creados en tu variante, primero debes definir un selector único para cada elemento. Los IDs son especialmente adecuados para esto.

Un selector único es por ejemplo: #my-btn

Para adaptar el código JavaScript para el seguimiento de clics en tu nuevo elemento, primero debes sustituir el marcador de posición #my-btn en la línea 3 del código por el selector real de tu elemento. Puedes usar la función "Add JS" para hacer esto. Sigue estas instrucciones:

1. Abre el editor de JavaScript en Varify: Abre la ventana en el editor para insertar JavaScript. Encontrarás el símbolo de código en la parte superior derecha.
2. Inserta el código: Pega el código JavaScript proporcionado en el editor.
3. Sustituye el selector: Busca el marcador de posición en la línea 3 #my-btn. Sustituye #my-btn por el selector real de tu nuevo elemento. Esto podría ser un ID (por ejemplo 1TP6New-button-id) o una clase (por ejemplo .new-button-class).
4. Guarda los cambios: Guarda 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 el original y en la variante)

Para medir clics en elementos que ya existen en tu sitio web, es importante que definas un selector único para cada elemento. Una forma eficaz de determinar dicho selector es usar el editor visual de Varify.io.

A continuación se muestra un ejemplo de un selector único .btn-primary.

Para hacer seguimiento de eventos de clic de elementos que ya existen y que aparecen tanto en el original como en la variante de tu experimento, puedes configurar un experimento de seguimiento especial. Aquí tienes una guía personalizada:

1. Crear nuevo experimento: Crea un experimento destinado exclusivamente a rastrear elementos.
2. Agregar código JavaScript: Usa la función "Add JS" para añadir el código JavaScript necesario a tu variante. En la línea 3 del código, sustituye el marcador de posición .btn-primary por el selector CSS correcto de tu elemento.
3. Configurar el targeting de página: Configura el targeting de página del experimento para que apunte a la página de inicio con un tipo de coincidencia "Contains". Esto garantiza que se incluyan todas las páginas de tu sitio web, de modo que el experimento esté activo en todo el sitio.
4. Ajustar la distribución del tráfico: La distribución del tráfico debe configurarse al 100% para la variante, para garantizar que todos los usuarios reciban el script de rastreo.
5. Rastrear 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 una métrica personalizada, debe enviar un parámetro de evento a GA4. En los fragmentos de eventos de clic anteriores, este parámetro ya está incluido (VarifyClickCount).

Si estás rastreando un evento personalizado a través de GTM y aún no envía ningún parámetro, agrégalos directamente al evento:

1. Abre la pestaña «Event Parameters».
2. Haz clic en el botón azul «Add Parameter».
3. En el campo «Event Parameters», introduce el nombre del parámetro.
4. Introduce debajo de Value el número 1 (o, en el caso de eventos de ingresos, el valor dinámico de ingresos).
5. Publica los cambios en el contenedor de GTM.

Paso 2: Configura un evento personalizado en GA4

Una vez que tus eventos se envían correctamente a GA4, aparecerán allí automáticamente, sin que tengas que crearlos manualmente. (Puede tardar hasta 24 horas en aparecer en los informes.)

Con esto concluye la parte de envío; ahora continuamos en GA4. Según tu caso de uso, configura tu evento allí de la siguiente manera:

• Cifras de ingresos: selecciónalas como Key Event para que aparezcan en «Key Events» en el Varify Result Report.
• Métricas numéricas estándar: además, créalas como Custom Metric para que puedas analizarlas en los informes exploratorios.

Marcar eventos personalizados de ingresos como eventos clave

Para que un evento personalizado de ingresos aparezca en "Eventos clave" en el informe de resultados de Varify y pueda seleccionarse allí como objetivo, debe marcarse como evento clave en GA4. Para otros eventos personalizados (por ejemplo, eventos de clic puros), este paso no es necesario; de todos modos están disponibles como objetivos.

1. En GA4, ve a Administración → Eventos (o Eventos clave).
2. Busca tu evento personalizado de ingresos y activa el interruptor "Mark as Key Event".
3. Si el evento aún no se ha registrado, haz clic en "New Key Event" e introduce el nombre del evento exactamente 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 cantidad) en informes exploratorios, crea una métrica personalizada en GA4. Esto requiere que el evento incluya el parámetro correspondiente (ver Paso 1).

1. En GA4, ve a Admin → Custom Definitions → Custom Metrics → Create Custom Metric.
2. Introduce un nombre descriptivo y, opcionalmente, una breve descripción.
3. Selecciona el parámetro de evento en el menú desplegable o añádelo manualmente. Asegúrate de usar la ortografía correcta.
4. Deja el campo «Unit of Measurement» normalmente configurado como «Standard» (para ingresos: la unidad de moneda 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 también: los datos de eventos no se asignan retroactivamente a una métrica personalizada. Una métrica personalizada solo empieza a recopilar datos después de haber sido creada.

Aviso: Varify no asume ninguna responsabilidad por la funcionalidad del código y la información.
Es responsabilidad del usuario probar el código exhaustivamente e implementarlo correctamente.